WebXR enables you to create an immersive experience directly from a web page without the need for an app. Most of the current VR headsets can display WebXR content. You can find an up-to-date list at WebXR.info.
Currently, only Tour Node type point hotspots are supported in the WebXR output. The tour node hotspots will be visible as spinning 3D globes. These can be changed using custom hotspot images.
For more feature support and app creation, we recommend using VR Tourviewer
To enter VR, you will need a button. Use our built-in skins (
simplex_v6) which already have the button and actions already applied or update a skin with the Enter VR component or build your own button.
Use the Built-in Skins
Create a project.
Add an HTML5 output project.
From the menu for Skin, choose
Check that Enabled is selected in the VR pane.
Click the Generate Output button. (You may have to save the project first.)
Update a Skin with Enter VR
Open the skin.
Add the Enter VR component from the Components Toolbox.
Save the skin.
In the HTML5 output settings, check that Enabled is selected in the VR pane.
Save and output 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.
- 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.
- In the Properties, define the pair as Left/Right or Right/Left for Stereo Pair.
The tour building workflow is the same as with monoscopic images. Link the panoramas in any way. You can also mix stereo and mono images in the same tour.
Output as HTML5 and add a skin that has an Enter VR button. The simplex_v6 and silhouette_v6 skins both have this button.
Custom Hotspot Images
Add a custom hotspot image for VR mode. Skins are currently not supported so the default hotspot image are spinning 3D globes. If you’d like to use your own image, instead of the globes, then you can add one in the point hotspot properties.
Select a point hotspot in the Viewer (or in List View).
For Custom Image, select the folder to open an image for the hotspot.
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.
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.
You can use the patch tool to quickly fix movements between the images, nadir, zenith, etc.
Add a patch over the area to fix.
Extract. This will open an extracted version of both sides in your default image editor. The left side will be the extracted patch.
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:
- Build a new project with Pano2VR 6.1.6 or later and output the project to generate a new
webxrfolder in the output.
- In the project to be updated, replace the
webvrfolder with the new
- Copy the new
pano2vr_player.jsfile from the Pano2VR 6.1.6 output and replace the file in old project folder.
- Open the HTML page in a text editor and search for
webvrand replace with
- Test on your favorite HMD.