在 Apple Vision Pro 中为 WebXR 引入自然输入
Apple Vision Pro 已经面世，随之而来的是人们对 visionOS 中 WebXR 可能性充满期待。支持正在进行中，您今天即可进行测试。
WebXR 现在包含一种更自然、更注重隐私的交互方法——新的 transient-pointer 输入模式——在 visionOS 1.1 的 Safari 17.4 中可以通过一个标志启用。让我们探讨 WebXR 的自然输入是如何工作的，以及如何在为 Apple Vision Pro 开发 WebXR 体验时利用它。
背景
通过 WebXR，您可以将使用 WebGL 创建的 3D 体验转换为沉浸式空间体验，并直接在浏览器中提供。WebXR 在 W3C 管理的 Web 标准中定义，是向用户呈现沉浸式内容的绝佳选择。
然而，一个挑战是，由于它完全沉浸式——并且完全通过 WebGL 渲染——因此无法通过 DOM 内容或通过鼠标或触控板在典型网页上可用的传统二维输入提供交互。这一点，再加上空间体验需要空间输入的事实，意味着 WebXR 需要一个全新的交互模型。
visionOS 的交互模型，称为自然输入，使用 眼睛和 手相结合进行输入。用户只需看向目标并轻点手指即可进行交互。（或者使用 辅助功能提供的替代方案。）
WebXR 的初始 Web 标准假设所有输入都将由持久的硬件控制器提供。由于 visionOS 的自然输入交互模型不同于依赖监听物理控制器和按钮按压的 XR 平台，许多现有的 WebXR 体验在 Apple Vision Pro 上将无法按预期工作。
我们一直在 W3C 中进行协作，将 visionOS 的交互模型支持整合到 WebXR 中。我们很高兴能帮助 WebXR 社区将支持添加到流行的 WebXR 框架中。
使用自然输入交互
由于 visionOS 中的 WebXR 需要使用空间输入，而不是触控板、触摸或鼠标，并且 DOM 在 WebXR 会话中不可见，因此输入作为 XRSession 本身的一部分提供。与输入相关的事件（例如 select、selectstart 和 selectend）随后从会话对象中分派。XRInputSources 在 xrSession.inputSources 数组中可用。由于 visionOS 中的默认 WebXR 输入是瞬态的，因此该数组在用户捏合之前是空的。那一刻，一个新的输入被添加到数组中，会话会触发一个 inputsourceschange 事件，然后是一个 selectstart 事件。您可以使用这些来检测手势的开始。为了区分这种新的输入类型，它具有 transient-pointer 的 targetRayMode。
持续交互
XRInputSource 包含与输入相关的两个不同空间位置的引用：targetRaySpace 和 gripSpace。targetRaySpace 代表用户的注视方向，这个空间的起点位于用户的双眼之间，并指向用户开始手势时所看的位置。targetRaySpace 最初设置为用户注视的方向，但会随用户手部而不是眼睛的移动而更新——也就是说，手部向左移动也会使该光线向左移动。gripSpace 代表用户捏合手指在当前时间点的位置。
targetRaySpace 可用于发现用户开始手势时想要交互的对象，通常通过向场景进行光线投射并选择相交的对象；而 gripSpace 可用于用户手部附近对象的定位和方向，以实现交互目的，例如翻转开关、转动拨盘或从虚拟环境中拾取物品。要了解更多关于查找输入姿势的信息，请参阅 MDN 上的输入和输入源。
交互结束
当用户释放捏合时，session 对象会触发三个事件。
首先是 select 和 selectEnd 事件，两者都将输入引用为 event.inputSource 对象。然后会话会触发一个最终的 inputsourceschange 事件，表示此 inputSource 已被移除。
简化和隐私的好处
由于每次捏合的每个输入都代表空间中的一个单一追踪点，并且仅在用户捏合期间存在，因此总体上所需的用户运动数据显著减少。
将瞬态输入与手部追踪结合
visionOS 中 Safari 上的 WebXR 也继续支持完整的手部追踪，在体验期间提供手部关节信息。如果对 navigator.xr.requestSession 的调用已包含 hand-tracking 作为附加功能，并且用户已授予此权限，则 inputSources 列表中的前两个输入将是提供此关节信息的标准 tracked-pointers。有关 在 XRSession 中请求功能的信息，请参阅 MDN 上的文档。由于这些输入在会话期间持续存在，任何 transient-pointer 输入都将出现在列表的更下方。手部输入仅用于姿势信息，不触发任何事件。
在 visionOS 上测试自然输入
使用 visionOS 模拟器
新的 transient-pointer 输入模式在 visionOS 模拟器中可用，因此您无需 Apple Vision Pro 即可测试您的 Web XR 体验。要开始，请执行以下操作：
- 从 Mac App Store 下载 Xcode。
- 选择 visionOS SDK 进行下载和安装。
- 启动 Xcode 以完成安装过程。这将安装一个名为“模拟器”的新应用程序。了解更多关于使用 visionOS 模拟器的信息。
- 在 macOS 上打开模拟器应用程序。
- 创建新的 visionOS 模拟器或打开现有模拟器。
如果您在 macOS 上的 Safari 中打开了网站，您可以轻松地触发该页面在 visionOS 模拟器中的 Safari 中打开。在 Mac 上，选择“开发”>“使用以下方式打开页面”>“Apple Vision Pro”。(如果菜单栏中没有“开发”菜单，请启用 Web 开发者功能。)
启用 WebXR 支持
无论您拥有 Apple Vision Pro 还是正在使用 visionOS 模拟器，您都需要启用 WebXR 支持。从主屏幕，前往“设置”>“应用”>“Safari”>“高级”>“功能标志”并启用 WebXR Device API。
识别现有 WebXR 场景中的潜在问题
visionOS 1.1 中提供的 WebXR 仅用于测试目的。如果您在浏览器中遇到错误，请不要尝试通过定位用户代理字符串来规避它们。相反，请通过 反馈助手向我们报告。
当手部追踪启用时，我无法选择任何东西。
您的体验可能只关注与 inputSources 数组中前两个输入相对应的事件。流行框架 Three.js 中的许多示例仅对索引 0 和 1 处的输入相关事件进行操作。当手部追踪启用时，与手部追踪数据对应的输入出现在条目 0 和 1 中，但 transient-pointer 风格的输入出现在条目 2 和 3 中。
当我将对象附加到控制器时，它会出现在用户的脸部。
输入的 targetRaySpace 起源于用户的双眼之间，并指向其注视的方向。要将对象放置在用户手中，请将对象附加到输入的 gripSpace 位置，该位置对应于用户的捏合位置。
与对象交互的选择光线在当前选择位置和上次选择位置之间滞后。
一些框架试图通过每帧插值控制器位置来平滑控制器运动。如果控制器断开连接并重新连接，则应重置此插值运动。您可能需要向框架作者提交问题。
告诉我们
我们迫不及待地想看到您的作品。要分享您对 WebXR 的看法，请在 Mastodon 上找到我们：@ada@mastodon.social、@jensimmons@front-end.social、@jondavis@mastodon.social，或在 X 上找到 @zachernuk。或者在 X 上向 @webkit 发送回复。您也可以在 LinkedIn 上关注 WebKit。如果您遇到任何问题，我们欢迎您提供反馈（包括来自 Apple Vision Pro 的 sysdiagnose），或提交关于 Web Inspector 或 Web 平台功能的WebKit bug 报告。提交问题确实会带来改变。谢谢。