WebXR 基础
WebXR，其核心是WebXR 设备 API，提供了将增强现实 (AR) 和虚拟现实 (VR) 带到 Web 所需的功能。这些技术统称为混合现实 (MR) 或交叉现实 (XR)。混合现实是一个庞大而复杂的主题，需要学习很多知识，并需要整合许多其他 API 才能为用户创造引人入胜的体验。
本指南概述了 WebXR 是什么以及它是如何工作的，以及开始为 Web 开发增强现实和虚拟现实体验所需的基础知识。
WebXR 是什么，不是什么
WebXR 是一个 API，供 Web 内容和应用程序用于与混合现实硬件（例如 VR 头显和集成增强现实功能的眼镜）进行接口。这包括管理渲染视图以模拟 3D 体验的过程，以及感知头显（或其他运动传感设备）的运动并提供所需数据以更新显示给用户的图像的能力。
WebXR 还支持接受来自控制设备的输入，例如手持 VR 控制器或专用混合现实游戏手柄。
WebXR 不是渲染技术，不提供管理 3D 数据或将其渲染到显示器的功能。这是一个需要牢记的重要事实。虽然 WebXR 管理场景绘制时的时间、调度和各种视角，但它并不知道如何加载和管理模型，也不知道如何渲染和纹理它们，等等。这部分完全由您决定。幸运的是，WebGL 和各种基于 WebGL 的框架和库可用于使其更容易处理所有这些问题。
WebXR 与 WebVR 有何不同？
WebVR 被认为是一个实验性 API，旨在帮助规范编写者确定在 Web 上创建虚拟现实 API 的最佳方法。浏览器实现者将 WebVR 支持添加到浏览器中，允许 Web 开发人员进行实验。但很快就清楚，要完成 Web 上的虚拟现实 API，最好是开始一个新规范，而不是试图“修复”WebVR。
这导致了 WebXR 的诞生。根本区别在于 WebXR 不仅支持虚拟现实，还支持增强现实，它将虚拟对象与用户的周围环境融合在一起。
另一个关键区别是 WebXR 集成了对与大多数混合现实头显一起使用的高级输入控制器的支持，而 WebVR 则依赖于Gamepad API来支持控制器。在 WebXR 中，主要的选择和挤压动作通过事件直接支持，而其他控件则通过Gamepad对象的特殊 WebXR 特定实现提供。
基本概念
在深入细节之前，让我们考虑一些在学习如何开发 XR 代码之前需要了解的基本概念。
视野
视野 (FOV) 一词适用于任何视觉技术，从老式胶片相机到现代数字摄像机，包括计算机和移动设备中的相机。
视野是什么？
视野是您能够看到环境的范围。视野的宽度，以度或弧度表示，测量为定义从视野的最左边缘到最右边缘的弧线的角度。
人眼能够容纳约 135° 的 FOV。假设一个人有两只健康的眼睛，总视野最终约为 200° 到 220° 宽。为什么两只眼睛的 FOV 更宽，但不是单眼 FOV 的两倍？这是因为两只眼睛的 FOV 大部分重叠。这种重叠为我们提供了深度感知，其宽度约为 115°。在重叠区域之外，我们的视力恢复到单眼。
这里显示的图演示了 FOV 的概念：左眼蓝色楔形，右眼红色楔形。浅棕色重叠区域是观看者具有双眼视觉并可以感知深度的地方。如果仔细观察，您会发现每只眼睛看到的骰子略有不同，组合视图将两者融合成立体形状。
通常，应用程序只定义和管理水平 FOV。有关更多详细信息，请参阅3D 光学。
视野与混合现实设备
为了获得足够宽的视野，使用户的眼睛被欺骗相信虚拟世界完全环绕他们，FOV 至少需要接近双眼视觉区域的宽度。基本头显通常从 90° 左右开始，而最好的头显通常具有约 150° 的视野。由于 FOV 取决于镜头的大小以及它们与用户眼睛的距离，因此在不将镜头安装到用户眼球中的情况下，FOV 的宽度会受到限制。
宽 FOV 可以显著提高用户的沉浸感。但是，增加 FOV 也会增加头显的重量和成本。
自由度
自由度一词表示用户在虚拟世界中的移动自由度。这直接关系到 WebXR 硬件配置能够识别并再现到虚拟场景中的移动类型。
图：显示 3 自由度硬件可能移动的图：偏航、滚动和俯仰。 
旋转运动自由度
前三个自由度是旋转的。旋转自由度是
- 俯仰：向上和向下看
- 偏航：向左和向右看
- 滚动：向左和向右倾斜
在所有这些情况下，观看者保持在空间中的同一位置，同时围绕三个轴中的一个或多个轴旋转以改变他们看的方向。一个具有两个自由度的系统可以感知用户何时向左和向右或向上和向下看，但不能报告任何其他类型的移动。
典型的基线头显提供三个自由度，识别围绕所有三个轴的旋转。这通常被称为3DoF。
平移运动自由度
另外三个自由度是平移的，提供感知空间中移动的能力：向前和向后、向左和向右、向上和向下。对所有六个自由度的支持称为6DoF。
一些更高级的头显至少提供对平移运动检测的最小支持，但为了捕捉空间中更显著的运动，通常需要外部传感器，例如相机（使用可见光或红外线）。
WebXR 会话模式
WebXR 使用相同的 API 支持增强现实 (AR) 和虚拟现实 (VR) 会话。在创建会话时指定要创建的会话类型。这通过为要创建的会话类型指定适当的会话模式字符串来完成。
虚拟现实
在 VR 环境中，整个图像由您的应用程序或站点以数字方式创建，从前景对象一直到背景或天空盒。您的帧绘制代码将必须在每一帧期间重新绘制每个视图的每个像素，以避免留下伪影。某些平台可能会向您提供先前已清除的帧，而其他平台可能会通过不擦除帧缓冲区来优化性能，以避免每帧触摸每个像素两次。
WebXR 中有两种 VR 会话模式可用：内联和沉浸式。前者由会话模式字符串inline指定，在 Web 浏览器中文档的上下文中呈现渲染场景，不需要特殊的 XR 硬件即可查看。沉浸式会话模式使用会话模式immersive-vr表示。此会话模式需要 XR 设备（例如头显），并使用显示给用户每只眼睛的显示器用渲染场景替换整个世界。
增强现实
在增强现实 (AR) 中，用户看到您渲染的图像呈现在他们周围的物理真实世界环境中。由于 AR 始终是一种沉浸式体验，其中场景是用户周围的整个世界（而不是封闭在屏幕上的盒子中），因此唯一的 AR 会话模式是immersive-ar。
有两种基本类型的 AR 设备
- 使用相机捕捉用户面前的世界，在图像上方渲染 WebXR 内容，然后将图像显示在屏幕上的设备。这些设备包括手机，它们在设备屏幕上以 2D 呈现显示结果场景，以及使用一对相机（每只眼睛一个）以立体方式捕捉场景以保持世界深度的眼镜，然后为每只眼睛渲染 WebXR 场景，并用该眼睛捕捉的背景代替。
- 使用透明眼镜让用户看到世界，同时将渲染图像叠加在场景上方的设备。因此，用户直接看到真实世界，而不是一系列数字照片。
这两种类型的设备都应该能够呈现 VR 会话。WebXR 通常不关心您使用的是哪种类型的设备，渲染过程几乎与 VR 完全相同，只是在渲染每帧之前不擦除背景或天空盒。
WebXR 硬件类型
最简单的 XR 演示涉及将场景直接渲染到用户屏幕，无论是在 Web 文档的上下文中，还是在全屏模式下。当用户没有专用 XR 设备，或者当用户在手机或其他手持设备上查看 AR 或 VR 应用程序时，这种情况最常见。
更简单、价格更低的 XR 设备通常使用集成计算机或连接到智能手机，本质上是使用移动 CPU 和 GPU 来运行应用程序、渲染图像并将其显示给用户。更高功率的解决方案通常将应用程序执行和图形处理卸载到外部设备，例如台式计算机，并使用电缆连接到计算机或使用无线网络接收图像以显示给用户。
头显
大多数沉浸式 VR 体验都使用某种护目镜或头显。VR 头显佩戴在头部，带有固定在头部后面的绑带，以及一个或两个显示器，其屏幕通过透镜聚焦到眼睛中。通过向每只眼睛呈现略微不同的图像，可以创造深度幻觉，为用户提供模拟的 3D 体验。
绝大多数头显使用一个显示器，其帧被分成两半，一半用于左眼的视图，一半用于右眼的视图。例如，如果头显使用 2560x1440 屏幕，左半部分用于左眼的视图，右半部分用于右眼的视图，则帧缓冲区如下使用
最简单的头显没有集成传感器，并将屏幕的每一半聚焦到相应的眼睛中。一个常见的例子是Google Cardboard，这是一种谷歌首次创建的头显，可以使用纸板或其他廉价材料廉价制造。这些设备通常通过将手机卡入头显，以便其屏幕和板载图形处理器可用于渲染和显示 XR 场景。
更高级的头显具有集成显示器，并使用弹性或绑带或带魔术贴闭合的绑带固定在头部。这些头显可能包括集成扬声器和麦克风，和/或用于连接外部扬声器和麦克风的连接器。此外，这些头显可能具有各种传感器，用于检测头显在空间中移动时的情况。包含的传感器类型和数量将决定用户拥有的自由度。
护目镜和眼镜
XR 护目镜与头显类似，它们都涉及将图形显示表面放置在眼睛前方，以渲染模拟场景深度所需的场景视图。
不同之处在于，护目镜透射真实世界，将渲染图像叠加在用户的物理环境之上。这不是通过数字再现世界来完成的，而对于完整的头显来说这是必需的。相反，显示表面是透明的，如果不显示任何东西，则基本上与佩戴普通眼镜相同。绘制对象时，它们会绘制在护目镜的镜片上，部分或完全阻挡物理环境通过镜片的遮挡部分被看到。
CAVE
Cave Automated Virtual Environment (CAVE) 是一种沉浸式 VR 环境，其中场景投影或以其他方式显示在墙壁（以及可能的天花板和/或地板）上，从而完全将用户包围在模拟中，并允许他们沉浸在场景中。用户佩戴 3D 眼镜，既为投影图像添加 3D 效果，又为系统提供了一种将前景对象渲染到世界中的方法。
用户的活动可以通过用户佩戴或持有的运动传感器进行监控，或者越来越普遍地通过检测用户运动的红外摄像头进行监控。放置在房间周围的扬声器也提供沉浸式声音。
这些在日常用户中并不常见；它们大多是实验性的，用于演示目的，或由大型组织使用。一个缺点是 CAVE 无法模拟比墙壁更近的任何东西。
重要的健康和安全提示
因为创建虚拟 3D 世界的整个过程本质上是一种技巧，它利用我们对眼睛如何收集光线以及大脑如何解释所收集数据的理解，所以重要的是要记住，作为设计师和开发人员，软件设计人员和开发人员有责任比平时更加小心，以确保结果是正确的。
虚拟现实眩晕症
虚拟现实眩晕症是一种症状，患者在体验虚拟现实期间，有时在体验后短时间内，会感到不适、迷失方向，甚至严重的恶心。
关于虚拟现实究竟是什么导致一些人感到不适或恶心的理论有很多，其中大多数都集中在这样的想法上：即使是大脑认为应该发生的事情与实际看到的事情之间的细微差异也可能导致这些症状。
缺陷、错位或变形可能会混淆眼睛和大脑，导致从眼睛疼痛或头痛到某些情况下的眩晕、头晕或潜在的严重恶心。考虑到头显的包罗万象的性质，警惕任何可能引发癫痫发作的显示内容也很重要；如果图像引起不适，用户可能无法快速将视线从您呈现的图像上移开。
物理风险
沉浸式虚拟现实的另一个潜在问题是用户在戴着头显在房间里移动时与物理障碍物碰撞。除非他们处于安全环境中，否则提供限制他们移动的提示很重要，例如通过模拟在他们的物理环境中已知是安全的空间。
如果用户的头显连接到设备，最好尝试确保不会提示或诱使用户以拉扯头显线缆的方式移动，这不仅可能造成伤害，还可能对用户的头显或设备（无论是手机还是电脑）造成重大损坏。
如果您有任何可能对用户造成风险的内容，您应该提供警告消息。同样，值得提醒用户尽可能保持坐姿，并提醒用户在佩戴头显时如果体验是完全沉浸式虚拟现实，则要谨慎移动。安全总比后悔好！
框架的作用
因为 3D 图形——尤其是混合现实——涉及大量通常复杂的数学、数据管理和其他复杂任务，所以在大多数情况下，您不太可能直接使用 WebGL 来渲染场景。相反，您可能会通过使用基于 WebGL 构建的框架或库来完成大部分工作，以使其更方便使用。
使用框架而不是直接使用 WebGL API 的一个特殊好处是库倾向于实现虚拟摄像机功能。OpenGL（以及因此 WebGL 扩展）不直接提供摄像机视图，使用模拟摄像机的库可以使您的工作变得非常容易，尤其是在构建允许在虚拟世界中自由移动的代码时。
由于WebGL用于将 3D 世界渲染到 WebXR 会话中，您应该首先熟悉 WebGL 的一般用法，以及 3D 图形的基础知识。
通用 3D 框架
这些框架适用于通用编程以及当您想自己编写逻辑时的游戏开发。它们旨在创建和动画 3D 场景，无论上下文如何。
- A-Frame（专门设计用于创建基于 WebXR 的应用程序）
- Babylon.js
- Three.js
游戏工具包
游戏工具包是为游戏开发者设计的，通常包括游戏特定功能，例如物理模型、输入控制系统、资产管理、3D 声音播放等。
后续步骤
掌握了这些基本事实，您就可以迈向混合现实世界了。以下文章可以提供帮助。