Embedding VR view (Google VR)

VR view allows you to embed 360 degree VR media into websites on desktop and mobile, and native apps on Android and iOS. This technology is designed to enable developers of traditional apps to enhance the apps with immersive content. For example, VR view makes it easy for a travel app to provide viewers with an underwater scuba diving tour as they plan a vacation or for a home builder to take prospective buyers on a virtual walkthrough before the home is built.

Try to click and drag in the image above, it's a VR view!

VR view also addresses a common developer concern: the limited availability of VR hardware among the general public. Although VR view supports true stereoscopic VR playback through compatibility with Google Cardboard, it defaults to a simple “magic window” mode that works on everything from desktop browsers to mobile apps without any special hardware.

Supported platforms

VR view handles almost all of the difficult and time-consuming work required to ensure compatibility across all modern browsers and mobile operating systems with one exception: 360 videos do not work in a browser on iOS.

Web

• Modern versions of Chrome on Windows, OSX, Linux, Android, and iOS.
• Modern versions of Safari on OSX and iOS.
• Modern versions of Firefox on Windows, OSX, and Linux.
• Modern versions of IE 11 and Edge on Windows.

Native

• iOS 8 and higher.
• Android 4.4 (Kit Kat) and higher.

Supported formats

VR view supports mono and stereo 360images andvideos. Images and video need to be stored in the equirectangular-panoramic (equirect- pano) format, which is a common format supported by many capture solutions.

Mono 360 uses a single pano.

Stereo 360 uses two stacked panos.

Image specifications

• VR view images can be stored as png, jpeg, or gif. We recommend you use jpeg for improved compression.
• For maximum compatibility and performance, image dimensions should be powers of two (e.g., 2048 or 4096).
• Mono images should be 2:1 aspect ratio (e.g. 4096 x 2048).
• Stereo images should be 1:1 aspect ratio (e.g. 4096 x 4096).

Video specifications

• VR view videos should be stored as mp4s encoded with h264.
• Mono videos should be 2:1 aspect ratio.
• Stereo videos should be 1:1 aspect ratio.
• Some older devices cannot decode video larger than 1080p (1920x1080). If maximum compatibility and quality is a priority, we recommend that users provide both a monoscopic 1920x1080 video and a stereo video at 2048x2048 or higher.

Media capture and hosting

VR view is a “client side” display technology and is intentionally independent of the technologies used to capture or host the 360 VR content. The following are some basic guidelines for how to capture and host content that will be compatible with VR view.

Real world capture

Taking 360 photos and videos is increasingly easy and affordable. VR view can use images generated by any camera that supports the equirect-pano format described above. For users interested in getting started quickly, a few of our favorite solutions are listed below:

• Cardboard Camera App: This free app for Android allows users to quickly capture stereo 360 images.
• Ricoh Theta: A very popular, relatively inexpensive solution for capturing mono 360 images and videos.

CG capture

Imagery for VR view isn’t limited to captures from the real world. CGI software can generate 360 images and videos for everything from architectural walkthroughs to movie previews. Some of our most popular capture solutions are listed below:

• 360 Panorama Capture for Unity: A free, easy to use 360 capture plugin for Unity.
• Unreal: The latest version of UE4 has built-in 360 capture solutions.
• Domemaster3D for Maya: A free solution for capturing mono and stereo 360 images from Maya.
• Renderman: Open source library for capturing 360 content.
• Rendering Omnidirectional Stereo Content: A whitepaper for anyone interested in writing their own 360 capture solutions.

Hosting

As a client side display solution, VR view allows developers to choose the best hosting and distribution strategy for their unique needs. Most developers will likely choose to host their media on a web server via HTTP/HTTPS. This approach works equally well for Web and Native. As long as you can provide a URL for your media, VR view can handle it. For native apps, you can also use media that is packed with your app. This approach is ideal if you want to ensure some media is instantly accessible for users of your apps or available to users without internet connections.

Getting started with VR view for the web

The simplest way to embed a photosphere on your website is by including an iframe that links to the VR view source and specifies which image or video URL to show.

Example URL (attribute explanation below):

<iframe width="100%" height="300px" allowfullscreen frameborder="0" src="//storage.googleapis.com/vrview/index.html?image=//storage.googleapis.com/vrview/examples/coral.jpg&is_stereo=true"></iframe>

This code is exactly what we used to embed the VR view at the top of the page.

In this iframe tag, we use the following attributes for the following reasons:

• width="100%" makes the frame go full-width.
• height="300px" sets the height of the frame.
• allowfullscreen makes it possible for the frame to go into fullscreen mode.
• frameborder="0" hides the border around the frame.

Note that images and videos accessed this way must be available viaCORS.

Control parameters

CGI parameters are used to control what media is presented in the VR view and how it is displayed. The most critical parameters are:

• image or video: {String} URL of image or video to load. (required)
• is_stereo: {Boolean} true if content is in stacked stereo format. (optional, default false)
• preview: {String} URL of still preview to load first. (optional, default none)
• start_yaw: {Number} Initial yaw of viewer, in degrees. (optional, default 0)
• is_yaw_only: {Boolean} true if motion is restricted to yaw only. (optional, default false)

Self-hosting

Although the iframe is the simplest way to try out VR view on the web, we recommend that users host the VR view code on their own server. Hosting the code yourself avoids several known issues with browsers (see below). To facilitate this, we have released all of the open source code for VR view on the web via GitHub.

Using VR View on other platforms

Please read our guides for using VR view on Android and iOS:

• Android
• iOS

Known issues on the Web

• 360 videos do not work on the web on iOS due to iOS forcing full screen playback of videos in the browser.
• 360 images have incorrect orientation in iOS Safari if the code and images are hosted on different servers.
• 360 videos do not work in OSX Safari if the media and the VR view code are hosted on different servers.
• Images that are not power-of-two and square may not display correctly in Chrome and Safari iOS 8.