WebXR 开发入门 学习笔记

最近对 WebXR 比较感兴趣，正好手里有台 Pico Neo3，可以试试做几个简单的 VR 应用。这里把 WebXR 的开发基础做个笔记，方便日后查阅。

WebXR 基础概念

提到 VR 大家可能比较熟悉，但 WebXR 似乎是个陌生的名词。用 MDN 上的官方解释来说，WebXR 是一组支持将渲染 3D 场景用来呈现虚拟世界（虚拟现实，也称作 VR）或将图形图像添加到现实世界（增强现实，也称作 AR）的标准。通俗点讲，WebXR 就是一种用 3D 场景展示 VR 或者 AR 应用的标准。Web XR 是 W3C 通过统一 WebVR 和 WebAR 之后形成的标准，更进一步说，“XR” 意味着此标准此后可能将不局限于 VR 和 AR。

此外，还有基于 WebXR 标准的 WebXR Device API，它实现了 WebXR 功能集的核心，主要功能有：

• 能够管理输出设备的选择
• 能以适当的帧速率将 3D 场景展示在 XR 设备里
• 能将 3D 场景输出到 2D 显示器
• 可以创建、管理用输入控制设备生成的运动向量

目前 Web XR 还没有在大多数浏览器中普及，而且由于 WebXR 标准一直在不断更新，浏览器基本都是以“部分支持”形态实现 WebXR Device API 的。下图是 CanIUse 中对于 WebXR Device API 的兼容性截图（截止到 2022 年 10 月的数据）

通常对于 XR（这里更多指的是 VR 和 MR）技术来说，要想体验其功能必须要有一个头戴显示器（Head Mounted Display，HMD），同时可以使用一个或多个外部位置传感器（一般情况下会有，但实际上没有也可以），同时也可以根据需求需要添加比如加速度计，气压计或者其他传感器等，可以用于感知移动，旋转头部等动作；一个典型的 XR 设备可以具有 3 自由度或 6 自由度跟踪能力，一般将这两个概念称之为 3DoF 和 6DoF。

• 3DoF：三自由度的缩写，适用 3DoF 的设备只能追踪旋转移动，对于一些依赖加速度计和陀螺仪读数来提供平移跟踪的设备，使用 3DoF 能力跟踪旋转比较常见。3DoF 设备不会响应用户的平移运动，这种设备一般会使用一些特定的算法以根据手臂或颈部的建模估计平移变化。
• 6DoF：六自由度的缩写，适用 6DoF 的设备可以同时跟踪旋转和平移，可以在空间中实现精确的 1:1 跟踪，这种能力需要设备对用户环境有一定程度的了解，可以通过由内向外的跟踪来实现（即用被跟踪设备上携带的相机或深度传感器来确定位置），也可以通过由外向内的跟踪实现（相机或传感器放置在使用 VR 设备的环境中，为 VR 提供一个稳定的环境参考点）
  • 这个理论可以解释为什么 Pico VR 上每次开机都需要手动划定安全区，这是为了以由外向内的跟踪方法建立起设备对用户环境的认知，这样才能满足 6DoF 的要求。

Web XR 的用武之地：VR && AR && MR

基于 Web XR 技术标准，我们可以实现各种各样的 VR 应用和 AR 应用，二者的应用特点如下：

VR 应用：

• 用户借助专门的输入设备（如手柄等运动传感器）和输出设备（如 VR 头显或 VR 一体机）来和虚拟场景进行交互
• 目前市面上常见的设备有 Pico 4，Pico Neo 3，Meta Quest 2 等设备
• 底层依赖支持 WebXR 规范的 webview
• 目前被广泛应用于各种娱乐应用，打造元宇宙世界，如：
  • VR 游戏，如 Beat Saber，Hyper Dash 等
  • VR 观影，如抖音、爱奇艺、Bilibili 等视频应用都有对应的 VR 版本
  • VR 社交，如 VR Chat，梦境世界等
• 同时人们也探索出了许多基于 VR 设备的实用应用，如：
  • VR 会议：在虚拟的会议室中与公司的同事们开展线上会议，拉近团队距离
  • VR 教育培训：可让学生以更加直观的方式学习各种实验过程或参考各种模型，同时也可以让工人在完全虚拟的环境下完成危险步骤的模拟操作
• 优点：交互过程更加沉浸，体验更佳，是未来主流的发展方向
• 缺点：必须用户购买 VR 设备才可体验，不适合所有人使用（如有 3D 晕眩，或不同程度的光敏性癫痫等）

AR 应用：

• 用户借助智能手机或智能眼镜等设备，体验在现实画面中叠加的虚拟内容

• 与 VR 的区别是，AR 技术呈现的事物是基于现实世界的，而 VR 呈现的是一个完全虚拟的世界

• 市面上大多数主流智能手机现在都可以使用 AR 应用，而诸如 Nreal Air 等智能眼镜设备也支持 AR 应用

• 底层依赖支持 WebXR 规范的 webview

• 现在被用于各种游戏、生活类 APP，比如：

  • AR 导航：智能引路，门店提示，景点智能游览等
  • AR 购物：AR 试鞋，AR 试衣，AR 穿戴等
  • AR 游戏：Pokemon Go 等

