Tuesday, 15 August, 2017 UTC


Summary

The general release of Firefox 55 brought a number of cool new features to the Gecko platform, one of which is the WebVR API v1.1. This allows developers to create immersive VR experiences inside web apps, compatible with popular hardware such as HTC VIVE, Oculus Rift, and Google Daydream. This article looks at the resources we’ve made available to facilitate getting into WebVR development.
Support notes
Version 1.1 of the WebVR API is very new, with varying support available across modern browsers:
  • Firefox 55 sees full support on Windows, and more experimental support available for Mac in the Beta/Nightly release channels only, until testing and final work is completed. Supported VR hardware includes HTC VIVE, Oculus Rift, and Google Daydream.
  • Chrome support is still experimental — you can currently only see support out in the wild on Chrome for Android with Google Daydream.
  • Edge fully supports WebVR 1.1, through the Windows Mixed Reality headset.
  • Support is also available in Samsung Internet, via their GearVR hardware.
Note that the 1.0 version of the API can be considered obsolete, and has been (or will be) removed from all major browsers.
Controlling WebVR apps using the full features of VR controllers relies on the Gamepad Extensions API. This adds features to the Gamepad API that provide access to controller features like haptic actuators (e.g. vibration hardware) and position/orientation data (i.e., pose). This currently has even more limited support than the WebVR API; Firefox 55+ has it available in Beta/Nightly channels.
In other browsers, you’ll have to make do for now with basic Gamepad API functionality, like reporting button presses.
vr.mozilla.org
vr.mozilla.org — Mozilla’s new landing pad for WebVR — features demos, utilities, news and updates, and all the other information you’ll need to get up and running with WebVR.
MDN documentation
MDN has full documentation available for both the APIs mentioned above. See:
  • WebVR API reference
  • Gamepad API reference, which includes the Gamepad Extensions API
In addition, we’ve written some useful guides to get you familiar with the basics of using these APIs:
  • WebVR concepts
  • Using the WebVR API
  • Using VR controllers with WebVR
A-Frame and other libraries
WebVR experiences can be fairly complex to develop. The API itself is easy to use, but you need to use WebGL to create the 3D scenes you want to feature in your apps, and this can prove difficult to those not well-versed in low-level graphics programming. However, there are a number of libraries to hand that can help with this.
The hero of the WebVR world is Mozilla’s A-Frame library, which allows you to create nice looking 3D scenes using custom HTML elements, handling all the WebGL for you behind the scenes. A-Frame apps are also WebVR-compatible by default. It is perfect for putting together apps and experiences quickly.
  • A-Frame documentation
  • A-Frame demos
  • Salva’s Tools for VR development article series
There are a number of other well-written 3D libraries available too, which abstract away the difficulty of working with raw WebGL. Good examples include:
  • Three.js
  • BabylonJS
  • PlayCanvas
These don’t include VR capabilities out of the box, but it is not too difficult to write your own WebVR rendering code around them.
If you are worried about supporting older browsers that only include WebVR 1.0 (or no VR) as well as newer browsers with 1.1, you’ll be pleased to know that there is a WebVR polyfill available.
Demos and examples
  • vr.mozilla.org — the main Mozilla landing pad for WebVR, with demos, utilities, and other information.
  • webvr-tests — very simple examples to accompany the MDN WebVR documentation.
  • Carmel starter kit — nice simple, well-commented examples that go along with Carmel, Facebook’s WebVR browser.
  • WebVR.info samples — slightly more in-depth examples plus source code
  • WebVR.rocks Firefox demos — showcase examples
  • A-Frame homepage — examples showing A-Frame usage
See also
  • WebGL reference
  • The <canvas> element