Sample pages demonstrating how to use various aspects of the WebVR API.
WebVR has been replaced by the WebXR Device API, which has wider support, more features, better performance, and supports both VR and AR. This page is preserved as a historical reference, but the information on it is no longer relevant. For more relevant resources, see the WebXR Samples instead!
Our mission is to keep the Internet open to innovators, creators, and builders on the Web. Virtual Reality is set to change the future of Web interaction. The ability for anyone to access and enjoy VR experiences is critical. This is why Mozilla set out to bring virtual reality to Web browsers, and why we are enabling WebVR in Firefox. Alain, this is definitely not a general problem, WebVR on Oculus Rift with Firefox 61.0.2 works fine for me. The two biggest gotchas are: - Make sure you are running the 64 bit version of Firefox - If you are on a laptop with a discrete graphics card, make absolutely sure Firefox is configured to use it.
These samples use the WebVR API but do not display anything in the headset.
These samples use the WebVR API to display imagery in the headset.
These samples are not yet complete and may not accurately portray the API's usage.
These pages help stress browser conformance.
This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
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, interesting applications, from virtual product tours and interactive training apps to immersive first-person games.

Any VR devices attached to your computer will be returned by the Navigator.getVRDisplays() method; each one will be represented by a VRDisplay object.


VRDisplay is the central interface in the WebVR API — via its properties and methods you can access functionality to:

frame data for each frame of content you want to present in a display, and submit those frames for display at a consistent rate.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.VRDisplay.requestAnimationFrame() method is used to run the app's rendering loop at the correct refresh rate for the display.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 (VRDisplay.submitFrame()).In addition, WebVR 1.1 adds a number of events on the Window object to allow JavaScript to respond to changes to the status of the display.
Note: You can find a lot more out about how the API works in our Using the WebVR API and WebVR Concepts articles.
The WebVR API, which was never ratified as a web standard, has been deprecated in favor of the WebXR API, which is well on track toward finishing the standardization process. As such, you should try to update existing code to use the newer API instead. Generally the transition should be fairly painless.
Additionally, on some devices and/or browsers, WebVR requires that the page be loaded using a secure context, over an HTTPS connection. If the page is not fully secure, the WebVR methods and functions will not be available. You can easily test for this by checking to see if the Navigator method getVRDisplays() is NULL:
Many WebVR hardware setups feature controllers that go along with the headset. These can be used in WebVR apps via the Gamepad API, and specifically the Gamepad Extensions API that adds API features for accessing controller pose, haptic actuators, and more.
Note: Our Using VR controllers with WebVR article explains the basics of how to use VR controllers with WebVR apps.
VRDisplayVRDisplayCapabilitiesVRDisplay — it's features can be used to perform VR device capability tests, for example can it return position information.VRDisplayEventVRFrameDataVRDisplay.getFrameData().VRPoseVREyeParametersVRFieldOfViewVRLayerInitVRDisplay.VRStageParametersThe WebVR API extends the following APIs, adding the listed features.
Gamepad.displayIdRead only VRDisplay.displayId of the associated VRDisplay — the VRDisplay that the gamepad is controlling the displayed scene of.Navigator.activeVRDisplaysRead only VRDisplay object that is currently presenting (VRDisplay.ispresenting is true).Navigator.getVRDisplays()VRDisplay objects representing any available VR displays connected to the computer.
Window.onvrdisplaypresentchangevrdisplaypresentchange event fires).Window.onvrdisplayconnectvrdisplayconnect event fires).Window.onvrdisplaydisconnectvrdisplaydisconnect event fires).Window.onvrdisplayactivatevrdisplayactivate event fires), for example if an HMD has been moved to bring it out of standby, or woken up by being put on.Window.onvrdisplaydeactivatevrdisplaydeactivate event fires), for example if an HMD has gone into standby or sleep mode due to a period of inactivity.Window.onvrdisplayblurvrdisplayblur event fires) — for example, while the user is interacting with a system menu or browser, to prevent tracking or loss of experience.Window.onvrdisplayfocusvrdisplayfocus event fires).You can find a number of examples at these locations:
| Specification | Status | Comment |
|---|---|---|
| Gamepad Extensions | Editor's Draft | Defines the Experimental Gamepad extensions. |
| WebVR 1.1 | Draft | Initial definition. |
BCD tables only load in the browser