• 优点：跨平台传播方便（本质是 Web 应用，可通过 URL 分发）

• 缺点：浏览器标准不统一、加载复杂 3D 内容性能不佳、无法实现复杂交互\

MR 应用：

• MR 被称为“混合现实”（Mixed Reality），可以把它看成是 AR 与 VR 结合的技术
• 用户可以看到现实环境和额外的虚拟物品，并且支持交互
• 比如微软 2021 Ignite 大会中发布的 Microsoft Mesh 平台，搭配微软的 MR HoloLens，即可实现非常逼真的混合现实效果

Web XR 应用示例

1. webxr-samples

我们可以在 https://immersive-web.github.io/webxr-samples/ 中运行一个简单的 WebXR demo，但是第一次打开后，会发现它提示没有找到 VR 设备，因为直接打开此页面后，我们的电脑还没有和 VR 建立连接。如果你拥有 VR 设备，那么可以在 VR 中的浏览器打开，即可看到效果，但实际上我们也可以通过浏览器进行模拟。

可以在 Chrome 应用商店中搜索 WebXR API Emulator，安装它后便可以在浏览器里模拟 VR 设备了。

这种情况下页面是不能动的，需要借助刚才插件的能力，打开 devtool 后选择 WebXR 选项卡，可以看到一个模拟的头显和手柄，可通过转动模拟头显和手柄以模拟真实情况下的运动：

2. hello webxr

演示地址：https://mixedreality.mozilla.org/hello-webxr/

这是一个由 Mozilla 开发的 WebXR 应用，但从电脑打开时并不需要安装上面的插件，只不过交互能力会比较有限。

如果有 VR 设备，在 VR 设备中打开并点击“ENTER VR”即可正常预览。

WebXR 应用的生命周期

如果一个应用程序是基于 WebXR 的，那么它一般会遵循一个总体的执行步骤（或者说设计模式），执行内容如下：

1. 开发者：检查当前设备的浏览器是否支持所需的 XR 模式

   • 需要确保 WebXR Device API 可用，可以通过检测 window.navigator.xr 对象是否存在来判断，如果此对象不存在，那么说明用户使用的浏览器不支持 WebXR，或关闭了 WebXR 能力。
   • 调用 window.navigator.xr.isSessionSupported(mode)，其中 mode 的可选值是 'inline' | 'immersive-vr' | 'immersive-ar'，其中 inline 模式是指 HTML 文档中的元素的会话内容。 它返回的类型是Promise<boolean>，如果 Promise 返回了 false，那么表示当前的模式在用户的浏览器下无法使用。
   • 如果经过上述两个步骤确定 WebXR 能力可用，需要在页面上以适当方式提示用户可以激活 XR 模式，并绑定一个激活 XR 的事件。

2. 用户：触发激活 XR 的事件，表明希望使用 XR

3. 开发者：调用 window.navigator.xr.requestSession(mode, options)，将 XRSession 设定为用户期望的模式

   • 此方法返回一个 Promise，如果它被 resolve，就可以用获得的 XRSession 运行渲染循环

4. 开发者：调用 XRSession 的 requestAnimationFrame，调度 XR 设备的首帧渲染

   • 每一个 requestAnimationFrame 的回调都需要使用 WebGL 渲染 3D 物体

   • 持续在回调函数中调用 requestAnimationFrame，保证每一帧都正常渲染

5. 持续生成帧，直到用户需要结束 XRSession 的时候

   • 如果用户希望退出 XR 模式，通过调用 XRSession.end() 可以手动结束会话
   • 无论通过何种方式终止会话，XRSession 的 end 事件都会收到通知

WebXR 的安全性

创建虚拟 3D 世界的过程利用了我们对眼睛如何收集光以及大脑如何解释所收集的数据的理解，所以 VR 的开发者需要更加严谨小心以保证结果正确。如果出现 bug，画面可能会畸变导致损伤眼睛或大脑，导致头痛或者眩晕或其他潜在问题。开发者需要对可能引起用户不适的任何情况都要保持警惕，如果因为画面问题导致对用户身体造成影响，用户可能无法第一时间将视线从开发者呈现的图像上移开。

如果需要开发任何可能对用户身体造成风险的内容，需要提前展示必要的警告信息，有备无患。

参考资料

• 2022前端 推荐了解的技术 WebXR：https://juejin.cn/post/7055100178277072927

• 元宇宙下的前端现状：https://juejin.cn/post/7001419484376350727

• 【惊】手机将走向末路，混合现实（MR）难道就是5G时代的方向：https://juejin.cn/post/6955440997991972872

• AR、VR、MR概念及应用介绍：https://juejin.cn/post/7068992317406871588

• WebXR 应用开发之 aframe 框架入门：https://juejin.cn/post/7067806073045909541

• WebXR 技术调研 - 在浏览器中构建扩展现实应用：https://juejin.cn/post/7130883727516778503

• WebXR 设备 接口参考：https://developer.mozilla.org/zh-CN/docs/Web/API/WebXR_Device_API