使用 WebXR 打造沉浸式网站体验

大家好 我叫 Ada Rose Cannon 我是一名 Safari 浏览器工程师 从事网络标准方面的工作 今天 我将向大家展示如何 通过 WebXR API 为你的网站 添加沉浸式虚拟现实体验 如果你对 WebXR 以及它的功能还不熟悉 让我们先看一个演示

现在 我在主屏幕视图上 启动 Safari 浏览器后 看到 我以前创建的一个网站 上面有一个按钮写着 “Launch VR Experience” 我看了它一眼 然后轻点这个按钮 现在 Safari 浏览器询问我是否允许 网站启动沉浸式体验 我轻点“Allow” 然后我的周围就 出现了一个国际象棋花园

我面前是一个棋盘 我可以与电脑下棋 下棋时可使用自然输入功能 来选择并移动棋子 我制作这个演示是为了帮助我 更深入地了解国际象棋 在制作过程中 我学到了很多 你肯定没想到我在这里输得这么快 然后我可以按下数码旋钮 或使用手势进入主视图 来离开这个虚拟现实体验 这样就可以退出体验并回到 Safari 浏览器中的网页 我觉得使用 WebXR 为网页打造精彩体验 非常神奇 我喜欢使用 Mac 进行构建 然后以完整比例访问我的创作 以前这只能在我的想象中 和显示器上实现 所有 Apple Vision Pro 用户均可使用 WebXR 本讲座将介绍 WebXR 告诉大家如何在网站上添加 虚拟现实功能 并利用 Vision Pro 特有的功能 以及如何在 visionOS 上 测试和调试网站

首先 我将介绍一下 WebXR

你刚才看到的国际象棋演示 展示了虚拟现实技术的实际应用 我们进入的是使用硬件加速图形 通过 WebGL 构建的虚拟体验 visionOS 2.0 上的 Safari 浏览器支持 Vision Pro 的沉浸式 虚拟现实会话 虚拟现实 (VR) 及相关的 增强现实 (AR) 技术 统称 XR 在网页上使用 XR 技术的 API 称为 WebXR WebXR 是 W3C 沉浸式网页工作组 制定的一项网页标准

这个工作组设计 WebXR 的目的是 在网页上实现沉浸式体验 这种体验不仅可在各种浏览器上实现 而且只需略微改动便可以 在多种 XR 硬件上实现 这个 API 经过精心设计 即使不能永不过时 至少也能适应未来的种种变化 这在新形态因素和 交互模式层出不穷的 领域算是一项艰巨的任务 这项标准经过精心设计 除了力求稳健可靠外 还优先考虑用户隐私和安全性 因为网络可能是一个令人生畏的所在 任何新的 Web API 都可能 被不法分子和善意的开发者所利用 从一开始 用户保护 就内置于 WebXR 标准中 这项标准采用的设计不会给用户 带来突如其来的体验并且易于退出

一切安全防护都始于服务器 所有 WebXR 内容都需要 HTTPS 这样 XR 内容就不会 被中间人攻击中的机器所注入

如果 WebXR 体验通过 iFrame 嵌入到网页中 那么包含 iFrame 的网页需要 在 iFrame 的 HTML 标签中 包含 HTML 属性 allow="XR-spatial-tracking" 这一要求可以防止 广告等第三方代码 在未经你 也就是开发者允许的 情况下启动 VR 体验

所有 WebXR 体验 都需要用户交互 才能请求启动会话 网站必须有一个按钮 或其他某种可见功能 让用户完成第一项操作 才能开始 XR 会话 不能直接将用户带入 XR 体验 不能在页面载入后立即启动会话 用户必须发出想要 XR 的信号

这样可以防止会话从 与网页的任何交互中启动 导致用户对突如其来的 沉浸式体验感到惊讶和迷惑 在 visionOS 上 Safari 浏览器 会询问用户是否允许站点 启动沉浸式体验 WebXR 会话也可以选择 请求持续的手部追踪 如果请求 则会出现第二个提示 询问用户是否同意这样做 重要的是 用户需要了解 并清楚他们同意的是什么

