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.

WebVR为虚拟现实设备显示提供支持 — 例如Oculus Rift这样的头戴设备到web apps的连接， 允许开发者将位置和动作信息转换成3D场景中的运动。这项技术会有很多有趣的应用, 比如虚拟的产品展示，可交互的培训课程以及超强沉浸感的第一人称游戏。

Concepts and usage 概念及使用方法

【K】

Any VR devices attached to your computer will be returned by the Navigator.getVRDevices() 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.

连接到电脑的所有VR设备都将由 Navigator.getVRDevices() 方法返回。 这个方法将返回一个包含了所有已连接设备的对象数组，每个设备对应一个对象， 该对象继承自 VRDevice  — 通常一个头显将包含两个设备 — 头显自身由 HMDVRDevice 表示， 和一个跟踪头部位置的位置捕捉传感器，由 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.

PositionSensorVRDevice 对象有一个 getState() 方法, 该方法返回一个VRPositionState 对象 — 这个对象代表位置传感器在指定时刻的状态，包含了一些十分有用的信息，例如速度、加速度以及运动方向，可用于根据头部运动刷新画面显示。

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().

HMDVRDevice.getEyeParameters() 方法返回一个 VREyeParameters 对象, 可用于获取显示区域的信息 — 头显可以看到多少画面。 VREyeParameters.currentFieldOfView 返回一个 VRFieldOfView 对象 ，该对象包含了4个角度信息来描述当前的显示区域. 你可以用 HMDVRDevice.setFieldOfView() 来改变当前的显示区域。

WebVR Interfaces 接口

Navigator.getVRDevices

Returns a promise that resolves to an array of objects representing the VR devices attached to the computer.
返回一个Promise对象，并通过resolve方式返回参数，参数为链接到电脑的VR设备数组。

VRDevice

A generic VR device, includes information such as device IDs and descriptions. Inherited by HMDVRDevice and PositionSensorVRDevice.
返回一个包括了VR设备IDs，描述等信息的类。HMDVRDevice 和 PositionSensorVRDevice 继承了 VRDevice。

HMDVRDevice

Represents a head mounted display, providing access to information about each eye, and the current field of view.
头戴设备。提供设备双眼、当前FOV（field of view）信息。

PositionSensorVRDevice

Represents the position sensor for the VR hardware, allowing access to information such as position and orientation.
VR设备的位置传感器。获取位置、方向信息。

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.
给双眼提供正确渲染场景的所有信息，包括FOV。

VRFieldOfView

Represents a field of view defined by 4 different degree values describing the view from a center point.
返回以视窗的中心点为基点的，表示FOV的4个角度值（downDegrees, leftDegrees, rightDegrees, upDegrees）。

VRFieldOfViewReadOnly

Contains the raw definition for the degree value properties required to define a field of view. Inherited by VRFieldOfView.
定义一个FOV必须的角度属性。VRFieldOfView 继承了 VRFieldOfViewReadOnly。

Examples 案例

【K】

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

你可以在Github的协议中找到一系列的案例：

• mdn/webvr-tests: Simple demos built to illiustrate basic feature usage.
• mdn/webvr-tests: 简单构建的demos用于阐明基本的使用方法。
•  
• MozVR team: More advanced demos, the WebVR spec source, and more!
• MozVR team: 更多复杂的demos,关于WebVR特别的资源，以及更多的内容！
• 【K】

Specifications 说明书

【K】

【K】

Browser compatibility 浏览器兼容性

【K】

• [1] The support in Chrome is currently experimental. To find information on Chrome's WebVR implementation status including supporting builds, check out Bringing VR to Chrome by Brandon Jones.
• [1]在谷歌浏览器中的支持目前尚处于实验阶段。要查找谷歌WebVR的执行状况的相关信息，包括相关技术支持的建设情况，请查看将VR带进Chrome 作者：Brandon Jones.
•  
• [2] The support for this feature is currently disabled by default in Firefox. To enable WebVR support in Firefox Nightly/Developer Edition, you can go to about:config and enable the dom.vr* prefs. A better option however is to install the WebVR Enabler Add-on, which does this for you and sets up other necessary parts of the environment.
• [2] 这项功能的技术支持，目前在火狐的浏览器中并不能被执行。要想使用火狐浏览器Nightly/开发者版本中WebVR的相关功能，你可以选择：配置并提升dom.vr* prefs的优先级. 另一个更好的选择是安装WebVR Enabler Add-on, 它能代替你完成这些工作并建立其他运行环境中必需的部分environment.
• [3] The dom.vr* prefs are enabled by default at this point, in Nightly/Aurora editions.
• [3] The dom.vr* prefs 在Nightly/Aurora的版本中，目前并不能被执行。

See also 相关文章

【K】

• WebVR environment setup
• 建立WEBVR的运行环境。
• WebVR concepts
• WEBVR 的相关概念。
• Using the WebVR API
• 怎样使用WEBVR API。
• MozVr.com — demos, downloads, and other resources from the Mozilla VR team.
• MozVr.com — demos，下载，以及其他的来自MOZILLA VR团队的资源。
• Console Game on Web — a collection of interesting game concept demos, some of which include WebVR.
• Console Game on Web — 一系列有趣的概念游戏DEMO的收集，其中有些包括了WEBVR。
• threejs-vr-boilerplate — a very useful starter template for writing WebVR apps into.
• threejs-vr-boilerplate — 一个当你编写WEBVR APP时，非常有用的用于开始编程的模板。
• Oculus Rift homepage   
• Oculus Rift 主页

Methods and properties list

• VRDevice.hardwareUnitId
• VRDevice.resetPose()
• VRDisplay.cancelAnimationFrame()
• VRDisplay.capabilities
• VRDisplay.depthFar
• VRDisplay.depthNear
• VRDisplay.displayId
• VRDisplay.displayName
• VRDisplay.exitPresent()
• VRDisplay.getEyeParameters()
• VRDisplay.getImmediatePose()
• VRDisplay.getLayers()
• VRDisplay.getPose()
• VRDisplay.isPresenting
• VRDisplay.requestAnimationFrame()
• VRDisplay.requestPresent()
• VRDisplay.stageParameters
• VRDisplay.submitFrame()
• VRDisplayCapabilities.canPresent
• VRDisplayCapabilities.hasExternalDisplay
• VRDisplayCapabilities.hasOrientation
• VRDisplayCapabilities.hasPosition
• VRDisplayCapabilities.maxLayers
• VREyeParameters.fieldOfView
• VREyeParameters.maximumFieldOfView
• VREyeParameters.minimumFieldOfView
• VREyeParameters.offset
• VREyeParameters.recommendedFieldOfView
• VREyeParameters.renderHeight
• VREyeParameters.renderRect
• VREyeParameters.renderWidth
• VRFieldOfView.VRFieldOfView()
• VRFieldOfView.downDegrees
• VRFieldOfView.leftDegrees
• VRFieldOfView.rightDegrees
• VRFieldOfView.upDegrees
• VRPose.angularAcceleration
• VRPose.angularVelocity
• VRPose.hasOrientation
• VRPose.hasPosition
• VRPose.linearAcceleration
• VRPose.linearVelocity
• VRPose.orientation
• VRPose.position
• VRPose.timestamp
• VRStageParameters.sittingToStandingTransform
• VRStageParameters.sizeX
• VRStageParameters.sizeY
• VRdisplay.isConnected
• Gamepad.displayId
• Navigator.activeVRDisplays
• Navigator.getVRDisplays()