WebVR API

WebVR provides support for exposing virtual reality devices — for example head-mounted displays like the Oculus Rift — 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 super immersive first person games.

Concepts and usage

Any VR devices attached to your computer will be returned by the Navigator.getVRDisplays() method. This returns an array of objects to represent the attached devices, which inherit from the general VRDevice object — generally a head mounted display will have two devices — the head mounted display itself, represented by HMDVRDevice, and a position sensor camera that keeps track of your head position, represented by PositionSensorVRDevice.

The PositionSensorVRDevice object contains the getState() method, which returns a VRPositionState object — this represents the sensor’s state at a given timestamp, and includes properties containing useful data such as current velocity, acceleration, and orientation, useful for updating the rendering of a scene on each frame according to the movement of the VR head mounted display.

The HMDVRDevice.getEyeParameters() method returns a VREyeParameters object, which can be used to return field of view information — how much of the scene the head mounted display can see. The VREyeParameters.currentFieldOfView returns a VRFieldOfView object that contains 4 angles describing the current view from a center point. You can also change the field of view using HMDVRDevice.setFieldOfView().

WebVR Interfaces

VRDisplay

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.

VRDisplayCapabilities

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.

VRPose

Represents the position state at a given timestamp (which includes orientation, position, velocity, and acceleration.)

VREyeParameters

Provides access to all the information required to correctly render a scene for each given eye, including field of view information.

VRFieldOfView

Represents a field of view defined by 4 different degree values describing the view from a center point.

VRLayer

Represents a layer to be presented in a VRDisplay.

VRStageParameters

Represents the values describing the the stage area for devices that support room-scale experiences.

Extensions to other interfaces

Gamepad.displayId Read only

Returns the VRDisplay.displayId of the associated VRDisplay — the VRDisplay that the gamepad is controlling the displayed scene of.

Navigator.activeVRDisplays Read only

Returns an array containing every VRDisplay object that is currently presenting (VRDisplay.ispresenting is true).

Navigator.getVRDisplays()

Returns a promise that resolves to an array of VRDisplay objects representing any available VR devices connected to the computer.

Window.onvrdisplayconnected

Represents an event handler that will run when a compatible VR device has been connected to the computer (when the vrdisplayconnected event fires).

Window.onvrdisplaydisconnected

Represents an event handler that will run when a compatible VR device has been disconnected from the computer (when the vrdisplaydisconnected event fires).

Window.onvrdisplaypresentchange

represents an event handler that will run when the presenting state of a VR device changes — i.e. goes from presenting to not presenting, or vice versa (when the onvrdisplaypresentchange event fires).

Examples

You can find a number of examples at these Github repos:

• A-Frame: Open source web framework for building VR experiences. Many examples.
• mdn/webvr-tests: Simple demos built to illiustrate basic feature usage.
• MozVR team: More advanced demos, the WebVR spec source, and more!

Specifications

Specification	Status	Comment
WebVR	Editor's Draft	Initial definition

Browser compatibility

See also

• webvr.info - Up-to-date information about WebVR, browser setup, and community.
• Is WebVR Ready? - Up-to-date information about WebVR browser support (including experimental builds).
• MozVr.com — demos, downloads, and other resources from the Mozilla VR team.
• A-Frame — a web framework for building VR experiences (with HTML), from the Mozilla VR team.
• Console Game on Web — a collection of interesting game concept demos, some of which include WebVR.
• threejs-vr-boilerplate — a very useful starter template for writing WebVR apps into.
• Oculus Rift homepage