We're looking for a person or people to help audit MDN to find places we could speed up. Is this you or someone you know? Check out the RFP: https://mzl.la/2IHcMiE



The WebVR API documentation is currently being updated to cover the v1.0 spec, therefore some of this information will be out of date. Contact chrisdavidmills if you have any questions about this work.

This article discusses some of the concepts and theory behind virtual reality (VR). If you are a newcomer to the area, it is worthwhile getting an understanding of these topics before you start diving into code.



The history of VR 关于VR的历史【K】

Virtual reality is nothing new — the concept goes way further back than the Oculus Rift Kickstarter campaign of 2012. People have been experimenting with it for decades.

虚拟现实(VR)并不是一件新生的事物:这个概念甚至能追溯到,比2012年Oculus Rift在Kickstarter campaig上发起众筹,还要更早的时候。人们已经持续研发这种技术长达数十年。



In 1939 the View-Master device was created, allowing people to see 3D pictures. The device displayed images stored on cardboard disks containing stereoscopic 3D pairs of small color photographs. After years of development the military got interested in using such technology, and Project Headsight was born in 1961 — this involved a helmet incorporating a video screen with a head-tracking system.

1939年View-Master device问世,它允许人们通过它观看3D成像的照片。这款设备播放的是,存储在圆盘硬纸板上的,成对的立体3D的彩色小照片。经过了许多年的研发,军方开始对使用这项技术产生了浓厚的兴趣,终于在1961年,名为HEADSIGHT的项目诞生了:它包含了一个连接头部追踪系统的显示屏的头盔。


There were various experiments conducted over the next few decades, but it wasn't resricted to science labs and battlefields anymore. Eventually pop culture took over with movie directors showing their visions of virtual reality. Movies like Tron (1982) and The Matrix (1999) were created, where people could transfer themselves into a whole new cyber world or were trapped in one without even knowing, accepting it as the real world.

在接下来的数十年中,出现了许多具有指导性作用的实验,但是它不再像从前那样只对科学实验室和战场开放。最终大众文化通过电影导演展现他们的视角,从而接过了虚拟现实的大旗。像【创:战纪 TRON: Legacy(1982)】 和【黑客帝国The Matrix (1999)】那样的电影被拍摄出来,在那里人们能够轻易的将自己置身于一个完全由信息构成的世界,又或者,接受让自己进入一个从未认识过的新世界,并且将它当做一个真实的存在。【K】

The first VR gaming attempts were big and expensive — in 1991 Virtuality Group created a VR-ready arcade machine with goggles and ported popular titles like Pac-Man to virtual reality. Sega introduced their VR glasses at the Consumer Electronics Show in 1993. Companies were experimenting, but the market and consumers weren't convinced — we had to wait until 2012 to see  real example of a successful VR project.

世界上第一次VR游戏的尝试是既大又昂贵的:1991年Virtuality Group制造了一款名为VR-ready的商业街机,其中装有护目镜,并且美其名曰 Pac-Man to virtual reality。随后,世嘉株式会社(SEGA)在1993的 Consumer Electronics Show上引进了他们的VR眼睛设备。当时的公司都在努力尝试,但是市场和消费者并不关注和买账:之后,我们再见到真正成功的VR项目,就要等到最近的2012年了。【K】




VR in recent times 最近的VR发展【K】

So what's new? Virtual Reality hardware needs to deliver high-precision, low-latency data to deliver an acceptable user experience; computers running VR applications need to be powerful enough to handle all this information. It has not been until recently that such accuracy and power has been available at an afforable cost, if at all. Early VR prototypes cost tens of thousands of dollars, whereas the latest Oculus Rift developer kit is available for $350, and cheaper solutions are available, such as mobile device-based solutions like Google Cardboard.

那么有什么值得我们期待的呢?VR硬件需要传输高精度的信息,在保证低延迟的情况下传递可接受的用户的体感信息;运行VR设备和程序的电脑,必需强大到足以维持这些庞大的信息。直到最近的这几年,如此高精度并且能量强大的设备,才能通过大众可以接受的价格被购买到。早期的VR原型设备,需要花费数万美元,然而最近出现的Oculus Rift developer kit却仅售350$, 并且还有更加便宜的解决方案,比如基于手机的VR设备像是Google Cardboard.【K】



By 2015, such VRDevices gained commercial support for VR technology. Sony are developing a VR hardware kit for the PS4 (codename Project Morpheus), Facebook bought Oculus Rift for $2 billion, Valve has created SteamVR software that works with HTC's Vive VR headset, and Google has launched a 2.0 version of its Cardboard  that supports up to 6 inch phones (it is also fully compatible with iOS devices because it has a piece of conductive foam that works as a tap over the screen.)

到了2015年,类似的VR设备吸引了大量的商业投资,进入到VR科技的研发中。SONY正在PS4中开发一项针对VR的硬件工具(编程代号 Project Morpheus), FACRBOOK花费20亿美元买下了 Oculus Rift, Valve开发了 SteamVR 软件系统,能够应用于HTC的Vive VR headset, 随后,谷歌发布了能够最多支持6英寸手机屏幕的CARDBOARD的2.0版本(它同时完全兼容了IOS的设备,因为在它屏幕的背后有一块传感海绵凸起作为触碰点。)


Samsung also launched a headset associated with Oculus called GearVR, which works by connecting its Note 4 and 6S devices. This however only works with native apps, so it is not very interesting for the specific area of WebVR.

三星公司同Oculus 合作,也推出了它的头戴设备GearVR, 这款设备可以连接旗下的NOTE4以及6S等手机。然而这款设备仅仅能够运行几款纯粹的APP应用,因而相对于WEBVR的特效领域而言,显得不是那么的有意思。【K】



The technology itself is here, and the more expensive headsets will only get cheaper over time so more people can experience virtual reality on their own in the future.




Input devices 传入设备【K】

Handling input for virtual reality applications is an interesting topic — it's a totally new experience for which dedicated user interfaces have to be designed. There are various approaches right now from classic keyboard and mouse, to new ones like Leap Motion. It's a matter of trial and error to see what works in given situations and what inputs fit best for your type of game.

针对虚拟显示应用的手持传入设备,是一个非常有意思的话题:这是一种全新的体验,从而必须要设计出沉浸式的用户界面来适应它。目前为止,在这方面,从传统的键盘鼠标,一直到LEAP MOTION这样的新兴设备,有多种多样的途径来实现它。只有通过【试错法】最终才能窥见,哪种方式最有利于创造情景以及哪种输入设备最适合于你所玩的游戏的类型。【K】


VR Hardware setup 创建VR设备的硬件环境【K】


There are two main types of setup, mobile or computer-connected. Their minimum hardware set ups are as follows:



  • Mobile: A Head-mounted display (HMD) is created using a smartphone — which acts as the VR display — mounted in a VR mount such as Google Cardboard, which contains the required lenses to provide stereoscopic vision of what is projected on the mobile screen.
  • 手机:通过使用一部智能手机可以营造一部头显设备(HMD)--扮演VR显示器的角色--安装在一个像谷歌CARDBOARD那样的VR框架中,其中包含了必需要有的透镜,用以提供投射在手机屏幕上的立体视觉效果。【K】Mobile based VR setup
  • Computer-connected: A VR setup is connected to your computer — this consists of a Head Mounted Display (HMD) containing a high resolution landscape-oriented screen onto which the visuals for both the left and right eye are displayed, which also includes a lens for each eye to promote separation of the left and right eye scene (stereoscopic vision.) The setup also includes a separate position sensor that works out the position/orientation/velocity/acceleration of your head and constantly passes that information the computer.
  • 电脑:将一部VR设备连接到你的电脑上--它是由一部包含了能分别为左眼和右眼显示图像的高分辨率全景镜头所组成的头显设备所组成,同时它还包含了两块分别为双眼配备的,可以提升左右眼图像分离(立体视觉)的透镜。这套设备还包含了一套分离式的感应设备,它能够测算出你的头部的位置/方向/速度/加速度等信息,并实时的把这些信息传输给计算机。【K】Computer based VR Setup

Note: Computer-connected systems sometimes don't include a position sensor, but they usually do.



Other hardware that complements the VR experience includes:  




  • A hand recognition sensor: A sensor that tracks the position and movement of your hand, allowing it to become an interesting controller, and an object in VR gameworlds. The most advanced to date is the Leap Motion, which works with the computer (connected to the Oculus Rift) and can also work connected to a mobile device (the latter is in an experimental phase.)
  • 手持传感识别器:一个可以追踪你的手部位置和运动的传感器,这使得它变成了一个非常有趣的控制器,以及一件存在于VR游戏世界种的物体。迄今为止,最先进的这类设备首属Leap Motion,它可以同电脑配合使用(同Oculus Rift设备连接) 并且同时还可以和手机兼容 (暂时处于实验阶段。)
  • A gamepad: We can configurate an XBox controller or similar to work as a keyboard in the browser — this offers further possibilities of interaction with a VR webpage. There are some gamepads that work with a mobile setup — like the MergeVR headset — but these are connected via Bluetooth so don't work with WebVR. 
  • (手机)游戏手柄:我们可以配置一套XBOX控制器或者类似的设备作为浏览器的键盘--这种方法提供了另一种同VR网页互动的形式。有一些游戏手柄更可以和手机协同使用--就像MergeVR headset--但是这些方法都是通过蓝牙连接设备的方法,并不能完全等同于和WEBVR结合。
  • An eye tracking sensor (experimental): The FOVE project is the first headset that reads subtle eye movements.
  • 眼部追踪传感器(实验产品):FOVE项目是第一个研究用于追踪和读取人眼运动设备的项目。
  • A facial expression tracker (experimental): Researchers at the University of Southern California and Facebook’s Oculus division have been testing new ways of tracking facial expressions and transferring them to a virtual character.
  • 面部表情追踪设备(实验产品):位于南加州大学和Facebook’s Oculus部门的研究人员,已经开始测试更多新的追踪人类面部表情并且能把他们转换成虚拟现实角色的方法。
  • A more complex positional sensor system: The SteamVR controller, combined with the Lighthouse tracking system aims to achieve an experience in which you can move through a space of 10x10 square feet in a VR world.
  • 更加复杂的位置传感系统:SteamVR控制器,结合了Lighthouse追踪系统,旨在实现帮助我们能在一个10x10 square feet的VR空间范围内自由活动的目的。

Position and orientation, velocity and acceleration 


As mentioned above, the position sensor detects information concerning the HMD and constantly outputs it, allowing you to continually update a scene according to head movement, rotation, etc. But what exactly is the information?



Position and Orientation VR setup

The output information falls into four categories:


  1. Position — The position of the HMD along three axes in a 3D coordinate space. x is to the left and right, y is up and down, and z is towards and away from the position sensor. In WebVR:

  2. Orientation — The rotation of the HMD around three axes in a 3D coordinate space. Pitch is rotation around the x axis, yaw is rotation around the y axis, and roll is rotation around the z axis. In WebVR:

  3. Velocity — There are two types of velocity to consider in VR:

    • Linear — The speed along any one of the axes that the HMD is traveling. This information can be accessed using VRPositionState.linearVelocity (x, y, and z.)

    • 线速度--HMD追踪的沿着三种轴向之一的速度。这类的信息可以被接收通过 VRPositionState.linearVelocity (x, y, and z.)
    • Angular — The speed at which the HMD is rotating around any one of the axes. This information can be accessed using VRPositionState.angularVelocity (x, y, and z.)

    • 角速度--就是HMD设备绕着三种轴向之一旋转的速度。这类的信息可以被接收通过VRPositionState.angularVelocity (x, y, and z.)
  4. Acceleration — There are two types of acceleration to consider in VR:


Field of view 视野【K】

The field of view (FOV) is the area that each of the user's eyes can reasonably be expected to see. It roughly takes the form of a pyramid shape, laid down on one side, with the apex inside the user's head, and the rest of the pyramid eminating from the user's eye. Each eye has it's own FOV, one slightly overlapping the other.


FOV related properties

The FOV is defined by the following values:


The default values for these properties will differ slightly by VR hardware, although they tend to be around 53° up and down, and 47° left and right, with zNear and zFar coming in at around 0.1m and 10000m respectively.


Different users will also require slightly different values for optimal viewing. It therefore makes sense to be able to calibrate these when a user starts using an app. You can detect the current value of these using the methods of the VREyeParameters interface, and set new values using the HMDVRDevice.setFieldOfView() method.

不同的使用者将会为了达成尽量完美的视觉体验,而要求略有不同的特性数值。因此,我们有理由在使用者开始使用一个APP之前,对这些特性进行测算。你可以使用VREyeParameters interface, and set new values using the HMDVRDevice.setFieldOfView() method.这个方法来侦测现行的特性值。

Note: The user can potentially see all the way around them, which is a brand new concept for apps and games. Try to give people a reason to look around and see what's behind them — make them reach out and find things that are not visible at the very beginning. Describe what's behind their backs.





Concepts for VR apps VR APP的概念【K】

This section discusses concepts to be aware of when developing VR apps that you've probably not had to consider before when developing regular apps for mobile or desktop.

这个部分讨论的是,从前在我们开发普通的APP和手机或者PC应用时,不必考虑的,但是在我们开发VR APP的时候必须被意识到的概念。




Stereoscopic vision【K】


Stereoscopic vision is the normal vision humans and (most) animals have — the perception of two slightly differing images (one from each eye) as a single image. This results in depth perception, helping us to see the world in glorious 3D. To recreate this in VR apps, you need to render two very slightly different views side by side, which will be taken in by the left and right eyes when the user is using the HMD.



How to create stereoscopic 3D images

Head tracking 头部追踪【K】

The primary technology used to make you feel present in a 360º scene, thanks to the gyroscope, accelerometer, and magnetometer (compass) included in the HMD.

It has primary relevance because it makes our eyes believe we are in front of a spherical screen, giving users realistic immersion inside the app canvas.


Eye strain【K】眼部拉伤

A term commonly used in VR because it is a major handicap of using an HMD — we are constantly fooling the eye with what we are showing in the app canvas, and this leads to the eyes doing a lot more work than they normally would, so using VR apps for any extended period of time can lead to eye strain.

这是一个通常使用在VR中的术语,因为这也是使用HMD设备的一个副作用--我们的视线历来会追踪我们在APP画布中被展示的内容,然而这将导致我们的眼睛超负荷的工作,因此假如我们使用VR APP时,有任何超时的行为,都有可能导致眼部的拉伤。


To minimize this unwanted effect, we need to:


  • Avoid focusing on different depths (e.g. avoid using a lot of particles with differents depths.)
  • 避免聚焦不同的深度(也就是要避免使用大量的具有不同深度特性的颗粒)
  • Avoid eye convergion (e.g. if you have an object that comes towards the camera your eyes will follow and converge on it.)
  • 避免长期的视线集中(如果有一个物体朝着摄像机移动过来,你的眼睛将会跟随和聚焦在它之上)
  • Use darker backgrounds with more subdued colors where possible; a bright screen will make the eyes more tired.
  • 尽量使用带有舒缓颜色的深色背景;假如屏幕太亮会增加眼睛的负担。
  • Avoid rapid brightness changes.
  • 避免迅速的视线的改变。
  • Avoid presenting the user with large amounts of text to read. You should also be careful with the distance between the eyes/camera and the text to read. 0.5m is uncomfortable, whereas at more than 2m the stereo effect starts to break down, so somewhere in between is advisable.
  • 避免给使用者展现大量的文本内容。你应该非常注意眼睛/摄像机同文本之间的距离。0.5m太近了,然而假如超过2m的话,那么立体的效果将会崩溃,所以在0.5--2之间的距离是合适的。
  • Be careful with the distance between objects and the camera in general. Oculus recommends 0.75m as a minimum distance of focus.
  • 注意设定物体到摄像机之间的一般距离。OCULUS建议的最小距离是0.75m。
  • Use a pointer if the user needs to interact with an object in the scene — this will help them point to it correctly with less effort.

In general, the path of least visual effort will give the user a less tiring experience.

  • 如果使用者需要和场景中的物体进行互动,那么尽量使用一个指针--这将帮助他们精准和更加容易的指向那个物体。一般情况下,最少的视觉上的动作能提供给使用者最轻松的体验。

Motion sickness 晕动病【K】

If developers do not take utmost care, VR apps can actually cause their users to feel sick. This effect is produced when the stimuli their eyes are receiving is not what the body expects to receive.

如果开发者没有非常注意的话,VR APP将会很有可能引起它的使用者的反感。这种反应的产生是因为我们的眼睛受到了,我们的身体并不准备接收的刺激。

To avoid bringing on motion sickness in our users (or at least minimize the effects), we need to:


  • Always maintain head tracking (this is the most important of all, especially if it occurs in middle of the experience.)
  • 总是保证头部的追踪(这是最重要的,特别是在体验过程中头部移动的时候)
  • Use constant velocity; avoid acceleration or decceleration camera movements (use linear acceleration, and avoid vs easing if you can.)
  • 使用稳定的速率;避免摄像机的加速和减速运动(使用线性加速度,同时假如有可能避免VS EASING)
  • Keep the framerate up (less than 30fps is uncomfortable.)
  • 尽量提高帧速率(低于30FPS是不舒适的体验)
  • Avoid sharp and/or unexpected camera rotations.
  • 避免尖锐的或者突然的摄像机的转动。
  • Add fixed points of reference for fixed objects (otherwise the user will believe they are on the move.)
  • 为固定位置的物体添加固定的参照物(否者使用者会误认为他们在移动)
  • Do not use Depth of Field or Motion Blur post processing because you do not know where the eyes will focus.
  • 不要使用景深视角和动态模糊的后期处理,因为你不知道使用者的视线会聚焦在哪里。
  • Avoid brightness changes (use low frecuency textures or fog effects to create smooth lighting transitions).Overall your eyes should not send signals to the brain that cause reflex actions in other parts of the body.
  • 避免光线突然的改变(使用低频率的质感或者迷雾效果来制造光线的平滑的转变效果)。总之,就是要使你的眼睛尽量不要传输那种会引起你身体其他部位强烈反应的信号。【这是为什么呢?VR不就是为了制造特效,求刺激么,为什么要有这么多的限制。求解释。】

Latency 延迟【K】

Latency is the time between the physical head movement and the visual display reaching the user's eyes from the screen of an HMD being updated. This is one of the most critical factors in providing a realistic experience. Humans can detect very small delays — we need to keep the latency below 20 milliseconds if they are to be imperceptible (for example a 60Hz monitor has a 16 ms response.)


The Oculus Rift headset has a letency of 20 ms or less, but woth mobile device-based setups it will depend heavily on the smartphone CPU power and other capabilities. 

Oculus Rift headset的延迟在20ms甚至比这更低,但是目前这都非常依赖于智能手机的CPU性能和其他性能。

Framerate ( Frames per second / FPS ) 帧率【K】

Based on the Wikipedia definition, framerate is the frequency at which an imaging device produces unique consecutive images, called frames. A rate of 60fps is an acceptable rate for a smooth user experience, but depending on the performance of the machine the app is running on, or the complexity of the content you want to show, it can drastically lower. Less than 30fps is generally considered juddery, and annoying to the user.、


One of the most difficult tasks is to maintain a constant and high framerate value, so we must optimize our code to make it as efficient as possible. It is preferable to have a decent framerate that doesn't constantly or suddenly change; for this you need to as few necessary objects moving into the scene as possible and (in the case of WebGL) try to reduce draw calls. 

