针对空间网页进行优化

大家好！我是来自 Safari 浏览器团队的 Brandel 我想和大家谈谈 如何在 visionOS 2.0 上 为 Safari 浏览器 打造最引人入胜的体验 如今 你可以在你能想到的 任何平台或设备上浏览网页 这是世界各地许多团体几十年来 努力将网络标准的理念 付诸实践的成果 让创作兼容各种平台的内容 变得更加容易 但是当全新的计算方式问世时 我们既有机会也有责任 充分利用新平台带来的各项功能 扩展现有的网页功能 Apple Vision Pro 正需要这样的时刻 今天我要介绍的功能有一些是新的 有一些已经问世一段时间 但这一切都由于空间计算的功能 而被赋予了 新的意义 首先 我将介绍 在这个平台上的交互方式 在 visionOS 中 自然输入包括眼睛、手和声音的结合 接着 我们将介绍你们有机会提供的 沉浸式视觉和音频内容 你可以通过多种新方式来 提供空间照片和全景照片 以及丰富的 3D 模型、空间音景、 和身临其境的虚拟现实 最后 我们将进行检查和调试 来完成闭环 以帮助你完全按照自己的方式 对方方面面进行精细调整 更好地适配这一激动人心的新平台 为了把要点阐述清楚 我会将这些功能 添加到我维护的一个粉丝网站中 这个网站叫“Circular Cyclist” 介绍了 Apple Park 周边的自行车和自行车道 但请放心 我今天所介绍的一切 既适用于我这样的小型社区网站 也适用于大型的商业网站 现在 我们第一点先讲交互功能 你可能记得 visionOS 1 引入了自然输入功能 你可以用眼睛来定位某个 App 或网页的交互区域 然后双指互点进行交互 当用户注视这些区域时 它们会以柔和的高光显示 这种交互区域对网页来说 并不是一个新的概念 从一开始它们就是网页的一部分 当你将光标移动到一个链接上时 你所看到的那个形状就是交互区域 但尽管它们一直很重要 可那些区域本身通常不会显示 光标和悬停事件的变化 为用户提供了足够的反馈 让他们能够放心地操作

为帮助用户定位 visionOS 会直接显示 交互区域的形状 系统会绘制高光区域 而且仅在用户注视相应元素时才显示

同时 为了保障 Apple Vision Pro 每位用户的隐私 目光所及之处始终保持私密 这些高光效果是由 Safari 浏览器之外的一个程序绘制的 就连浏览器也不知道用户在注视哪里 和早期比起来 网页已经有了长足发展 所以我们来把它更新到最新状态吧 如今 用户往往使用移动设备 来浏览大部分网页内容 这说明 用户的常见操作是轻点 而不是点击 但这也意味着我们要把轻点目标 也就是交互区域 做得足够大 以便用户正确地选择 即使不想改变背景色 你也可以考虑为所有链接 增加一点内边距

对于 Vision Pro 你可以对高光形状进行圆角处理 使它与你网站的外观相匹配 这将确保用户可以 将目光停留在较大的区域上 同时又不会被尖角 或其他特征分散注意力 请注意 这些甚至不需要 在你的 DOM 中 通过背景颜色或边框粗细展现出来 它们只是一种提示 用来突出可与内容交互的区域 虽然这涵盖了大部分的网页案例 但这并不能面面俱到 在“Circular Cyclist”网站上 自行车安全检查单这部分采用了 一个略微不同寻常的导航设计 光标悬停在每个自行车部件上时 会显示出这个部件的轮廓 以展示注意事项

