WebVR 可以讓穿戴的VR裝置 (如頭戴裝置 Oculus Rift 或 HTC Vive) 與 web 應用程式結合。開發人員可以將VR裝置所提供的位置與動作資訊轉移到3D的場景中。利用 WebVR可以創造出很多有趣的應用程式: 包含虛擬導覽、互動訓練軟體等等。


透過呼叫 Navigator.getVRDisplays() (en-US) 函數可以得到與電腦連接的VR裝置,每個裝置會回傳一個 VRDisplay (en-US) 物件

Sketch of a person in a chair with wearing goggles labelled "Head mounted display (HMD)" facing a monitor with a webcam labelled "Position sensor"

VRDisplay (en-US) 是 WebVR API 的核心,提供以下功能:

  • Retrieve useful information to allow us to identify the display, what capabilities it has, controllers associated with it, and more.
  • Retrieve frame data (en-US) for 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:

  1. 呼叫 Navigator.getVRDisplays() (en-US) 來取得 VR 顯示器的 reference。
  2. 呼叫 VRDisplay.requestPresent() (en-US) 來啟動 VR顯示器。
  3. WebVR's dedicated VRDisplay.requestAnimationFrame() (en-US) method is used to run the app's rendering loop at the correct refresh rate for the display.
  4. Inside the rendering loop, you grab the data required to display the current frame (VRDisplay.getFrameData() (en-US)), 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() (en-US)).

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.

Using controllers: Combining WebVR with the Gamepad API

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.

WebVR Interfaces

VRDisplay (en-US)
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 (en-US)
Describes the capabilities of a VRDisplay (en-US) — it's features can be used to perform VR device capability tests, for example can it return position information.
VRDisplayEvent (en-US)
Represents the event object of WebVR-related events (see the window object extensions listed below).
VRFrameData (en-US)
Represents all the information needed to render a single frame of a VR scene; constructed by VRDisplay.getFrameData() (en-US).
VRPose (en-US)
Represents the position state at a given timestamp (which includes orientation, position, velocity, and acceleration.)
VREyeParameters (en-US)
Provides access to all the information required to correctly render a scene for each given eye, including field of view information.
VRFieldOfView (en-US)
Represents a field of view defined by 4 different degree values describing the view from a center point.
VRLayerInit (en-US)
Represents a layer to be presented in a VRDisplay (en-US).
VRStageParameters (en-US)
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.


Gamepad.displayId (en-US) Read only
Returns the VRDisplay.displayId (en-US) of the associated VRDisplay (en-US) — the VRDisplay that the gamepad is controlling the displayed scene of.
Navigator.activeVRDisplays (en-US) Read only
Returns an array containing every VRDisplay (en-US) object that is currently presenting (VRDisplay.ispresenting (en-US) is true).
Navigator.getVRDisplays() (en-US)
Returns a promise that resolves to an array of VRDisplay (en-US) objects representing any available VR displays connected to the computer.

Window events

Window.onvrdisplaypresentchange (en-US)
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 vrdisplaypresentchange event fires).
Window.onvrdisplayconnect (en-US)
Represents an event handler that will run when a compatible VR display has been connected to the computer (when the vrdisplayconnect event fires).
Window.onvrdisplaydisconnect (en-US)
Represents an event handler that will run when a compatible VR display has been disconnected from the computer (when the vrdisplaydisconnect event fires).
Window.onvrdisplayactivate (en-US)
Represents an event handler that will run when a display is able to be presented to (when the vrdisplayactivate event fires), for example if an HMD has been moved to bring it out of standby, or woken up by being put on.
Window.onvrdisplaydeactivate (en-US)
Represents an event handler that will run when a display can no longer be presented to (when the vrdisplaydeactivate event fires), for example if an HMD has gone into standby or sleep mode due to a period of inactivity.

Unimplemented window events

The following events are listed in the spec, but do not currently seem to be implemented anywhere as yet.

Window.onvrdisplayblur (en-US)
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 vrdisplayblur event fires) — for example, while the user is interacting with a system menu or browser, to prevent tracking or loss of experience.
Window.onvrdisplayfocus (en-US)
Represents an event handler that will run when presentation to a display has resumed after being blurred (when the vrdisplayfocus 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

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support No support[1] (Yes) 55 (55)[2] No support No support No support
Gamepad extensions No support No support No support[4] 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)[3] (Yes)
Gamepad extensions No support No support No support[4] No support No support No support No support No support

[1] 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() (en-US) is invoked).

[2] Currently only Windows support is enabled by default. Mac support is available in Firefox Nightly.

[3] Currently supported only by Google Daydream.

[4] Enabled in Firefox Nightly and Beta, versions 55 and above. Enabled/disabled by the dom.gamepad-extensions.enabled pref.

See also

  • vr.mozilla.org — The main Mozilla landing pad for WebVR, with demos, utilities, and other information.
  • A-Frame — Open source web framework for building VR experiences.
  • 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.
  • Web VR polyfill — JavaScript implementation of WebVR.