WebXR 规范 鼓励那些具体的实现在 整个会话期间努力保护用户隐私 在 visionOS 上 有一个注视 和捏合交互模型 但了解用户注视的内容 被认为是非常敏感的信息 在 visionOS 上的 WebXR 和 Safari 浏览器中 空间输入只显示 用户在捏合瞬间所注视的点 WebXR 会话只知道 用户捏合时的 手部位置

WebXR 标准规定系统交互只能 用于退出 WebXR 会话 这一要求确保 如果会话让用户感到不舒服 他们有办法快速离开会话 用户可以随时按下旋钮 或使用手势 进入主视图 来轻松退出沉浸式体验 作为设计者或开发者 你可以 并且或许应该在体验中 提供用户界面 让用户可以轻松退出 但是 如果用户时间紧急 也应该让他们可以 通过系统交互离开

在 WebXR 的每个层面 从网络连接、 会话持续时间到结束会话 用户安全和隐私都排在第一位 首先 WebXR 与一般的 网页开发有什么不同呢 网页有多种方式通过 文档向用户显示内容 有传统的 HTML 和 CSS 方法 有用于直接渲染像素的画布元素 还有 WebGL 用于硬件加速计算机图形 WebXR 会话一旦开始 就会隐藏文档和浏览器窗口

WebXR 会话只使用 WebGL 来渲染内容 因此 在深入了解 WebXR 之前 我们先来了解一下 WebGL 的渲染 从 WebGL 入门示例开始 这个示例将渲染一个正方形 首先 设置好画布 用顶点着色器和 GLSL 语言 编写一个片段 然后在 3D 空间中 定义形状的顶点 接下来调用 WebGL 以渲染正方形 记得温习一下 矢量数学和矩阵代数

你可以看到 输出如此简单 但代码却太多了 没有人会期望你 只使用原生 WebGL 这几乎是没有必要的 就连我自己也不会使用原生 WebGL 对我来说 这不是一种明智的工作方式 幸运的是 有各种各样的 WebGL 框架 可以帮助我们快速入门 这些库分别适用于 在图形和 JavaScript 领域 经验水平各不相同的用户 它们还整合了 WebXR 支持 因此 即使直接使用 WebXR 并不感觉困难 通常也会为 WebXR 提供抽象 3JS、Babylon 和 PlayCanvas 都使用 JavaScript 但语法略有不同

Wonderland 引擎有一个图形界面 可为构建场景提供高级工具

最后是 A-Frame 这是声明式框架 它基于自定 HTML 元素 用于描述 3D 环境 让我们深入了解一下 A-Frame

我很喜欢向刚接触 WebXR 的人 推介 A-Frame 它既美观又简洁 进行简单演示所使用的 代码只需一个屏幕就能放下 它的自定 HTML 元素 能让你感受到使用 WebGL 构建场景的乐趣 同时也为 Web 开发者 提供熟悉的工作方式 HTML 元素和事件 它拥有一个活跃的社区 和由社区构建的大量组件 当你准备试试手 使用 JavaScript 构建 自己的组件时 你会很高兴发现使用 3JS 库的 声明式 HTML 元素 这样 你就可以将自己学到的 A-Frame 知识运用到今后的项目中 让我们来看看 如何使用 A-Frame 渲染与红色方块示例类似的效果

在文档头部包含 库 JavaScript 文件后 我就可以使用它们的 自定 HTML 组件套件了 我添加了包裹 A-Frame 内容的 场景元素 还添加了一个红色方框 将它放在 与视线齐平的位置并稍稍深入场景中 这个方框的默认宽度、 高度和深度均为 1 米 米是 WebXR 使用的单位 由于是真实比例 虚拟对象也有真实大小

很好 方框已经可以使用了 这个库为我们处理 WebXR 部分 甚至包括用于启动 WebXR 会话的按钮 让我们做得更好一些 这里 我描述了 一些其他的基本形状 如球体和圆柱体 我还添加了一个天空盒子和一个平面 并进行旋转让它位于地面上