此外 在 visionOS 2 中 你可以构建复杂的交互区域 这些区域由相同的 SVG 路径 指定 以便实现更精细的控制 我来演示一下具体方法 帮我在 Mac 上实现 悬停效果的 SVG 同样可在 visionOS 中 设置交互区域 而且是以叠加方式绘制这一区域 请记住 模拟器中的光标 代表的是在 visionOS 中 你所注视的地方 因此 将光标移到自行车部件上时 那并不是 Safari 浏览器的悬停效果 而是一种保护隐私的高光效果 这种高光效果可 与操作系统的其他部分协调配合 虽然这种视觉效果貌似不易察觉 但它会在你视线所及之处显示 因此会更容易被注意到 交互区域的下一项改进 针对的是那些 还包含大型媒体内容的链接 例如视频或图库的缩略图 因为持续的高光效果 可能会分散注意力 所以媒体内容的高光效果 会相对没那么明显 它会在几秒钟后逐渐减弱 以便你的用户能够 以预期的方式查看内容 这是我的图库 其中有大幅的图片缩略图 光标停留一阵后 高光效果会消退 让内容能被清晰地看到

为了充分利用媒体交互区域 请确保你的锚标记或其他交互元素 确实包含了媒体 这样就不会有问题了 接下来 你可以用几种不同的方式在平台上 用语音进行输入： 就像在 iOS 和 iPadOS 上一样 你和你的用户可以 在任何文本字段使用语音输入 只需轻点与键盘一起弹出的 麦克风图标就可以了 但有一种工具 还可以助你 进一步提升灵活性 那就是 WebSpeech API

这项网页标准还在提议阶段 支持通过 SpeechRecognition 接口 来实时回复语音 甚至可以通过 SpeechSynthesis 接口 用你自己的语音进行回复 因为 Safari 浏览器 是在本地完成相关处理的 所以无需从设备端发送数据来实现 即使你对 Web Speech 已经很熟悉了 我觉得你在 Vision Pro 上 还是会很喜欢它的 我刚好可以用它来制作一款 我一直想做的游戏： Bike!Color!Shout! 玩家可以说出自己猜测的 8 位像素虚拟园区中 最新的自行车颜色流行趋势 从而掌握园区的时尚潮流趋势 比起利用文本字段来实现语音输入 我更希望玩家的眼睛 一直盯着游戏中的动画 我可以把 SpeechRecognition 用作完全独立的输入通道 而无需任何人轻点或点击任何内容 我们来看一下代码： 首先我创建了一个新的 SpeechRecognition 对象 在 Safari 浏览器中 那需要加上 webkit 前缀 但它遵循标准实现方式 我大部分的工作都是它来完成的

为了读取它的结果 我注册了一个处理程序 来侦听结果事件 当我获取到事件后 它会有一个 resultList 包含 目前识别器识别到的所有代码片段 我选择最后一个 在那个结果里 有多个语音识别备选方案 我选择第一个 每个备选方案里面包含的 就是转录结果 这就是我将在游戏中使用的内容

对于这款游戏 我不打算进行 任何复杂的逻辑处理 所以只需针对我要查找的颜色名称 进行基本的字符串搜索 就可以了

侦听到正确的事件后 我就启动识别器 这需要在用户事件上进行 例如轻点或点击 而且会显示一个权限提示 需要获得用户的同意 所以 一定要让用户知道 为什么需要 麦克风输入权限 设置好之后 这个部分就准备就绪了 接下来我们来设置反馈

我希望能在游戏结束时向用户 大声地公布最终分数 这可以通过 SpeechSynthesis API 来实现 用你希望语音朗读的文本构建 SpeechSynthesisUtterance 对象 然后传递给 speechSynthesis 对象 让它将文本朗读出来 和 Speech Recognition API 一样 没有数据会离开设备 而且这一切都是免费的 没有需要管理的 API 密钥或账户 我们来看看实际的效果吧！ 我们会看到一个倒计时画面 然后我们得在自行车驶过去之前猜测 自行车的颜色次序 授予麦克风权限后 我就可以进行猜测并查看结果了 我猜次序是： 粉红色、橙色、绿色、紫色 噢 好吧 Apple Park 所有的自行车都是银色的 虽然这款游戏能够真实反映 园区今天和每一天的情况 但考虑到实际情况 或许我需要 重新考虑一下这游戏的设计 这也兼容各系统上的 Safari 浏览器 比如 Mac、iPhone 和 visionOS 但我真的很喜欢在平台上使用语音 而且这两个 API 与我们稍后 将介绍的一些更具沉浸感的功能 非常契合 Web Speech 还有 很多值得探索的地方 所以请查阅 MDN 上的 “Web Speech API”文档 以获取更多详细信息和灵感 现在你已经了解了自然输入 交互区域现在更加灵活 且能感知内容了 而语音输入是能为你的体验 增添更多精彩的一种绝佳方式 现在让我们转换一下话题 探索你和你的用户 使用 Apple Vision Pro 能够在网页上看到和听到的内容： 沉浸式媒体 Vision Pro 兼具 精细显示与空间真实感 使得这个平台成为了一种思维工具 如果你愿意的话 可以把它当作心灵的自行车 我们先来了解空间照片 虽然空间照片如果设置得当 能够带来令人惊叹的体验 但如果设置不当 它看起来 就会非常怪异和失真 在开发平台的过程中 我们发现空间照片需要很谨慎地展示 这样呈现的效果才能带来出色体验 而不会令人不适 为了方便你进一步了解 我们来看一下 visionOS 中的“照片”App 当我们查看整个照片网格时 即使是空间照片 也会显示为 2D 照片 只有当它单独显示且居中时 我们才能看到空间视图 当我移动时 你还可以看到 照片显示在传送门的稍后方 并且照片的内容和我场景的其余部分 通过羽化的边缘进行融合 当我放大照片以查看完整视图时 羽化的效果仍然存在 我们可以看到照片的更多细节 而且它真的很大 空间照片 以拍摄那一刻的真实比例显示时 效果是最好的 这里显示的正是用 Vision Pro 拍摄时的原始比例 这就是说 虽然空间照片会带来令人惊叹的体验 但我们觉得最好还是 让空间照片以真实的尺寸 单独居中显示在用户的视野中 因为你的用户可以将 他们的 Safari 浏览器窗口 缩放为任何大小并放到任何位置 这就为在一个网页页面中 提供出色的空间照片体验带来了难度 我们希望你能够 以对用户最具影响力的方式 来分享你的空间照片和全景照片 幸运的是 在这方面 已经有标准化的网页解决方案了 我们认为这是解决 这种情况的一个好办法： Element Fullscreen API 在特定屏幕 例如 Mac 或 iPhone 上全屏显示 意味着你的 App 是 唯一显示到屏幕上的内容 而 Element Fullscreen 则意味着只有那一个元素 在使用整个屏幕 开发者们经常用它 来实现自定控制、视频回放等功能 但我们认为它也非常适合 满足空间照片的需求 Element Fullscreen 可将你通过 Safari 浏览器 访问的媒体以一种独占模式视图呈现 与“文件”和“照片” App 中的那种视图效果一样 而无需下载照片然后再单独打开 由于整个空间都可以利用 因此 visionOS 可以 以照片的正确视觉比例显示图片 让照片位于用户视野的中心 你可以通过对元素 使用 requestFullscreen 方法 来开始构建 因为全屏对用户环境来说 是一个很大的变化 因此它需要通过用户事件来调用 例如轻点或点击 用户还可以使用主屏幕手势 或按下表冠按钮来随时取消全屏 你也可以使用 document.exitFullScreen 方法来进行调用 下面将这种功能引入我们的页面 然后来看一下结果 我在页面中直接使用了空间图像文件 它将会以单眼视图显示 通过使用 source-set 来指定正确的文件类型 我还可以为任何 尚不支持这个格式的浏览器 提供一个后备图像 接下来 我会获取 这个图像的点击事件输入 并使用这个事件链 来请求这个元素全屏显示 确保在出现错误时我能妥善处理

具体效果如下所示 一旦我选定了我想要的图像 只需轻点一下 就会显示在“照片” App 中看到的那种羽化传送门视图 然后轻点沉浸式按钮 我就会进入独占视图 可以全尺寸查看图像 无需请求任何权限 或下载任何其他 App 全景照片也是一样的道理 我们来看一下它们在 “照片”App 中是如何显示的 我们看到在全景照片的窗口里 它们是以平面视图显示 我们选择一张全景照片来放大查看 然后轻点沉浸式按钮 以全尺寸查看它

全景图可以从任何具有足够大维度的 文件格式中启动 只需以同样的方式使用点击事件 来请求全屏显示这个元素就可以了

流程都是一样的 轻点进入全屏视图 然后轻点进入沉浸式视图 来环绕式显示 全景照片 无需进行任何下载 也无需 任何额外的用户权限 这是将内容传递给 尽可能广泛的受众的绝佳方式

当我们查看空间媒体时 你还可以直接在 Safari 浏览器中 向访客展示完整的 3D 对象 使用“快速查看” 来查看 3D 模型文件 3D 素材本身是一个独立的世界 但它们都有一些共同点： 从大制作电影到手机游戏 模型定义了大量表面的 3D 位置 以及这些表面的材质 以便它们可以绘制 或渲染到你需要的任何场景中 尽管制作 3D 素材要比拍摄照片 复杂一点 但你无需成为 这方面的专家也能使用它们 你仅使用手机 运行例如 “Reality Composer”之类的 App 就能进行对象捕捉 制作出精美的 3D 模型 你也可以使用 你在网上购买或找到的模型 而如果它们碰巧是别的格式 现在 Mac 的“预览”App 就内置了转换工具 “Circular Cyclist”中有一个 Apple Commuter 自行车的 “快速查看”模型 我可以把它放在我的房间里 提醒自己保持活力 以真实比例看到自行车 是一种有形的提醒 能让我想起去户外骑行的感觉 同时又不会打扰同事 也不会增加在办公空间里 绊倒的潜在危险 而这只需不到一行代码就能实现 只需一个属性 来让用户在 visionOS 中 用“快速查看”打开模型 使用和 iOS 和 iPadOS 上的 AR 快速查看一样的语法 通过使用 rel=ar 来让链接指向 USDZ 模型文件 你网站的访客即可打开这些对象 将它们放在场景中的任意位置 在 visionOS 中 如我们所见 网站依然在 Safari 浏览器中打开 同时 3D 模型显示在“快速查看”中 而且如果你想确保在显示链接前 用户能通过“快速查看”看到模型 你可以查看锚标记的 relList 看看它是否支持 AR 接下来是沉浸式音频 你一定会喜欢你听到的内容

Safari 浏览器中的 沉浸式音频始于 Web Audio API 而 Web Audio 则始于 创建 Audio Context

它能让你创建名为“节点”的新组件 包括能让你组合音景的生成器和效果 就像演唱会上的吉他效果器 或者混音室里的效果器

你可以随心所欲地把这些节点连起来 构成一个效果链 然后将它 连回到你的 Audio Context 从而打造出一个所有你创建的 生成器和效果 都可以调节的声音环境

而能够让你打造 空间音频的特定效果或节点 就称为 PannerNode 它让你可以控制 位置、方向、锥角等属性 以及你通过它发送的音频的参考距离

将 PannerNode 与一系列声源搭配使用 让你可以在空间中放置这些节点 甚至还可以动态移动 以创造出完美适配 你体验中任何内容的音景

具体实现方式如下 基于 Audio Context 构建你的节点

然后设置参数 你可以做一些复杂的操作 用其他节点的输出 来驱动生成器的值 但在这里我就直接设定值 最后 将它们连接起来开始播放！ 另外 MDN 上也有 “Web Audio API”的详尽介绍 这是在新环境下重用 现有成熟网页标准的又一示例 这种新环境会让它展现出独特的潜力 即使你对 WebAudio 已经很熟悉了 也值得在 visionOS 中探索一下 看看、听听它能为你做些什么

而且 结合我们之前介绍的语音功能 空间音频是我们下一个功能的 理想搭配： 通过 WebXR 实现的 沉浸式虚拟现实 虚拟现实是一个很深的话题 所以我们有一场专门的讲座 介绍这方面的内容 但简单来说： 在网页上 你可以用 WebXR 来构建虚拟现实体验 这种 W3C 标准让你能够制作 可直接在 Safari 浏览器中运行的 跨平台沉浸式虚拟现实体验 无需预先下载 这非常适合用来提供 短小精悍、任何人通过链接就能分享的 片段式沉浸内容 而且你可以制作从移动电话 到高端台式机都能兼容的体验 我的交互式自行车安全检查单有一个 由 WebXR 驱动的 VR 模式 这也是重温 自行车维护技巧的绝佳方式 做好准备就成功了一半 不过很遗憾 不是能让我 出去骑车兜风的那一半 以上就是有关沉浸式媒体的内容 用于呈现空间照片和全景图像的 Fullscreen API、帮你打造 沉浸式音频的 WebAudio PannerNode 还有 WebXR 值得探索的内容有很多！ 在开发任何内容的过程中 我们经常需要深入去检查 实际的运行效果 或者弄清楚为什么会出问题 就像在 iOS 和 iPadOS 上一样 你可以将 Apple Vision Pro 连接到 Mac 上的网页检查器 来查看所有详细信息 我来演示如何开始使用 首先 确保你的 Mac 和 Apple Vision Pro 位于同一网络 在你进行操作时 你还需要 启用网页检查器 不过在模拟器上 这项功能 是默认启用的 在实体设备上 启用路径如下： App>Safari浏览器>高级>网页检查器 接下来你需要开放权限 让远程设备 可以发现 Apple Vision Pro 具体设置路径为 “设置”>“通用”>“远程设备” 然后在 Mac 上的 Safari 浏览器中转到“开发”菜单 你应该会看到一个用于连接 Apple Vision Pro 的选项 标签为“用于开发” Vision Pro 将生成 一个六位数验证码 你需要在 Mac 上 输入这个验证码 然后就大功告成了！ 你只需在首次 连接两台机器时执行这个操作 之后每当这两台设备 处于运行状态并连接到同一网络 visionOS 设备将自动出现在 Safari 浏览器的“开发”菜单中 完成这一步之后 你就可以检查 DOM 内容和 CSS 规则 使用 JavaScript 控制台来检查 代码密集型体验 如 WebXR 还可应用调试所需的 任何一次性豁免 比如放宽页面上的跨域策略 更棒的是 你可以在虚拟 Mac 的 屏幕上打开并显示网页检查器 这是一眼看到所有信息的好办法 哇！真是一场精彩的探索之旅！ 今天我们介绍了很多内容 我们介绍了依靠眼睛、手势 和声音的交互方式 探索了沉浸式媒体带来的出色体验 其中包括 全景照片和空间照片、“快速查看” 沉浸式音频和 WebXR 你还了解了如何开始检查 visionOS 上的网页内容 以达到你想要的效果 虽然我们的 visionOS 旅程 才刚刚开始 还在摸索阶段 但这是一场激动人心的旅程 未来还会有更多令人兴奋的内容！ 万一你在使用这些功能 进行开发的过程中 遇到了什么问题 请在 bugs.webkit.org 上 提交你遇到的问题 WebKit 是一个开源项目 所以你做出的任何贡献 小到提交最微小的错误报告 大到贡献代码 都会让项目的各个方面有所改进 和以往一样 如果大家对 visionOS 上的 Safari 浏览器 或任何功能有任何反馈 请使用“反馈助理”与我们分享 我的介绍快要结束了 该是你自己去探索的时候了！ 如果你还未启用 网页检查器 别忘了启用 确保你在 Xcode 中 安装了 visionOS 模拟器 以便查看你网页今天的内容 要更深入地了解我提到的 WebXR请务必观看： “使用 WebXR 打造沉浸式网站体验” 想要了解如何在 Apple 生态系统中 使用 USD 处理 3D 相关内容 请观看：“USD 和 MaterialX 的新功能” 感谢大家观看 再见！