探索 visionOS 中的沉浸式网站环境

Bonjour，我是 Jean，我是 visionOS Safari 团队的工程师。 在本节中，我将向您展示如何通过 沉浸式环境来提升您的网站体验。 这是一种全新的方式。 向您的观众讲述故事， 并以前所未有的方式 吸引您的客户。 以这个票务销售网站为例。 当访客选择座位时， 他们会看到所选内容的 内嵌预览。 不仅如此， 他们还可以进入剧院， 作为一个沉浸式环境， 并亲身站在他们选择的位置。 而这一切都来自 Safari 中的一个网页！ 这是我今天将向您展示如何构建的 体验之一！ 但不仅仅只有这一个…… 看看这个。 这是一个 visionOS 密室逃脱游戏应用 的营销网站。 将访客带入游戏中的 某个密室—— 一个昏暗的房间，电视屏幕上 播放着一段神秘的视频。 随着视频播放，它会邀请访客 去发现这扇门后面是什么， 鼓励他们下载应用 亲自探索答案。 在接下来的几分钟里， 您将学到构建 第一个网站环境所需的一切知识。 我将首先为您提供 网页沉浸式 API 的高层概述。 然后，我将介绍如何在 页面中内嵌预览环境。 之后，我将向您展示 如何进入沉浸模式 并从内嵌预览进入剧院， 以及密室逃脱游戏。 最后，我将指导您如何通过 视频、动画和阴影投射 来优化您的体验， 同时保持出色的运行时性能。

好了，让我来介绍 这个沉浸式 API。

一切从 HTML model 元素开始， 它允许您在网站上 显示 3D 模型。 要使用它，您需要指定 您的 3D 资产资源。 这里是一个表示茶壶的 USDZ 文件。 以及可选的环境贴图。 这是一张 360 度图像， 用于捕捉场景周围的光照。 使用环境贴图， 您可以添加戏剧性的反射 和光照，使茶壶等 有光泽的物体更逼真。 3D 模型和环境贴图资产 可以通过多种工具创建。 我稍后将在本节中使用 Blender， 但您可以使用任何 能导出 USDZ 文件的工具。

如果您之后想进一步了解 这个 HTML 元素， 可以查看讲座 "Get started with the HTML Model Element"， 该讲座深入介绍了该元素本身 及其在所有平台上的行为。 现在，让我们进入沉浸式部分！ 如果您熟悉 JavaScript Fullscreen API， 您会感觉如鱼得水。 如果您不熟悉， 您很快就会熟悉， 因为沉浸式 API 遵循 已被广泛使用的 Fullscreen API 模式。 就像您通过 requestFullscreen JavaScript API 请求视频全屏一样， 您通过 requestImmersive JavaScript API 请求 model 元素进入沉浸模式。 非常相似地， 您可以退出沉浸式呈现， 检测功能是否可用， 检查当前是否有沉浸式元素， 监听状态变化， 以及错误事件， 甚至可以直接在样式表中 通过 CSS 伪类自定义布局。 但与 Fullscreen API 不同， Fullscreen API 会用所提供的元素 替换网页内容， 而沉浸式 API 会将 model 元素带到 浏览器边界之外， 同时保持页面可见。 两个 API 可以同时激活， 因此您可以拥有全屏视频播放器 同时沉浸在虚拟环境中。 我觉得这个 API 最美妙的地方在于， 我既可以非常简单地使用它—— 只需对 model 元素 发出一次请求调用， 也可以充分利用其深度， 与其他 API 结合 创造出令人惊叹的体验。 就像我之前向您展示的 那些沉浸式网站， 我现在就深入探讨它们。 从票务销售网站开始， 它提供了环境的内嵌预览。

内嵌预览是向访客 介绍环境的好方式， 作为第一步。 所以我现在来展示 如何创建一个引人注目的预览。 这是我的网站， 在模拟器上本地运行。 当访客选择座位时， 这个 model 会出现， 但我目前把它留空了。 我想在里面添加内嵌预览！ 所以，在这个空的 HTML div 中， 我将添加 model 元素。 我提供剧院 model 的 USDZ 文件 及其光照贴图。

内嵌预览现在 从外部显示整个剧院 model。 这是因为默认情况下，model 会缩放以适应元素的边界。 在这种情况下， 这不是一个很有趣的视角， 我们更希望 从内部展示剧院！ 所以，为了消除这个 默认适配行为， 我需要自定义实体变换—— 它控制 model 的 位置、旋转和缩放。 在我的代码中， 获取 model 元素后， 等待它加载并就绪， 我创建一个单位矩阵。 并将其设置为 model 的实体变换。 这有效地移除了 model 的 所有变换。 现在 model 的地板 位于图层的中心。 这是因为剧院 model 的 原点在其地板上。 但这里的目标是在 人眼水平高度展示环境。 所以，我将 model 向下移动 1 米， 这是我室友坐在 普通椅子上的测量眼部高度。

效果好多了！ 但现在， 这显示的是从舞台看的视角。 老实说，看起来相当不错， 但我希望预览的视角 与实际的座位选择相符。 为此， 我创建了一个 JSON 文件， 将每个座位映射到其在剧院中的位置。 每个条目包含 从 model 原点到座位底部的平移， 以及座位底部， 以及一个表示座位朝向舞台 方向的角度。 这些值用右手 Y 轴朝上 坐标系表示， 这是网页上使用的惯例。 回到我的网站代码， 我创建了一个新函数 专门用于构建正确的变换。 它目前包含在眼部水平 预览 model 的平移。 现在我可以将当前 选中的座位作为参数添加进来。 并应用相应的座位旋转， 以及平移来匹配 座位的视角。 就是这样——当一个座位被选中， model 显示的正是 从该座位位置看到的视角。 这个内嵌预览也可以在 其他平台如 macOS 和 iOS 上使用！ 我认为这已经是 一个非常好的体验了。

但真正的魔力现在才开始， 当购票者可以 进入剧院内部！ 这就是我们释放 空间平台全部潜力的地方—— 比如 visionOS，让我们进入沉浸模式！

首先，我检查 沉浸式 API 是否可用。 这个属性告诉我当前 浏览器是否支持沉浸式呈现。 确认之后，我可以自信地 显示我的"沉浸式预览"按钮， 它只会在 实际支持该功能的地方出现。 然后，我想在 model 上 请求沉浸式过渡。 这必须在响应 用户交互时发生。 在我的情况下， 是点击沉浸式按钮。 现在，有一件重要的事 需要注意，内嵌 model 和沉浸式 model 有不同的参考系。 它们有不同的原点 和不同的比例。 内嵌时，正如我刚才向您展示的， model 元素的原点 在内嵌图层的中心， 比例遵循 CSS 惯例。 但当处于沉浸模式时， 原点在人的脚下，在地板上， 比例与真实世界相符。 此外，请记住 沉浸式环境 将从 Safari 窗口后方打开。 所以尽量让 model 的主要焦点 保持可见， 而无需重新定位窗口。 对于我的用例， 回到构建变换函数中， 我添加了第二个参数， 让我知道 model 是否以沉浸式方式显示， 还是内嵌在页面中。 处于沉浸模式时， 我添加一个轻微旋转， 使舞台—— 这是我这里的主要焦点—— 不被 Safari 的窗口遮挡。 此外，我确保 眼部水平平移 只在将 model 内嵌 呈现在页面中时执行。 现在，因为实体变换取决于 model 的沉浸状态， 每次 model 进入和退出 沉浸模式时都需要更新它。 监听沉浸状态变化事件 是在 model 元素上 执行此操作的正确方式。 在这里，我检查当前 文档的沉浸状态 并用正确的标志 重新计算实体变换。 而且，在这里， 我也会更新页面布局 以反映当前状态。 在我的情况下，进入沉浸模式时， 我在调整 model 界面， 并显示退出按钮。 为您的沉浸式体验 提供清晰的退出入口 始终是个好主意。 但也请记住， 使用 Apple Vision Pro 的访客 可以随时使用数字表冠 来退出沉浸式环境。 这就是为什么， 如果您的 UI 依赖于沉浸状态， 监听沉浸状态变化 至关重要， 并相应地更新您的布局。 就这样， 我构建了一个体验， 将购票者传送到 剧院内部， 坐在他们选择的那个座位上。 他们可以环顾四周， 查看舞台的视角， 俯身探出阳台…… 哇！这相当高， 您可不想从那里掉下去。 一定要抓好安全栏杆…… 什么？！ 这里的安全栏杆 怎么了？ 哎..抱歉，我跑题了。 这个体验沉浸感太强了。 好了，让我们换个方向， 深入探索一些 稍微更神秘的东西。 假设您构建了一个 visionOS 密室逃脱游戏应用。 您花了很多时间 为这款游戏打造令人难以置信的环境。 好了，利用沉浸式 API， 您可以使用那些相同的环境 model， 创造一个难忘的 营销体验， 直接从您的网站，在 Safari 中。 让我向您展示我是如何构建的。 令我惊讶的是， 只需要很少的代码。 在这里，虽然 model 元素可以轻松 创建内嵌预览， 但我更愿意保留惊喜。 在 HTML 代码中添加 model 元素时， 我简单地将 display 设置为 none。 这样做， 将内嵌图层从页面中隐藏， 但不妨碍我 将 model 请求为沉浸式。 这样隐藏内嵌预览 还有一个实际好处。 事实上，资产不会 被下载或解码， 直到沉浸式请求 实际发生时。 对于较重的环境 model， 如果访客实际上 没有进入环境， 这可以节省大量 带宽和内存。 接下来要做的，就是简单地 在按钮点击事件时 请求密室 model 进入沉浸模式。 由于 model 没有预先内嵌加载， 沉浸式请求可能需要一点时间。 特别是对于更重 和更复杂的资产。 我稍后会向您展示 如何通过优化资产 来减少这个加载时间。 但目前， 我至少会给访客反馈， 让他们知道正在发生什么， 配以一个引人入胜的加载动画。

在代码中，我在沉浸式请求前 显示它， 完成后隐藏它。 进入环境的方法 大致就是这些！ 非常简单！

好了，现在我来介绍这些功能， 让这个密室在 visionOS 上 活灵活现。 所有这些小细节， 让一个简单的体验大放异彩。 我将从视频开始。 不再是让视频 内嵌播放在您的网站上， 视频停靠功能会提升您的视频， 并将其直接放置在 环境内部， 放在电视屏幕、 投影仪或广告牌上， 任何最适合您故事的表面。 此外，您可以添加 能够漫射的材质， 或反射来自视频的光线。 使其感觉像场景的一部分。 要创建这种体验， 您需要向 USDZ 文件添加 一些自定义 RealityKit 注释。 这些目前还不是标准， 但我是 Blender 的忠实粉丝， 所以我制作了一个小插件 来添加这些组件， 直接在创建环境时使用。 在这里，我使用它来标记电视屏幕， 作为我场景的 视频停靠区域。 我也使用这个 同样的 Blender 扩展 来帮助烘焙视频 灯光溢出到我的材质上。 现在，一旦我导出了 带有这些新属性的资产， 接下来要做的就是 请求视频进行全屏过渡。 在这里，我在 demoButton 的点击时 请求此操作。 这会自动将视频 传送到环境中的正确位置， 并隐藏 Safari 的窗口！ 视频完全融入了环境中。 电视的光线 溢到地板和墙壁上， 显著增强了空间的真实感。 现在，来个转折， 让我展示如何让 这扇神秘的门滑开。