接下来 我在 a-scene 中 添加光标组件 这个组件使用光线投射器 来找到空间输入所指向的位置 并在位置上触发虚拟事件 虚拟事件的名称与 2D 文档中的 类似事件相匹配 点按 鼠标进入 然后鼠标离开 尽管这并不是使用 真正的鼠标来完成的

最后 我将动画 附加到需要实现动画效果的图形上

这就是本演示的全部代码

这是结果 这是 A-Frame 入门示例的变体 它演示了光标组件 如何让我们注视以及捏合对象上的 触发事件 只要加上一点想象力 你就能看到如何 在这些基础上构建 更完整的沉浸式场景 在 A-Frame 中 你并不需要 直接接触 WebXR API 但是 一旦你需要开始扩展组件 或者深入研究其他框架 了解 WebXR 的工作原理 就会非常有用 我将 WebXR 的生命周期 分为 4 个部分 在开始会话之前 你应该先弄清楚可以支持哪些功能

在使用 WebXR 之前 你要做的第一件事 就是确保可以启动会话 你可以使用 Navigator.XR 对象中的 isSsessionSupported 方法 来检查是否支持沉浸式 VR 会话

接下来 如果支持 VR 就可以添加一个按钮 让用户进入 XR 你所选择的库很可能负责请求会话 但我们还是要看看 请求会话是如何工作的 因为请求会话有一些有趣的选项 当你请求会话时 你可以加入任何你想要的附加功能 例如手部追踪 请求会话会触发一个弹出对话框 用户可以选择是否允许会话 功能列表共有两个 如果是可有可无的功能 就把这个功能放在可选功能列表中 如果是构建时绝对不能缺少的功能 就把这个功能放在必备功能列表中 但请注意 如果因为不受支持 或用户拒绝访问 而无法提供任何必备功能 那么你的会话请求将被拒绝 因此 请尽可能使用可选功能 一旦开始会话 就可以请求参考空间 参考空间描述了坐标系的原点 本地地面非常常用 用处很大 因为场景的原点 就在用户的脚边 非常适合站立体验

我们暂时离开 WebXR 在网页中制作标准动画时 应使用窗口的 requestAnimationFrame 这是为了在窗口上的下一帧 将要渲染时 获得回调 你需要对这个帧进行你想要的更改 然后再次调用 requestAnimationFrame 以将下一帧的操作排队 这就是所谓的帧循环 WebXR 的帧循环非常相似 但与驱动体验的电脑相比 典型的 XR 设备 具有不同的帧定时

网络浏览器通常 以每秒 60 帧的速度运行 WebXR 的运行速度要快得多 因此 WebXR 会话在会话上 提供自己的 requestAnimationFrame 它与 WebXR 显示屏同步 而不是与窗口同步 在这里 我们通过立即 请求下一帧来 建立我们的帧循环 从而再次调用这个函数 你对 WebXR 最感兴趣的 信息可能 是各种追踪对象的数字位置 XR 没有全局坐标系 相反 所有位置都是参照 我们在开始会话后 所请求的参考空间给出的位置 在控制器等 WebXR 空间中 targetRaySpace 代表位置但没有数值 数值位置称为位姿 其中包含下一帧时的实际坐标 你可以将它用于交互和渲染

你可以使用框架上的 getPose 方法来获取这些位姿

会话可以在开发者 调用方法结束会话时结束 也可以在用户请求浏览器 自行结束会话时结束 例如 在 Vision Pro 上按下数码旋钮 会话结束时 无论因何原因结束 都会触发结束事件 让你知道这时 可以重新显示按钮以 再次进入 WebXR 我们刚刚从头到尾了解了 WebXR 让我们再仔细看看会话 期间发生了什么 因为除了常规的动画帧外 还有一些有趣的事件 可以帮助你处理空间输入

传统的 XR 头显都有硬件控制器 这些控制器和按钮一样 也会在 3D 空间中得到追踪 以便你知道位置和方向 有些还使用手部追踪 手部追踪输入包含有关 用户手部动作的信息 这些信息足以让你 为用户的每只手制作 3D 动画 这些输入在 WebXR 中称为 追踪指针

