WebVR 概念

已弃用：不再推荐使用此功能。尽管某些浏览器可能仍然支持它，但它可能已从相关的 Web 标准中删除，可能正在被弃用，或者可能仅出于兼容性目的而保留。请避免使用它，并尽可能更新现有代码；请参阅此页面底部的兼容性表以指导您的决策。请注意，此功能可能随时停止工作。

注意：WebVR API 已被 WebXR API 替换。WebVR 从未被批准为标准，在极少数浏览器中默认实现并启用，并且支持少量设备。

本文讨论了虚拟现实 (VR) 背后的一些概念和理论。如果您是该领域的新手，在开始深入研究代码之前，了解这些主题是很有价值的。

VR 的历史

虚拟现实并非新鲜事物——这个概念可以追溯到 2012 年 Oculus Rift 的 Kickstarter 活动之前。人们已经对此进行了数十年的实验。

1939 年，View-Master 设备诞生，让人们能够看到 3D 图像。该设备显示存储在纸板光盘上的图像，这些光盘包含立体 3D 对的小彩色照片。经过多年的开发，军方开始对使用此类技术感兴趣，并在 1961 年诞生了 Headsight 项目——这涉及一个包含视频屏幕和头部跟踪系统的头盔。

在接下来的几十年里，进行了各种实验，但它不再局限于科学实验室和战场。最终，流行文化接管了电影导演展示他们对虚拟现实的愿景。创作了《电子世界争霸战》（1982 年）和《黑客帝国》（1999 年）等电影，人们可以在其中将自己转移到一个全新的网络世界，或者被困在一个世界中，甚至都不知道，将其视为真实世界。

第一次 VR 游戏尝试规模庞大且昂贵——1991 年，Virtuality Group 创建了一台 VR 准备就绪的街机，配备护目镜，并将 Pac-Man 等热门游戏移植到虚拟现实中。世嘉在 1993 年的消费电子展上推出了他们的 VR 眼镜。公司一直在尝试，但市场和消费者并不信服——我们不得不等到 2012 年才能看到一个成功的 VR 项目的真实例子。

那么有什么新东西呢？虚拟现实硬件需要提供高精度、低延迟的数据才能提供可接受的用户体验；运行 VR 应用程序的计算机需要足够强大才能处理所有这些信息。直到最近，这种精度和能力才以可承受的价格提供，即使是这种情况也是如此。早期的 VR 原型成本高达数万美元，而最近的头显（如 HTC VIVE 和 Meta Quest）的价格仅为数百美元，并且还有更便宜的解决方案——基于移动设备的解决方案，如 Google Cardboard。

在软件方面，Valve 创建了 SteamVR 软件，该软件与 VIVE 和其他解决方案兼容，并用于提供对软件的访问，例如可用的 VR UI。

技术本身已经存在，并且更昂贵头显的价格只会随着时间的推移而下降，因此将来更多的人可以在未来自己体验虚拟现实。

输入设备

处理虚拟现实应用程序的输入是一个有趣的话题——这是一种全新的体验，必须为此设计专用的用户界面。目前有各种方法，从经典的键盘和鼠标到 Leap Motion 和 VIVE 控制器等新方法。需要反复试验才能了解在特定情况下哪些有效以及哪些输入最适合您的游戏类型。

VR 硬件设置

主要有两种设置类型：移动式或连接电脑式。它们的最低硬件设置如下

移动式：使用智能手机（充当 VR 显示器）创建头戴式显示器 (HMD)——安装在 Google Cardboard 等 VR 支架中，该支架包含必要的透镜以提供对投影在手机屏幕上的内容的立体视觉。
连接电脑式：VR 设置连接到您的计算机——这包括一个头戴式显示器 (HMD)，其中包含一个高分辨率横向屏幕，用于显示左右眼的视觉效果，还包括每个眼睛的透镜以促进左右眼场景的分离（立体视觉）。该设置还包括一个单独的位置传感器，用于计算您头部的位置/方向/速度/加速度，并不断将该信息传递给计算机。

注意：连接电脑的系统有时不包括位置传感器，但通常会包括。

补充 VR 体验的其他硬件包括

手部识别传感器：跟踪您手部位置和移动的传感器，使其成为有趣的控制器，以及 VR 游戏世界中的对象。迄今为止最先进的是 Leap Motion，它可与计算机（连接到 Oculus Rift）配合使用，也可与移动设备连接（后者处于实验阶段）。
游戏手柄：我们可以配置 XBox 控制器或类似设备在浏览器中充当键盘——这提供了更多与 VR 网页交互的可能性。有一些游戏手柄可与移动设置配合使用，但这些手柄通过蓝牙连接，因此无法与 WebVR 配合使用。
眼动追踪传感器（实验性）：FOVE 项目是第一个读取细微眼球运动的头显。
面部表情跟踪器（实验性）：南加州大学和 Facebook 的 Oculus 部门的研究人员一直在测试跟踪面部表情并将其转移到虚拟角色的新方法。
更复杂的位置传感器系统：例如，HTC VIVE 配备了两个位于空间相对角的位置传感器，将所有内容都映射出来，并允许在长达 5m x 5m 的空间中享受 VR 体验。

位置和方向、速度和加速度

如上所述，位置传感器检测有关头显的信息并持续输出，允许您根据头部移动、旋转等不断更新场景。但这些信息究竟是什么呢？

Position and Orientation VR setup

输出信息可分为四类

位置 — 头显在 3D 坐标空间中沿三个轴线的位置。x 轴代表左右方向，y 轴代表上下方向，z 轴代表靠近和远离位置传感器方向。在 WebVR 中，x、y 和 z 坐标由 VRPose.position 中包含的数组表示。
方向 — 头显在 3D 坐标空间中绕三个轴线旋转的方向。俯仰角是绕 x 轴旋转，偏航角是绕 y 轴旋转，滚转角是绕 z 轴旋转。在 WebVR 中，俯仰角、偏航角和滚转角由 VRPose.orientation 中包含的数组的前三个元素表示。
速度 — VR 中需要考虑两种类型的速度
- 线性速度 — 头显沿任意一个轴线移动的速度。可以使用 VRPose.linearVelocity 访问此信息。
- 角速度 — 头显绕任意一个轴线旋转的速度。可以使用 VRPose.angularVelocity 访问此信息。
加速度 — VR 中需要考虑两种类型的加速度
- 线性加速度 — 头显沿任意一个轴线移动的加速度。可以使用 VRPose.linearAcceleration 访问此信息。
- 角加速度 — 头显绕任意一个轴线旋转的加速度。可以使用 VRPose.angularAcceleration 访问此信息。

视野

视野 (FOV) 是用户每只眼睛可以合理预期看到的区域。它大致呈金字塔形，平放在一侧，顶点位于用户头部内部，其余部分从用户眼睛发出。每只眼睛都有自己的 FOV，两者略微重叠。

FOV related properties

FOV 由以下值定义

VRFieldOfView.upDegrees：视野向上延伸的度数。
VRFieldOfView.rightDegrees：视野向右延伸的度数。
VRFieldOfView.downDegrees：视野向下延伸的度数。
VRFieldOfView.leftDegrees：视野向左延伸的度数。
zNear，由 VRDisplay.depthNear 定义：从用户头部中间到可见 FOV 开始的距离。
zFar，由 VRDisplay.depthFar 定义：从用户头部中间到可见 FOV 结束的距离。

这些属性的默认值会因 VR 硬件而略有不同，但它们通常在上下 53°、左右 47° 左右，zNear 和 zFar 分别约为 0.1 米和 10000 米。

注意：用户可能可以看到他们周围的所有东西，这对应用程序和游戏来说是一个全新的概念。尝试让人们有理由环顾四周，看看他们身后有什么——让他们伸出手去寻找一开始看不到的东西。描述他们背后的内容。

VR 应用的概念

本节讨论在开发 VR 应用程序时需要注意的概念，这些概念在之前开发移动或桌面应用程序时可能从未考虑过。

立体视觉

立体视觉是人类和（大多数）动物的正常视觉——将两只眼睛看到的略微不同的两幅图像（每只眼睛一幅）感知为一幅图像。这导致了深度感知，帮助我们以 3D 的方式看到世界。为了在 VR 应用程序中重现这一点，您需要并排渲染两个非常略微不同的视图，当用户使用头显时，左眼和右眼会分别接收这两个视图。

How to create stereoscopic 3D images

头部追踪

这项主要技术利用头显中包含的陀螺仪、加速度计和磁力计（指南针）让您感觉置身于 360° 场景中。它具有主要的相关性，因为它使我们的眼睛相信我们位于球形屏幕的前面，从而使用户在应用程序画布内获得逼真的沉浸感。

眼睛疲劳

在 VR 中常用的一个术语，因为它是在使用头显时的一个主要障碍——我们不断用我们在应用程序画布中显示的内容欺骗眼睛，这会导致眼睛比平时工作更多，因此长时间使用 VR 应用程序会导致眼睛疲劳。

为了最大程度地减少这种不希望出现的效果，我们需要

避免聚焦于不同的深度（例如，避免使用许多具有不同深度的粒子）。
避免眼睛辐合（例如，如果您有一个向相机移动的物体，您的眼睛会跟随并汇聚到它上面）。
尽可能使用较暗的背景和更柔和的颜色；明亮的屏幕会让眼睛更容易疲劳。
避免快速亮度变化。
避免向用户呈现大量需要阅读的文本。您还应该注意眼睛/相机与要阅读的文本之间的距离。0.5 米会让人感到不舒服，而超过 2 米，立体效果开始失效，因此建议选择介于两者之间的距离。
注意物体与相机之间的距离。Oculus 建议将最小聚焦距离设置为 0.75 米。
如果用户需要与场景中的物体进行交互，请使用指针——这将帮助他们更容易地正确指向它。

总的来说，视觉工作量最小的路径将为用户提供更轻松的体验。

晕动症

如果开发人员没有格外小心，VR 应用程序实际上会导致用户感到恶心。当他们眼睛接收到的刺激与身体预期接收到的刺激不符时，就会产生这种效果。

为了避免让我们的用户产生晕动症（或至少将影响降到最低），我们需要

始终保持头部追踪（这是最重要的，尤其是在体验过程中间发生时）。
使用恒定速度；避免相机加速或减速运动（使用线性加速度，如果可以，避免缓动）。
保持帧速率（低于 30fps 会让人感到不舒服）。
避免突然和/或意外的相机旋转。
为固定物体添加固定参考点（否则用户会认为他们在移动）。
不要使用景深或运动模糊后期处理，因为您不知道眼睛的焦点在哪里。
避免亮度变化（使用低频纹理或雾效来创建平滑的灯光过渡）。

总的来说，您的眼睛不应向大脑发送导致身体其他部位产生反射动作的信号。

延迟

延迟是指物理头部运动与头显屏幕上更新的视觉显示到达用户眼睛之间的时间。这是提供逼真体验的最关键因素之一。人类可以检测到非常小的延迟——如果要让它们无法察觉，我们需要将延迟保持在 20 毫秒以下（例如，60Hz 监视器的响应时间为 16 毫秒）。

Oculus Rift 头显的延迟为 20 毫秒或更短，但在基于移动设备的设置中，它将严重依赖智能手机的 CPU 性能和其他功能。

帧速率（每秒帧数/FPS）

根据维基百科的定义，帧速率是指成像设备产生称为帧的独特连续图像的频率。60fps 的速率是流畅用户体验的可接受速率，但根据应用程序运行的机器的性能或您想要显示的内容的复杂性，它可能会大幅降低。低于 30fps 通常被认为是卡顿的，并且会让用户感到恼火。

最困难的任务之一是保持恒定且较高的帧速率值，因此我们必须优化我们的代码使其尽可能高效。最好有一个体面的帧速率，并且不会持续或突然变化；为此，您需要尽可能减少进入场景的必要物体，并且（在 WebGL 的情况下）尝试减少绘制调用次数。

瞳距 (IPD)

根据维基百科的定义，IPD 是两只眼睛瞳孔中心之间的距离。IPD 对于双目观看系统的设计至关重要，在双目观看系统中，两只眼睛的瞳孔都需要位于观看系统的出瞳内。

瞳距 (IPD) 可以使用 WebVR 中的 VREyeParameters.offset 计算，它等于 IPD 的一半。

此值由头显返回，其值可能在 60 到 70 毫米左右；对于某些头显（如 Oculus Rift），您可以设置自己的 IPD。通常我们不会更改此值，但您可以使用它来更改整个场景的比例。例如，如果您的 IPD 设置为 6000 毫米，用户将像巨人一样观看场景，就像观看小人国世界一样。