The #ChromeDevSummit site is live, happening Nov 12-13 in San Francisco, CA
Check it out for details and request an invite. We'll be diving deep into modern web tech & looking ahead to the platform's future.

WebVR

WebVR is a JavaScript API that makes use of any VR headset and a VR-capable device your users have — such as a Daydream headset and Pixel phone — to create fully immersive 3D experiences in your browser.

Support and Availability

Today the WebXR Device API is under development, but you can try it out with:

  • The #webxr flag in Chrome 66 and later.
  • As an Origin Trial in Chrome 67 and later.

It's also available through the WebXR Polyfill. Bear in mind, that VR is extremely performance-sensitive and polyfills typically have a relatively large performance cost, so it may be worth considering whether or not you wish to use the polyfill for a user who doesn’t have native support for the WebXR Device API.

When in doubt, avoid giving people motion sickness through poorly-performing experiences!

Get the latest status on WebVR.

Creating WebVR Content

To make WebVR content, you will need to make use of some brand new APIs, as well as existing technologies like WebGL and Web Audio, as well as accounting for different input types and headsets.

Get Started with WebVR

Get started with WebVR

Make a flying start with WebVR by taking a WebGL scene and adding VR APIs.
Learn More

Add Input to a WebVR Scene

Add input to a WebVR scene

Interaction is a crucial part of providing an engaging and immersive experience.
Get Started

More resources

There are some excellent WebVR resources beginning to appear around the web.

Keep track of your performance

WebVR Performance

In order to minimize discomfort for the people using WebVR experiences, they must maintain a consistent (and high) frame rate. Failing to do so can give users motion sickness!

On mobile devices the refresh rate is typically 60Hz, which means the target is 60fps (or 16ms per frame including the per-frame browser’s overhead). On desktop the target is typically 90Hz (11ms including overhead).

To meet those goals you will need to test regularly on your target devices, and should use Chrome DevTools’ Timeline to measure your per-frame costs.

Embrace Progressive Enhancement

Use Progressive Enhancement to maximize reach

What are you to do if your users don’t have a Head Mounted Display (‘HMD’) or VR-capable device? The best answer is to use Progressive Enhancement.

  1. Assume the user is using traditional input, such as a keyboard, mouse, or touchscreen with no access to a VR headset.
  2. Adapt to changes in input and headset availability at runtime.

Thankfully the WebVR APIs make it possible to detect changes in the VR environment for us to discover and adapt to changes in the inputs and viewing options in the user’s device.

By assuming a non-VR environment first you can maximize the reach of your experiences, and ensure that you’re providing the best possible experience no matter what setup your users have.

For more, read our guide on adding input to a WebVR scene.