VisionOS 具有自然输入功能 自然输入功能结合使用注视和 手指捏合来与虚拟内容进行交互 我们与 W3C 合作 为 WebXR 添加了 对这种输入类型的支持 在 WebXR 中 这些输入 称为瞬时指针 因为它们只在用户做出手势时存在 XR 会话包含所有输入源的列表 你可以遍历这些输入源

XR 输入源代表某种空间输入法

每个 XR 输入源 都有一个目标光线空间 如果沿着负 Z 方向画一条线 就表示 XR 输入源指向的 目标光线空间 对于瞬时指针来说 这个空间 从用户眼睛延伸到 他们正在注视的对象 输入也可能有一个握持空间 表示握持位置 对于瞬时指针 这代表拇指和其他手指交汇的位置 瞬时指针输入不太常见 只在交互过程中存在

交互开始时将触发一系列事件 添加或移除输入时 会触发 inputsourceschange 而 select 事件用于描述选择操作 我们来逐一了解一下当用户 在 visionOS 中捏合时 WebXR 中会发生什么

最初 什么输入都没有 网站不知道我在注视什么 也不知道我的手在做什么 然后 我把拇指和手指捏在一起

这时将创建一个新输入并添加到 会话的输入源列表中 它的目标光线模式告诉我们 这是一个瞬时指针

于是触发 inputsourcechange 事件 告知我们 列表已经更新 这个新输入已经添加

紧接着 输入上还触发一个 selectstart 事件 因为我们正在进行选择 接下来 我稍微移动一下手

但没有新事件发生 即使握持空间和目标光线空间 所代表的位置得到更新 握持空间仍会追踪 我的拇指和手指接触的点 目标光线空间不会持续 追踪我的视线 而是仿佛附在我的手上一样移动 让我可以在初始捏合后 通过移动手部来调整光线

这时将触发 select 事件 告知我们手势已成功完成

无论手势是否成功完成 selectend 都会告知我手势已结束 拥有两个事件尤其适用于 松散追踪输入或 中途通过操作取消的情况 在用户成功确认某项操作后 使用 selectend 进行清理 并使用 select 来完成要执行的操作 最后 删除输入 这时将触发一个新事件 告知你输入源列表已经改变

现在我们不再捏合 我们又回到起点 没有输入 网站也不知道 我的手或目光在做什么

好了 我们现已逐步了解了相关信息 我们再来看下刚才的国际象棋演示 看看发生了什么

一开始 网站不知道我在注视什么 也不知道我的手在哪里 这很好地保护了我的隐私 而且网站 在什么也不知道的情况下 仍能提供出色的体验

我要移动这颗棋子

我注视它 然后将 手指和拇指捏合在一起

在我捏合的一瞬间 就会创建一个新的输入 并在捏合点生成握持空间 targetRaySpace 从我的眼睛朝向棋子 这时将触发 selectstart 事件 这个事件包含对帧和输入源的引用 这是找出我正在 注视的对象所需的一切 网站使用光线投射器来 选取我注视的对象

每一帧 体验都会 移动这个对象并在 移动手时与目标光线空间同步 请注意 棋子并没有跟着我的视线 移动 而是随着我的手移动

然后 我把棋子放在我想要的位置 然后做出松开手势 这时将触发 selectend 事件 并且网站 将我的棋子放在最近的方格上 输入移除后 网站不再知道 我的手在做什么 也不知道我在注视哪里

我已经深入探讨 没有手部追踪时的情况 无论我们的 visionOS 是否也支持手部追踪 你都必须在开始会话时 请求这个功能 如果你请求并获得手部追踪功能 那么任何检测到的 手都会添加为可用的 追踪指针输入 只要可追踪这些输入 就可以使用它们

这个输入有一个带关节空间的 手部对象 因此你可以 使用 WebGL 随心所欲地 显示用户的手部 你确实要这样做 因为如果 用户看不到自己的手 就会非常不舒服

