Skip to main content

HTML5 Output (Pano2VR)

This is the documentation for Pano2VR 4. You can find the new documentation for Pano2VR 5 here.

Pano2VR - Help

The HTML5 output format allows you to create VR panoramas for use with mobile devices that do not support Adobe Flash. This page will explain the steps needed in order to output and display your HTML5 panorama.

The newest version of all major browsers support HTML5 panoramas as they support either CSS3 3D Transforms or WebGL.

The following video tutorial was created with version 3.1.4. Version 4 introduced Multiresolution output. We recommend using this for output feature for all devices.

Video loading...

Watch this video on YouTube

Download the project files used in this tutorial.

  1. Import your image.
  2. Adjust viewing parameters and add user data, hotspots, and media if you wish.
  3. In the output section, choose HTML5 from the output format list.
    Html5 3 format.png
  4. In the Tile Settings, choose a cube face size.
    ◊ TIP: This size should be larger than the largest cube face size specified in the Mobile Tab. When building multiple versions, this cube face size becomes the default for any screen resolution above the largest targeted screen resolution in the Mobile tab. (See step 11.)
  5. For Image Names, you can either choose a folder to which all the cube faces will be stored by clicking Open..., or you can leave it at the default, images/$n_o.jpg, and Pano2VR will create a folder named, images, in the same location as the image.
    ◊ TIP: The placeholder, $n, will take on the name of the image.
  6. Choose a naming convention for Face Names. The convention will be appended to the file name: 01_maria_o_1.jpg; 01_maria_o_front.jpg.
  7. Set a window size and a FoV mode.
    ◊ NOTE: The window size can always be changed within the HTML template.
  8. Enable Auto Rotation (select) or not.
  9. If you like, add a skin to the project by selecting one from the list, or by clicking Edit and building your own.
    ◊ TIP: The skin, simplex.ggsk, which is pre-installed, uses scalable vector graphics.
    Html5 9 skin.png
  10. For Image Output Path, choose a folder that will hold the skin images, by clicking, Open…. Or create new one by simply typing the folder name in the text field. The folder where be saved in same directory as the input image. If left at the default, images, the skin images will be saved to the same folder as the cubefaces (see, step 5).
  11. Go to the Mobile Tab and click Add to enter different cube face sizes for different screen resolutions. If you are following our example, we start with two sizes.
    This is where you can specify which version of your image should be used based on a device's screen resolution. If the cube face size is too large for a device, it can cause the browser to crash because the image is using too much memory. Which cube face size to use is basically trial and error plus personal preference
    ◊ TIP: Alternatively, we recommend using the Multiresolution feature which will allow viewing on all devices
    1. Enter the pixel width of the maximum screen size. You can start with 1024px. This will cover the resolution of the first and second generation iPad plus the iPhone4 and the later generation iPod Touch screens.
    2. Enter the cube face size for this particular resolution. You can try a 960px tile size.For the second cube face size setting, enter 500px for the max screen size and 400px for the cube face size (this will include the iPhone 3G and older iPod Touches.)
      ◊ TIP: List of suggested cube face sizes.
    3. Choose a compression setting (Image Quality).
      ◊ TIP: If you use a small tile size, you may want to increase the quality. In our example we start with a setting of 80 for the 1024px screen size and 90 for the small screen size.
    4. Image names functions the same Image names in the Settings Tab (see step 5). You can create a new location by renaming the folder, images, or use the default folder, images. The same goes for the file names - you can leave them as they are, or edit it to your liking.
      ◊ NOTE: $n will take the image name, while, $x will take on the size of the cube face. (e.g. ring_o_800_0.jpg, where 800 is the tile size)
      Html5 mobiletab.png
  12. Go to the HTML tab to export an HTML template. If it's not already enabled, select, Enable HTML file. Here you can do a number of things:
    • Select Fullscreen to ensure the panorama fills the browse screen when in Fullscreen mode.
      ◊ TIP: Double-tap on the panorama to go to Fullscreen.
    • Select (if not already selected) Flash fallback playerto ensure that your panorama plays in all browsers. If the browser does not support HTML5, the Pano2VR player will fall back to the Flash version. You will not have to create a separate Flash file if you choose this option. If the browser does not support either of these, an error message will pop up.
      ◊ TIP: Learn more about the fallback player.
    • Select Prefer Flash if available if you want the Flash version to be preferred over the HTML5 version in a browser that is capable of playing both back.
      ◊ NOTE: When building a tour that includes both Flash and HTML5, have the hotspots point to the Flash versions to make sure that the tour is playable in all browsers.
  13. Hit OK to output the panorama.
    ◊ TIP: If adding to a web server, make sure to copy over the XML, HTML, javascript player, javascript file for the skin, and the images folder (including the skin images folder if you made a separate folder for it).

See also[edit]

HTML5 Output Settings (Pano2VR)
Cache Manifest File
IFrame stretching -- Known issue
How to enable WebGL
HTML5 Cube Face Size for Apple Devices
HTML5 Flash Fallback Player
CMS Plugins