This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
WebVR provides support for exposing virtual reality devices — for example head-mounted displays like the Oculus Rift or HTC Vive — to web apps, enabling developers to translate position and movement information from the display into movement around a 3D scene. This has numerous very interesting applications, from virtual product tours and interactive training apps to immersive first person games.
Concepts and usage
VRDisplay is the central interface in the WebVR API — via its properties and methods you can access functionality to:
- Retrieve useful information to allow us to identify the display, what capabilities it has, controllers associated with it, and more.
frame datafor each frame of content you you want to present in a display, and submit those frames for display at a consistent rate.
- Start and stop presenting to the display.
A typical (simple) WebVR app would work like so:
Navigator.getVRDisplays()is used to get a reference to your VR display.
VRDisplay.requestPresent()is used to start presenting to the VR display.
- WebVR's dedicated
VRDisplay.requestAnimationFrame()method is used to run the app's rendering loop at the correct refresh rate for the display.
- Inside the rendering loop, you grab the data required to display the current frame (
VRDisplay.getFrameData()), draw the displayed scene twice — once for the view in each eye, then submit the rendered view to the display to show to the user (
In addition, WebVR 1.1 adds a number of events on the
Note: you can find a lot more out about how the API works in our upcoming basics tutorial (TBD).
- Represents any VR device supported by this API. It includes generic information such as device IDs and descriptions, as well as methods for starting to present a VR scene, retrieving eye parameters and display capabilities, and other important functionality.
- Describes the capabilities of a
VRDisplay— it's features can be used to perform VR device capability tests, for example can it return position information.
- Represents the event object of WebVR-related events (see the window object extensions listed below).
- Represents all the information needed to render a single frame of a VR scene; constructed by
- Represents the position state at a given timestamp (which includes orientation, position, velocity, and acceleration.)
- Provides access to all the information required to correctly render a scene for each given eye, including field of view information.
- Represents a field of view defined by 4 different degree values describing the view from a center point.
- Represents a layer to be presented in a
- Represents the values describing the the stage area for devices that support room-scale experiences.
Extensions to other interfaces
The WebVR API extends the following APIs, adding the listed features.
- Returns the
VRDisplay.displayIdof the associated
VRDisplaythat the gamepad is controlling the displayed scene of.
- Returns an array containing every
VRDisplayobject that is currently presenting (
- Returns a promise that resolves to an array of
VRDisplayobjects representing any available VR displays connected to the computer.
- Represents an event handler that will run when the presenting state of a VR display changes — i.e. goes from presenting to not presenting, or vice versa (when the
- Represents an event handler that will run when a compatible VR display has been connected to the computer (when the
- Represents an event handler that will run when a compatible VR display has been disconnected from the computer (when the
Unimplemented window events
The following events are listed in the spec, but do not currently seem to be implemented anywhere as yet.
- Represents an event handler that will run when a display is able to be presented to (when the
vrdisplayactivateevent fires), for example if an HMD has been moved to bring it out of standby, or woken up by being put on.
- Represents an event handler that will run when a display can no longer be presented to (when the
vrdisplaydeactivateevent fires), for example if an HMD has gone into standby or sleep mode due to a period of inactivity.
- Represents an event handler that will run when presentation to a display has been paused for some reason by the browser, OS, or VR hardware (when the
vrdisplayblurevent fires) — for example, while the user is interacting with a system menu or browser, to prevent tracking or loss of experience.
- Represents an event handler that will run when presentation to a display has resumed after being blurred (when the
You can find a number of examples at these locations:
- 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
- WebVRList.info — showcase examples
- WebVR.rocks Firefox demos — showcase examples
- A-Frame homepage — examples showing A-Frame usage
|WebVR 1.1||Editor's Draft||Initial definition|
|Feature||Chrome||Edge||Firefox (Gecko)||Internet Explorer||Opera||Safari (WebKit)|
|Basic support||No support||(Yes)||55 (55)||No support||No support||No support|
|Feature||Android||Edge||Firefox Mobile (Gecko)||IE Phone||Opera Mobile||Safari Mobile||Chrome for Android||Samsung Internet for GearVR|
|Basic support||No support||No support||55.0 (55)||No support||No support||No support||(Yes)||(Yes)
 API Available on all platforms behind a flag, but currently only works on desktop in an experimental version of Chrome (other builds won't return any devices when
Navigator.getVRDisplays() is invoked).
 Currently only Windows support is enabled by default. Mac support is available in Firefox Nightly.
 Currently supported only by Google Daydream.
- A-Frame — Open source web framework for building VR experiences.
- MozVR team — Demos, and useful utilities.
- webvr.info — Up-to-date information about WebVR, browser setup, and community.
- MozVr.com — Demos, downloads, and other resources from the Mozilla VR team.
- threejs-vr-boilerplate — A useful starter template for writing WebVR apps into.