The VR View tool allows a 360 degree view of an image that creates a more immersive experience for the user. The tool renders a spherical image (which can be shot on most smartphones using free apps) and allows the user to pan around the scene providing them with a 360 degree view.

On mobile phones, the user can move their device to move the image, as well as using touch controls. On desktop, the user can use mouse controls to pan around the image.

‘Virtual Reality’ mode can be enabled on compatible mobile devices. This allows a smartphone to be inserted into a pair of compatible Virtual Reality goggles to create a more realistic, virtual scene. As a user’s head moves, the image is moved accordingly which emulates the sensation that the user is ‘inside’ the scene.

🖼️ Examples

Here's some examples of how you can configure the VR View tool:

⚙️Settings

Settings you can configure in the VR View tool:

Basic

  • Image - sets the 360 degree image that will be rendered in the block (images must use the equirectangular-panoramic (equirect-pano) format. to work).
  • VR mode - enables Virtual Reality mode for the tool. When enabled a control will be displayed on mobile devices. When selected by the user, this will prepare the image for use in compatible VR goggles that can then be viewed by the user.
  • Image Type - selects the type of 360 degree image that has been uploaded:
    • Mono - A single channel image created in a 2:1 ratio
    • Stereo - A double channel image created in a 1:1 ratio. Stereo images produce a greater ‘depth of field’ for the user.

Display

  • Image Height - sets the relative height of the image. There are three options available:
    • Small - Set the image to a max height of 320px.
    • Medium - Sets the image to a max height of 480px.
    • Large - Sets the image to a max height of 640px
      On mobile devices the height of the image is limited to 70% of the user’s screen so that they can scroll past the content.
  • Autopan - enables the image to automatically started rotating when loaded. This helps provide a cue to visitors that the content is interactive.
  • Image position - adjusts the location within the 360 degree image that will be first displayed to the visitor as a starting point. If there is a portion of the image that viewers should focus on, the starting point can be changed adjusting the control to +180 degrees or -180 degrees.

Advanced

  • Block Title - sets an optional title for the block.
  • Block Description - sets an optional description for the block that will appear below the Block Title.

🎯 Key Actions

Key actions you can perform in the VR View tool:

  1. Under the Basic tab, select Choose New File under Image.
  2. This will open the File Manager. Select Upload Files at the top right of the screen.
  3. Alternatively, you can drag and drop your image into the File Manager to upload it.
  4. Once complete, select the blue Save button.

You can view the image in Virtual Reality mode using a headset that can accommodate your mobile device. When in VR mode, you can explore the image by moving your head.

  1. Navigate to your page on a mobile device.
  2. At the bottom of the VR image, select the mask icon.
  3. Place your phone into your viewer (you will be presented with a diagram instructing you how to do this).
  4. Once your phone is rotated into landscape orientation, it will assume VR mode.
  5. To adjust your settings for different viewers, hit the settings icon at the bottom centre of the screen.

Practice tips

  • To make the VR tool work, image files must meet strict content requirements. The VR View tool is implemented using Google’s VR technology and their documentation should be consulted when using the tool.
  • Images can be prepared in either mono or stereo formats, with stereo images producing greater depth to the ‘scene’. Images will also need to be created using the equirectangular-panoramic (equirect-pano) format and should follow these guidelines (according to Google):
    • Images can be stored as png, jpeg, or gif. JPEG is recommended for improved compression
    • Image dimensions should be powers of two (e.g. 2048 or 4096)
    • Mono images should have a 2:1 aspect ratio
    • Stereo images should have a 1:1 aspect ratio
  • VR View is not supported by all browsers so you should provide a meaningful description of this activity using the alt text, or provide other ways for users to interpret the content.
  • It should also be noted that there are no keyboard controls, so not all users may be able to pan the image.

Further information about Google’s VR technology can be found here: