WebXR 基础

WebXR 是一个 API，供 Web 内容和应用程序用来与混合现实硬件交互，例如 VR 头戴设备和具有集成增强现实功能的眼镜。这包括管理渲染模拟 3D 体验所需视图的过程，以及感知头戴设备（或其他运动感应设备）的运动并将所需数据提供给用户以更新显示的图像的能力。

WebXR 还提供了对接受来自控制设备（例如手持 VR 控制器或专用混合现实游戏手柄）的输入的支持。

WebXR 不是渲染技术，不提供管理 3D 数据或将其渲染到显示器上的功能。这是一个需要牢记的重要事实。虽然 WebXR 管理与绘制场景相关的时序、调度和各种视角，但它 *不知道* 如何加载和管理模型，也不知道如何渲染和纹理化它们等等。这部分完全由您负责。幸运的是，WebGL 和各种基于 WebGL 的框架和库可以使处理所有这些内容变得容易得多。

WebVR 被认为是一个实验性 API，旨在帮助规范编写者确定在 Web 上创建虚拟现实 API 的最佳方法。浏览器实现者在浏览器中添加了 WebVR 支持，允许 Web 开发人员进行实验。但很快人们就意识到，为了完成 Web 上的虚拟现实 API，从头开始一个新的规范比试图“修复”WebVR 更合乎逻辑。

这导致了 WebXR 的诞生。根本区别在于 WebXR 不仅支持虚拟现实，还支持增强现实，它将虚拟物体与用户的周围环境融合在一起。

另一个关键区别在于 WebXR 集成了对大多数混合现实头戴设备使用的先进 输入控制器 的支持，而 WebVR 依赖于 游戏手柄 API 来支持控制器。在 WebXR 中，主要的选择和挤压操作使用事件直接支持，而其他控制则通过 Gamepad 对象的特定 WebXR 实现提供。

在深入研究细节之前，让我们考虑一些在学习如何开发 XR 代码之前需要了解的基本概念。

术语 **视野** (**FOV**) 应用于任何视觉技术，从旧的胶片相机到现代的数字摄像机，包括计算机和移动设备中的摄像头。

什么是视野？

视野是您可以看到环境的程度。视野的宽度（以度数或弧度指定）测量为定义从视野最左侧边缘到最右侧边缘的弧的角。

人眼能够接受约 135° 的 FOV。假设一个人有两颗健康的眼睛，那么总视野的宽度约为 200° 到 220°。为什么 FOV 用两只眼睛更宽，而不是单眼 FOV 的两倍？这是因为两只眼睛的 FOV 重叠了很多。这种重叠给了我们深度感知，其宽度约为 115°。在重叠区域之外，我们的视力回到单眼。

这里显示的图示说明了 FOV 的概念：左眼为蓝色楔形，右眼为红色楔形。浅棕色重叠区域是观察者具有双眼视觉并能感知深度的区域。仔细观察，您会发现两只眼睛看到骰子的方式略有不同，组合后的视图将两者混合成一个 3D 形状。

通常，应用程序仅定义和管理水平 FOV。有关更多详细信息，请参阅 3D 光学。

视野和混合现实设备

为了实现足够宽的视野，使用户的眼睛被欺骗成认为虚拟世界完全包围了他们，FOV 需要至少接近双眼视觉区域的宽度。基本头戴设备通常从大约 90° 开始，而最好的头戴设备通常具有大约 150° 的视野。由于 FOV 取决于透镜的大小以及它们与用户眼睛之间的距离，因此在没有将透镜安装到用户眼球的情况下，FOV 的宽度存在限制。

宽 FOV 可以显着提高用户的沉浸感。但是，增加 FOV 也会增加头戴设备的重量和成本。

术语 **自由度** 指示用户在虚拟世界中具有的移动自由度。这与 WebXR 硬件配置能够识别和再现到虚拟场景中的运动类型数量直接相关。

**图：显示 3 自由度硬件可能的运动的图表：偏航、翻滚和俯仰。**

旋转运动的自由度

前三个自由度是 **旋转** 的。旋转自由度是

• 俯仰：向上和向下看
• 偏航：向左和向右看
• 翻滚：向左和向右倾斜

在所有这些情况下，观察者保持在空间中的同一位置，同时绕一个或多个三个轴旋转，以改变他们观看的方向。一个具有两个自由度的系统可以感知到用户向左和向右或向上和向下看时的变化，但不能报告任何其他类型的运动。

一个典型的基线头戴设备提供三个自由度，识别围绕所有三个轴的旋转。这通常用简写 **3DoF** 表示。

平移运动的自由度

另外三个自由度是平移的，提供了感知空间中运动的能力：向前和向后、向左和向右、向上和向下。对所有六个自由度的支持被称为 **6DoF**。

一些更高级的头戴设备至少提供了对平移运动检测的最小支持，但是为了捕获更实质性的空间运动，通常需要外部传感器，例如摄像头（使用可见光或红外线）。

WebXR 使用相同的 API 支持增强现实 (AR) 和虚拟现实 (VR) 会话。您想要创建的会话类型在创建会话时指定。这可以通过为要创建的会话类型指定相应的会话模式字符串来完成。

虚拟现实

在 VR 环境中，整个图像都是由您的应用程序或网站数字创建的，从前景对象一直到背景或天空盒。您的帧绘制代码必须在每帧期间重新绘制每个视图的每个像素，以避免潜在的伪影残留。一些平台可能会为您提供先前清除的帧，而其他平台可能会通过不擦除帧缓冲区来优化性能，以避免每帧触摸每个像素两次。

WebXR 中提供两种 VR 会话模式：**inline** 和 **immersive**。 前者由会话模式字符串 `inline` 指定，将渲染的场景呈现为网页浏览器中文档的一部分，无需特殊的 XR 硬件即可查看。 沉浸式会话模式使用会话模式 `immersive-vr` 表示。 此会话模式需要 XR 设备（例如头戴式显示器），并使用显示在用户每只眼睛上的显示器将整个世界替换为渲染的场景。

增强现实

在增强现实 (AR) 中，用户会看到您渲染的图像显示在他们周围的物理现实世界环境之上。 由于 AR 始终是一种沉浸式体验，其中场景是围绕用户整个世界（而不是被封闭在一个屏幕上的框中），因此唯一的 AR 会话模式是 `immersive-ar`。

有两种基本的 AR 设备类型

• 使用相机捕获用户面前世界的设备，将 WebXR 内容渲染到该图像之上，然后将图像显示在屏幕上。 这些设备包括手机，它们以 2D 形式在设备屏幕上显示生成的场景，以及使用一对相机（每只眼睛一个）以立体声捕获场景以保留世界深度的护目镜，然后针对每只眼睛渲染 WebXR 场景，其中该眼睛的捕获背景就位。
• 使用透明眼镜让用户看到世界，同时将渲染的图像叠加在场景之上的设备。 因此，用户直接查看真实世界，而不是一系列它的数字照片。

这两种类型的设备都应该能够呈现 VR 会话。 WebXR 通常不关心您使用的是哪种类型的设备，渲染过程几乎与 VR 相同，只是在渲染每一帧之前不会擦除背景或天空盒。

最简单的 XR 演示涉及将场景直接渲染到用户的屏幕上，无论是网页文档的一部分，还是全屏模式。 当用户没有专用的 XR 设备或用户在手机或其他手持设备上查看 AR 或 VR 应用程序时，这最常见。

更简单、价格更低的 XR 设备通常使用集成计算机或连接到智能手机，本质上使用移动 CPU 和 GPU 来运行应用程序、渲染图像并将其显示给用户。 功率更高的解决方案通常将应用程序执行和图形处理卸载到外部设备（如台式计算机），并且要么通过电缆与计算机连接，要么使用无线网络接收图像以显示给用户。

大多数沉浸式 VR 体验都使用某种护目镜或头戴式显示器。 VR 头戴式显示器戴在头上，带有一条穿过头部后部的带子将其固定到位，以及一个或两个显示器，其屏幕使用透镜聚焦到眼睛中。 通过向每只眼睛呈现略微不同的图像，可以产生深度错觉，从而为用户提供模拟的 3D 体验。

绝大多数头戴式显示器使用单个显示器，其帧分成两半，一半聚焦到用户的每只眼睛。 例如，如果头戴式显示器使用 2560x1440 屏幕，左侧用于左眼的视图，右侧用于右眼的视图，则帧缓冲区将按如下方式使用

最简单的头戴式显示器没有集成传感器，并将屏幕的每一半聚焦到相应的眼睛。 一个常见的例子是 Google Cardboard，一种由 Google 首次创建的头戴式显示器，可以使用纸板或其他廉价材料廉价地创建。 这些设备通常通过将您的手机固定到头戴式显示器中来工作，以便其屏幕和板载图形处理器可以用于渲染和显示 XR 场景。

更先进的头戴式显示器具有集成显示器，并使用弹性带或带子或带魔术贴封口的带子绑在头上。 这些头戴式显示器可能包含集成的扬声器和麦克风，或连接外部扬声器和麦克风的连接器。 此外，这些头戴式显示器可能具有各种传感器，用于检测头戴式显示器何时在空间中移动。 所包含的传感器类型和数量将决定用户拥有的 自由度 数。

XR 护目镜类似于头戴式显示器，它们涉及将图形显示表面放置在眼睛前面，以便渲染模拟场景深度所需的场景视图。