最困难的任务之一就是保持一个稳定的和高帧率的值,所以我们必须优化代码从而使它发挥最大的功效。假如能够有一个合适的帧率并且不会规律的或者突然的改变,那将会是非常好的体验;因此你需要在一个场景中设置尽量少的物体(例如在WEBGL中)并且减小DRAW CALLS的值。

Interpupillary distance ( IPD ) 瞳孔间距【K】

Based on the Wikipedia definition, IPD is the distance between the centers of the pupils of the two eyes. IPD is critical for the design of binocular viewing systems, where both eye pupils need to be positioned within the exit pupils of the viewing system.


Interpupillary distace ( IPD ) is represented by VREyeParameters.eyeTranslation in WebVR.

瞳孔间距(IPD)可用 VREyeParameters.eyeTranslation 来表示.

This value is returned by the HMD and its value may be around 60 to 70 mm; in the case of some HMDs like Oculus Rift's, you can set your own IPD. Normally we don't change this value but you can play with it to change the scale of the entire scene. For example, if your IPD is set to 6000 mm, the user would view the scene like a giant looking at a Lilliputian world.

这个值是通过HMD来返回的并且它的值一般在60-70mm之间;在像是Oculus Rift这样的HMD设备中,你可以设置你自己的IPD。一般我们不会去改变这个值,但是你可以通过有意的改变它从而改变你所身处的整个场景。例如,如果你将IPD调整到6000mm,使用者将会看到一个好像巨人身处小人国中一样的世界。

Degrees of Freedom ( DoF ) 自由度【K】

DoF refers to the movement of a rigid body inside space. There is no uniformity in creating acronyms for this term — we can find references to 3DoF in the context of sensors that detect only rotational head tracking, and 6DoF when an input allows us to control position and orientation simultaneously. We even sometimes find 9DoF references when the hardware contains three sensors like gyroscope, accelerometer and magnetometer, but the results of the 3 x 3DoF values will actually return a 6 degrees of freedom tracking.

DOF指向的是空间中固态物体移动的自由度。并没有一个统一的对这个专业术语的缩写--我们可以找到,在关于侦测头部转动的传感器的那篇文章中的3DOF的参考,还有当一个传入设备允许我们同时控制位置和方位信息时的6DOF。我们有时候甚至会看到9DOF的案例,那就是当硬件中包含了三个感应装置时,如陀螺仪、加速计和磁力计,但是3 x 3DoF的值的接过实际上返回的,还是一个6纬的自由度跟踪结果。

DoF is directly related to the tracking of the user's head movement.


Cone of focus 锥形焦点【K】

Although our field of view is much larger (approximately 180º), we need to be aware that only in a small portion of that field can you perceive symbols (the center 60º) or read text (the center 10º). If you do not have an eye tracking sensor we assume that the center of the screen is where the user is focusing their eyes.


This limitation is important to consider when deciding where place visuals on the app canvas — too far towards the edge of the cone of focus can lead to eye strain much ore quickly. There is a very interesting post about this (amongst other things) at MozVR.com — see Quick VR Mockups with Illustrator.

这样的限制对于在考虑如何在APP画布上设置视角的时候,是非常重要的--假如太过于远离锥形焦点的边缘,就可能更快更容易的导致眼部的拉伤。想要阅读MozVR.com 上的关于这个问题的有意思的文章(还包含其他内容)--请点击Quick VR Mockups with Illustrator.

3D Positional Audio 3D定位音效【K】【如ECHO回声APP】

3D positional audio refers to a group of effects that manipulate audio to simulate how it would sound in a three dimensional space.


This directly related to the Web Audio API, which allows us to place sounds on objects we have in the canvas or launch audio depending on the part of the scene the user is traveling towards or looking at.

这项技术直接关系到Web Audio API,它可以让我们将一段声音附加到,一个我们在VANVAS中或者launch audio中的物体上,并且基于一个用户在其中可以移动或者观看的场景的一部分。


 此页面的贡献者: chrisdavidmills, arthas-cui, Mr-walter-wang
 最后编辑者: arthas-cui,