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 at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time. Deprecated compatibility table WebVR API is replaced by . WebVR was never ratified as a standard, was implemented and enabled by default in very few browsers and supported a small number of devices. Note: WebXR API 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. Concepts and usage Any VR devices attached to your computer will be returned by the method; each one will be represented by a object. Navigator.getVRDisplays() VRDisplay is the central interface in the WebVR API — via its properties and methods you can access functionality to: VRDisplay Retrieve useful information to allow us to identify the display, what capabilities it has, controllers associated with it, and more. Retrieve for each frame of content you you want to present in a display, and submit those frames for display at a consistent rate. frame data Start and stop presenting to the display. A typical (simple) WebVR app would work like so: is used to get a reference to your VR display. Navigator.getVRDisplays() is used to start presenting to the VR display. VRDisplay.requestPresent() WebVR's dedicated method is used to run the app's rendering loop at the correct refresh rate for the display. VRDisplay.requestAnimationFrame() Inside the rendering loop, you grab the data required to display the current frame ( ), 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.getFrameData() VRDisplay.submitFrame() In addition, WebVR 1.1 adds a number of events on the object to allow JavaScript to respond to changes to the status of the display. Window : You can find a lot more out about how the API works in our and articles. Note Using the WebVR API WebVR Concepts Many WebVR hardware setups feature controllers that go along with the headset. These can be used in WebVR apps via the , and specifically the that adds API features for accessing , , and more. Using controllers: Combining WebVR with the Gamepad API Gamepad API Gamepad Extensions API controller pose haptic actuators : Our article explains the basics of how to use VR controllers with WebVR apps. Note Using VR controllers with WebVR 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 — it's features can be used to perform VR device capability tests, for example can it return position information. VRDisplay VRDisplayEvent Represents the event object of WebVR-related events (see the listed below). window object extensions VRFrameData Represents all the information needed to render a single frame of a VR scene; constructed by . VRDisplay.getFrameData() 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. VRLayerInit 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. The WebVR API extends the following APIs, adding the listed features. Extensions to other interfaces Gamepad Gamepad.displayId Returns the of the associated — the VRDisplay that the gamepad is controlling the displayed scene of. VRDisplay.displayId VRDisplay Navigator Navigator.activeVRDisplays Returns an array containing every object that is currently presenting ( is ). VRDisplay VRDisplay.ispresenting true Navigator.getVRDisplays() Returns a promise that resolves to an array of objects representing any available VR displays connected to the computer. VRDisplay Window events Window.onvrdisplaypresentchange 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 event fires). vrdisplaypresentchange Window.onvrdisplayconnect Represents an event handler that will run when a compatible VR display has been connected to the computer (when the event fires). vrdisplayconnect Window.onvrdisplaydisconnect Represents an event handler that will run when a compatible VR display has been disconnected from the computer (when the event fires). vrdisplaydisconnect Window.onvrdisplayactivate Represents an event handler that will run when a display is able to be presented to (when the event fires), for example if an HMD has been moved to bring it out of standby, or woken up by being put on. vrdisplayactivate Window.onvrdisplaydeactivate Represents an event handler that will run when a display can no longer be presented to (when the event fires), for example if an HMD has gone into standby or sleep mode due to a period of inactivity. vrdisplaydeactivate Window.onvrdisplayblur 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 event fires) — for example, while the user is interacting with a system menu or browser, to prevent tracking or loss of experience. vrdisplayblur Window.onvrdisplayfocus Represents an event handler that will run when presentation to a display has resumed after being blurred (when the event fires). vrdisplayfocus Examples You can find a number of examples at these locations: — very simple examples to accompany the MDN WebVR documentation. webvr-tests — nice simple, well-commented examples that go along with Carmel, Facebook's WebVR browser. Carmel starter kit — slightly more in-depth examples plus source code WebVR.info samples — showcase examples WebVR.rocks Firefox demos — examples showing A-Frame usage A-Frame homepage Specifications Browser compatibility Navigator.getVRDisplays See also — The main Mozilla landing pad for WebVR, with demos, utilities, and other information. vr.mozilla.org — Open source web framework for building VR experiences. A-Frame — Up-to-date information about WebVR, browser setup, and community. webvr.info — A useful starter template for writing WebVR apps into. threejs-vr-boilerplate — JavaScript implementation of WebVR. Web VR polyfill — A pure WebVR browser to easily access the best WebVR content. Supermedium — List of quality WebVR sites. WebVR Directory Credits Source: https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API Published under licence Open CC Attribution ShareAlike 3.0

Facebook

Mozilla

Velocity

Web Fundamentals: WebVR API

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Quick Introduction to the Resize Observer API

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

The Noonification: Getting Your API Into Production (10/28/2022)

A Quick Introduction to the Resize Observer API

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

The Noonification: Getting Your API Into Production (10/28/2022)

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps