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 {{domxref("Navigator.getVRDevices()")}} method. This returns an array of objects to represent the attached devices, which inherit from the general {{domxref("VRDevice")}} object — generally a head mounted display will have two devices — the head mounted display itself, represented by {{domxref("HMDVRDevice")}}, and a position sensor camera that keeps track of your head position, represented by {{domxref("PositionSensorVRDevice")}}.
The {{domxref("PositionSensorVRDevice")}} object contains the {{domxref("PositionSensorVRDevice.getState","getState()")}} method, which returns a {{domxref("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 {{domxref("HMDVRDevice.getEyeParameters()")}} method returns a {{domxref("VREyeParameters")}} object, which can be used to return field of view information — how much of the scene the head mounted display can see. The {{domxref("VREyeParameters.currentFieldOfView")}} returns a {{domxref("VRFieldOfView")}} object that contains 4 angles describing the current view from a center point. You can also change the field of view using {{domxref("HMDVRDevice.setFieldOfView()")}}.
Note: To find out more about using these interfaces in your own app, read Using the WebVR API. To learn more about the basic concepts behind VR, read WebVR concepts.
WebVR Interfaces
- {{domxref("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.
- {{domxref("VRPose")}}
- Represents the position state at a given timestamp (which includes orientation, position, velocity, and acceleration.)
- {{domxref("VREyeParameters")}}
- Provides access to all the information required to correctly render a scene for each given eye, including field of view information.
- {{domxref("VRFieldOfView")}}
- Represents a field of view defined by 4 different degree values describing the view from a center point.
- {{domxref("VRLayer")}}
- Represents a layer to be presented in a {{domxref("VRDisplay")}}.
Extensions to other interfaces
- {{domxref("Gamepad.displayId")}} {{readonlyInline}}
- Returns the {{domxref("VRDisplay.displayId")}} of the associated {{domxref("VRDisplay")}} — the
VRDisplay
that the gamepad is controlling the displayed scene of. - {{domxref("Navigator.activeVRDisplays")}} {{readonlyInline}}
- Returns an array containing every {{domxref("VRDisplay")}} object that is currently presenting ({{domxref("VRDisplay.ispresenting")}} is
true
). - {{domxref("Navigator.getVRDisplays()")}}
- Returns a promise that resolves to an array of {{domxref("VRDisplay")}} objects representing any available VR devices connected to the computer.
- {{domxref("Window.onvrdisplayconnected")}}
- Represents an event handler that will run when a compatible VR device has been connected to the computer (when the {{event("vrdisplayconnected")}} event fires).
- {{domxref("Window.onvrdisplaydisconnected")}}
- Represents an event handler that will run when a compatible VR device has been disconnected from the computer (when the {{event("vrdisplaydisconnected")}} event fires).
- {{domxref("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 {{event("onvrdisplaypresentchange")}} event fires).
Examples
You can find a number of examples at these Github repos:
- 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 |
---|---|---|
{{SpecName('WebVR')}} | {{Spec2('WebVR')}} | Initial definition |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|
Basic support | {{CompatNo}} | {{CompatVersionUnknown}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
See also
- WebVR environment setup
- WebVR concepts
- Using the WebVR API
- MozVr.com — demos, downloads, and other resources 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