是否启用手部追踪功能 其中最大的区别可能在于 如果你请求手部追踪功能 你就需要 自己用 WebGL 绘制用户的手部 但如果没有手部追踪功能 我们就会显示用户真实的手部 启用手部追踪后 瞬时指针输入仍然可用 在 visionOS 上 所有选择事件 都与瞬时指针输入相关联 因此 你可以同时使用手部追踪 和自然输入来构建体验

这就意味着 如果你请求手部追踪 而用户又同时用双手捏合 那么你可能同时拥有多达 4 个输入

这就是手部追踪的功能 这项功能对于精确的近距离 交互非常有用

但使用手部追踪进行一定范围内的 动作时 要精确执行可能会有些棘手 在这个示例中 我利用 两根手指的接近度 通过把手拿起物体并移动 为此 我必须比较指尖之间的距离 并确定中心点是否与把手相交

你可以使用瞬时指针进行近距离交互 也可以与物体进行远程交互 启用手部追踪功能时 瞬时指针仍然可用

瞬时指针和手部追踪功能非常酷 但网络上还有很多 令人兴奋的功能可以使用 尽管在 WebXR 过程中文档是隐藏的 你仍然可以访问 在构建传统网站时使用的 许多标准的网络 API

这些功能与 WebXR 的配合 尤为出色 除了 WebXR 特有的输入外 你还可以使用 传统的游戏路径 如 PlayStation 5 控制器 这款控制器的按键和模拟摇杆 对驾驶小型 VR 车辆可能非常有用 语音合成和语音识别 对于构建语音界面非常有用 只需说出命令就能执行操作 并听到回复 氛围感音频和音效是与出色的 立体声搭配的最重要要素之一 网络音频 API 的 panner 节点非常适合构建 空间音景 以获得真正的沉浸式体验 当对象发出的声音 似乎来自这个对象本身时 确实会增加沉浸感 现在我们介绍了 WebXR 让我们来看看如何在 visionOS 上 进行具体的测试和调试 在测试内容时 你可以使用真正的 Vision Pro 也可以用 visionOS 模拟器 在本例中 我们将使用模拟器 WebXR 需要使用安全上下文 且除了 HTTPS 网站外 另一个安全上下文就是 开发机器上的本地主机 这里 我已经运行前面的 国际象棋演示的 HTTP 服务器 我可以打开页面并测试这个 用于启动 XR 会话的按钮 我可以使用 WAS 和 D 键 在 3D 空间中移动 我可以通过右键点按和拖移 来旋转摄像头 在 WebXR 过程中点按窗口将 模拟瞬时指针输入

请注意 你无法通过模拟器 测试手部追踪 因此 你需要一台真实设备 我在这个页面上设置了 一些日志记录来帮助我了解性能 我可以了解当前帧速率 和绘制调用的次数 我们可以使用 macOS Safari 浏览器中的网页检查器 来检查这个页面 以确保页面工作正常

这个页面可在开发菜单中查看 这里 我可以看到我的日志 还可以检查、暂停和逐步 浏览 JavaScript 就像浏览本地网页一样

在构建体验时 我主要使用 模拟器进行快速迭代 然后 我会将更改推送到服务器 并使用真实设备来验证我的更改

你可以在这篇 WebKit 博文中 找到更多 关于在 visionOS 上 调试和测试的信息 希望这能帮助你准备好 为 Vision Pro 构建 WebXR 体验 即使你还没有设备也没关系

另外 你还可以观看 Patrick 的 WWDC23 讲座 “重新发现 Safari 浏览器的开发者功能” 全面了解 Safari 浏览器开发者工具 WebXR 是 Apple 平台的新功能 目前仍处于早期阶段 我们非常期待看到你 构建出的 WebXR 内容 并希望你未来继续关注这些发展

即使你没有 Vision Pro 模拟器也是确保 你的 WebXR 项目与 visionOS 和新的瞬时指针输入 配合使用的好方法 如果你以前从未尝试过 WebXR 我鼓励你亲自尝试一下 WebXR 和 WebGL 社区 庞大而活跃 提供大量资源 可以帮助刚刚 接触图形编码的开发者入门

请查看与本次讲座相关的资源 并观看相关讲座 感谢大家参加今天的讲座 希望大家喜欢 WWDC