不同之处在于护目镜穿过真实世界，将渲染的图像叠加在用户的物理环境之上。 这是在不数字再现世界的情况下完成的，因为完整的头戴式显示器需要这样做。 相反，显示表面是透明的，如果没有任何显示内容，则本质上与佩戴普通眼镜相同。 当绘制物体时，它们被绘制到护目镜的镜片上，部分或完全阻止从镜片的遮挡部分看到物理环境。

**洞穴自动化虚拟环境** (**CAVE**) 是一种沉浸式 VR 环境，其中场景被投影或以其他方式显示在墙壁上（以及可能的天花板和/或地板上），从而用模拟完全包围用户，并允许他们沉浸在场景中。 用户佩戴 3D 眼镜，既可以在投影的图像上添加 3D 效果，还可以为系统提供将前景物体渲染到世界中的方法。

用户的活动可以使用用户佩戴或持有的运动传感器进行监控，或者，越来越普遍的是，使用检测用户运动的红外摄像头。 围绕腔室放置的扬声器也提供沉浸式声音。

这些在普通用户中并不常见；它们大多是实验性的，用于演示目的，或者被大型组织使用。 一个缺点是 CAVE 不能模拟比墙壁更近的任何东西。

由于创建虚拟 3D 世界的整个行为本质上是一个技巧，它利用了我们对眼睛如何收集光线以及大脑如何解释收集数据的理解，因此重要的是要记住，作为这样的技巧，软件设计师和开发人员有责任比平时更加小心，以确保结果是正确的。

**虚拟现实病** 是一种病症，其中体验虚拟现实的人在体验期间以及有时在体验结束后短时间内会感到不适、迷失方向，甚至严重的恶心。

围绕究竟是什么导致某些人对虚拟现实感到不舒服或生病，有很多理论，其中大多数都集中在这样一个想法上，即即使大脑认为应该发生的事情和正在看到的事情之间存在细微差异，也会导致这些症状。

缺陷、错位或失真会让眼睛和大脑感到困惑，导致从眼睛疼痛或头痛到某些情况下的眩晕、头晕，甚至潜在的严重恶心。 由于头戴式显示器的包罗万象性质，重要的是要警惕您可能会显示的任何可能触发癫痫发作的内容； 如果图像会导致痛苦，用户可能无法快速从您正在呈现的图像中移开视线。

沉浸式虚拟现实的另一个潜在问题是，如果用户在佩戴头戴式显示器时在房间里走动，他们可能会撞到物理障碍物。 除非他们在安全的环境中，否则提供提示来限制他们的移动非常重要，例如通过模拟一个已知在其物理环境中是安全的区域。

如果用户的头戴式显示器与设备相连，最好尝试确保用户不会被提示或诱惑以这样一种方式移动，即他们会拉扯或猛拉头戴式显示器的线缆，这不仅会导致受伤，还可能对用户的头戴式显示器或设备造成重大损坏（无论是手机还是计算机）。

如果您有任何可能对任何用户造成风险的内容，您应该提供警告信息。 同样，值得提醒用户尽可能保持坐姿，如果体验是完全沉浸式的虚拟现实，则在佩戴头戴式显示器时要谨慎地四处走动。 安全总比后悔好！

由于 3D 图形（尤其是混合现实）涉及许多通常错综复杂的数学、数据管理和其他复杂任务，因此您不太可能在大多数情况下直接使用 WebGL 来渲染您的场景。 相反，您可能大部分工作都将利用构建在 WebGL 之上的框架或库之一，以使其更易于使用。

使用框架而不是直接使用 WebGL API 的一个特殊好处是，库往往会实现虚拟相机功能。 OpenGL（以及因此扩展的 WebGL）没有直接提供相机视图，使用代表您模拟一个的库可以让您的工作变得容易得多，尤其是在构建允许在虚拟世界中自由移动的代码时。

由于 WebGL 用于将 3D 世界渲染到 WebXR 会话中，因此您应该首先熟悉 WebGL 的一般用法以及 3D 图形的整体基础知识。

这些框架适用于通用编程以及游戏开发，当您想要自己执行逻辑时。 它们旨在创建和动画 3D 场景，无论上下文如何。

• A-Frame（专门用于创建基于 WebXR 的应用程序）
• Babylon.js
• Three.js

游戏工具包专为游戏开发人员设计，通常包括游戏特定的功能，例如物理模型、输入控制系统、资产管理、3D 声音播放等。

• PlayCanvas

有了这些基本事实，您就可以迈出进入混合现实世界的下一步。 以下文章可以提供帮助。

• WebXR 应用程序生命周期
• 启动和关闭 WebXR 会话
• 移动、方向和运动：WebXR 示例