Pano2VR 7 Docs / Exporting for VR

Exporting for VR

Pano2VR projects can be viewed in a head mounted display or VR headset through WebXR, Cardboard, or VRTourviewer.

Skins in VR are supported, however, not all skin features are supported. All Point Hotspots are supported except for PDF, URL, and YouTube/Vimeo hotspots. If a VR skin isn’t used, tour node hotspots will be visible as spinning 3D globes but can be changed using custom hotspot images.

Add a skin for VR in the VR panel of the Web Output Settings. See the instructions below. Pano2VR ships with 2 VR skins that are free to use.

For white label and offline app creation, we recommend using VR Tourviewer. Alternatively, you can use the Package Viewer app for offline WebXR viewing.

To enter VR, you will need a button. All built-in skins have an Enter VR button which will appear on a mobile device or HMD.

★ The project must be hosted on a secure server (HTTPS/SSL) to use the devices’s gyroscope which is needed for viewing.

★ Mobile phones require permission to be granted to use the Gyroscope and Accelerometer. On first launch, you should get an opportunity to give permission. If the gyroscope is not working, and you’re using a secure server, then try clearing website data. On an iPhone go to Settings > Safari > Clear History and Website Data.

What is Supported

Point Hotspots are supported except the following types:

  • URL
  • PDF
  • Video > YouTube
  • Video > Vimeo

Pinned elements not supported in VR:

  • Web Element
  • Lens Flare

Skins are supported but not all skin features. The following skin elements are not supported in VR:

  • Video > YouTube
  • Video > Vimeo
  • Map
  • PDF
  • Scroll Area
  • Seekbar
  • Lottie

Skin features not supported in VR:

  • Custom CSS Position and Size and CSS properties (class, style, inner element)

  • Masking in elements

Use the Built-in VR Skins

  1. Create a project.
  2. Add a Web Output.
  3. Add a skin that includes an Enter VR button. All built-in skins have one included. If you need to simply update a skin with an Enter VR button, read the instructions below these.
  4. In the Web Output Properties, find the VR pane. Select Enabled.
  5. Choose one of the built-in skins (feather_vr.ggsk or venis_vr.ggsk).
  6. [Optional] In the VR output, there is a button that appears when viewing up. Clicking it will hide or show the skin. Deselect, Floating Skin Menu Button to hide this button.
  7. Generate the Output. (You may have to save the project first.)

The output will work for Cardboard, Oculus, and other headsets with browsers that support WebXR.

Update a Skin with Enter VR

  1. Open the skin.

  2. Add the Enter VR component from the Components Toolbox. These buttons will be from version 6 skins silhouette and simplex. If you’d like to use the buttons from the version 7 skins, you can create a component from their Enter VR buttons. Or make your own by adding the Enter VR action to your button (Mouse Click > Fullscreen/VR > Enter VR).

  3. Save the skin.

  4. In the Web Output settings, check that Enabled is selected in the VR pane.

  5. Add your VR skin (if you haven’t already).

  6. Save the project. The VR button you’ve added to the skin will only be visible on WebXR supported browsers.

Working with Stereo Panoramas

Pano2VR natively supports stereo images and videos.

https://vimeo.com/352493324

Importing

  1. Drag a stereo pair as a top/bottom or strip format into the Viewer or the Tour Browser. ★ If the image is a strip, change the Type to Strip VR.
  2. In the Properties, define the pair as Left/Right or Right/Left for Stereo Pair.

Tour Building

The tour building workflow is the same as for monoscopic images. Link the panoramas in any way. You can also mix stereo and mono images in the same tour.

Output as Web and add a skin that has an Enter VR button.

Custom Hotspot Images

If you’re not using a VR skin, and want to override the default spinning globes in VR, then you can add a custom hotspot image. If there are not many tour node hotspots to change, then you can manually set the hotspot image (described below). Or you can use a point hotspot template in the VR skin to change all node hotspots.

  1. Select a tour node point hotspot in the Viewer (or in List View).

  2. For Custom Image, click the folder to open an image for the hotspot.

  3. Choose to resize the image or to have it 3D Distorted which will pin the image to the panorama. You can then set the field of view to make the image appear smaller or larger.

  4. Set the image’s distance from the center using the Distance setting. Leave at Auto which is based on location data or deselect auto and set the distance manually. This option is only available if the hotspot type is Tour Node.

★ The custom image, like the spinning globes, will expand when the pointer is over it and contract when it leaves. However, using 3D distortion will image will make the hotspot static, staying at the size (file) that’s been chosen in step 4 above.

Patching

You can use the patch tool to quickly fix movements between the images, nadir, zenith, etc.

  1. Add a patch over the area to fix.

  2. Extract. This will open an extracted version of both sides in your default image editor. The left side will be the extracted patch.

  3. In the photo editor, if using the Clone tool, clone the right side and stamp on the left. So that the left side is being cloned by the right side.

Updating a project from WebVR to WebXR

To update your projects to use WebXR, please re-output your projects.

If you no longer have the project available or need a quicker solution than re-outputting, you can replace the player and edit the HTML page:

  1. Build a new project with Pano2VR 6.1.6 or later and output the project to generate a new webxr folder in the output.
  2. In the project to be updated, replace the webvr folder with the new webxr folder.
  3. Copy the new pano2vr_player.js file from the Pano2VR 6.1.6 output and replace the file in old project folder.
  4. Open the HTML page in a text editor and search for webvr and replace with webxr.
  5. Test on your favorite HMD.

See also…

Last modified: Sep 29, 2023