我在 Blender 中创建了 这个开门动画， 就在导出 model 之前。 所以真正剩下要做的， 就是在正确的时机播放它。 通过这几行代码， 我监听视频的 ended 事件， 然后退出全屏视频， 这将取消停靠视频 并恢复网站。 最后，播放 model 动画。 就是这样，房间变换， 门滑开， 谜题不断深化。 Model 动画可以非常强大。 您可以创建 完整的动画时间线。 您可以使用 model 的 currentTime 属性 在时间线中导航， 并通过多个阶段 改变您的环境。 如果您想了解更多， 我建议您查看讲座 "What's new for the spatial web"， 它深入探讨了这些可能性。 好了，让我们再享受 一件有趣的事。 我想向您展示 Safari 窗口 如何在环境上投射阴影。 我个人认为这个 细节非常重要， 因为这个阴影帮助人们理解 窗口在空间中的定位， 让它感觉像是 环境的一部分。 启用此功能同样需要 一个 RealityKit 注释。 在这里，使用同样的 Blender 扩展， 我将应接收这些阴影的网格 标记为 Scene Understanding 组件。 我确保创建了一个专用的 低多边形网格，专门为此优化， 因为在复杂网格上计算阴影 会消耗大量资源。 好了，现在我将以 关于性能的简短说明结束本节。 环境 model 往往更重 且更难渲染， 相比简单的物体 model。 让我向您展示如何 优化您的资产， 使其渲染更流畅 且下载更快。 首先，减少资产的顶点数量。 在我的密室中，我确保 不导出任何网格， 这些网格对站在原点的 观察者来说是不可见的。 这样，我大幅 减少了顶点数量， 而没有人会注意到。 然后减少实体数量。 在我的情况下， 我将桌子及其所有装饰合并， 以避免有太多 独立的实体。 在适当时使用低多边形网格。 就像我用于 Scene Understanding 组件的那个， 以低成本实现阴影投射。 保持着色器尽可能简单。 对于密室，我将 所有光照烘焙到材质中。 这意味着我将光线和阴影 绘制到纹理上， 使我能够将它们设为无光照材质， 并在运行时跳过 繁重的着色计算。 最后，使用 usdcrush 工具 压缩您的 USDZ 纹理。 它在任何 Mac 上 都以命令行工具的形式提供， 可以帮助您相当大幅度地 减少 model 的大小， 这直接转化为 更快的加载时间， 对于连接较慢的用户。 我建议查看 WWDC 讲座， "Optimize your custom environments for visionOS"， 它深入探讨了 3D 资产优化。 好了，我们来到了这里。 您现在可以创建 自己的体验了。 将您的客户带入 您的环境中。 只需一个 model 元素 和几个 API 调用， 您就可以重新定义访客 与您网站互动的方式。

而我这里只是浅尝辄止。 还有许多其他 API 可以结合使用， 为您的网站带来 沉浸式维度。 其中之一是图像控件 API。 只需在我的图像元素上 添加 controls 属性， 浏览器就会提供原生控件。 为平台特定功能 提供相关用户界面。 比如在 visionOS 上， 这允许用户将这张全景图设为全屏， 将其环绕在他们的空间周围。 这也适用于空间照片。 可以直接从您的 Apple Vision Pro 或 iPhone 拍摄。 就像 model 元素 和沉浸式 API 一样， 使用图像控件， 代码中的一点小小改动 就能带来巨大的效果。 创意是唯一的限制。 以下是我鼓励您接下来做的事。

在 webkit.org 上使用 Apple Vision Pro 试用在线演示， 没有比这更好的方式 来理解功能的影响， 胜过亲自体验它。 创建您的第一个网站环境。 我已为本节附上资源 以进一步帮助您， 例如 API 规格， 来查看吧！ 最后，在您构建自己体验的同时， 请在 bugs.webkit.org 提交 功能请求或错误报告。 哦，还有，请查看这个讲座 名为 "Design immersive environments for visionOS apps and the spatial web"。 它探讨了高层原则， 即创造出色 照片级真实感环境的原则。 我个人将期待看到 您将创造出的沉浸式体验。 非常感谢您 参加本节， 希望您喜欢！