在 Apple Vision Pro 中引入 WebXR 的自然输入

Apple Vision Pro 来了，随之而来的，人们对 WebXR 在 visionOS 中的可能性感到非常兴奋。支持正在进行中，您可以立即进行测试。

WebXR 现在包括一种更自然、更保护隐私的交互方法——新的输入模式——可用于 visionOS 1.1 中的 Safari 17.4。让我们来探讨一下 WebXR 的自然输入是如何工作的，以及如何在为 Apple Vision Pro 开发 WebXR 体验时利用它。transient-pointer

背景

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 本身的一部分提供。与输入相关的事件，例如 ，然后从会话对象调度。XRInputSources 在数组中可用。由于 visionOS 中的默认 WebXR 输入是瞬态的，因此该数组是空的，直到用户进行调整。此时，将向数组中添加一个新输入，并且会话会触发一个事件，然后触发一个事件。您可以使用它们来检测手势的开始。为了区分这种新的输入类型，它有一个 .selectselectstartselectendxrSession.inputSourcesinputsourceschangeselectstarttargetRayModetransient-pointer

持续互动

包含对空间中与输入相关的两个不同位置的引用：the 和 。 表示用户的注视方向，此空间从用户眼睛之间的原点开始，指向用户在手势开始时正在看的内容。最初设置为用户注视的方向，但会随着用户的手而不是眼睛的移动而更新——也就是说，手向左移动也会将该光线向左移动。表示用户在当前时间点的捏合手指的位置。XRInputSourcetargetRaySpacegripSpacetargetRaySpacetargetRaySpacegripSpace

当用户开始手势时，通常通过光线投射到场景中并选择相交的物体来查找用户想要与之交互的内容，而握把空间可用于用户手附近的物体的定位和方向，以用于交互目的，例如翻转开关、转动拨盘或从虚拟环境中拾取物品。要了解有关查找输入姿势的更多信息，请参阅 MDN 上的输入和输入源。targetRaySpace

交互结束

当用户松开捏合时，会从对象触发三个事件。session

首先是 a 和 event，两者都将输入引用为对象。然后，会话将触发最后一个事件，指示此事件已被删除。selectselectEndevent.inputSourceinputsourceschangeinputSource

简单性和隐私性的好处

由于每个输入代表每个捏合空间中的单个跟踪点，并且由于它仅在用户捏合期间存在，因此总体上需要的有关用户运动的数据要少得多。

将瞬态输入与手部跟踪相结合

visionOS 中 Safari 上的 WebXR 也继续支持全手部跟踪，在体验期间提供手部关节信息。如果调用已作为附加功能包含在内，并且由用户授予，则列表中的前两个输入将是提供此联合信息的标准输入。有关在 XRSession 中请求功能的信息，请参阅 MDN 上的文档。由于这些输入在会话期间会持续存在，因此任何输入都将显示在列表的下方。手部输入仅用于姿势信息，不会触发任何事件。navigator.xr.requestSessionhand-trackinginputSourcestracked-pointerstransient-pointer

在 visionOS 上测试自然输入

使用 visionOS 模拟器

新的输入模式适用于 visionOS 模拟器，因此您无需 Apple Vision Pro 即可测试您的 Web XR 体验。要开始使用，请执行以下操作：transient-pointer

• 从 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 场景中的潜在问题

WebXR 在 visionOS 1.1 中仅用于测试目的。如果您在浏览器中遇到错误，请不要尝试以用户代理字符串为目标来解决它们。相反，请通过反馈助手向我们报告。

启用手动跟踪后，我无法选择任何内容。

您的经验可能只是查看与 inputSources 数组中的前两个输入相对应的事件。流行框架中的许多示例Three.js仅作用于与索引 0 和 1 的输入相关的事件。启用手部跟踪后，与手部跟踪数据相对应的输入显示在条目 0 和 1 中，而样式输入显示在条目 2 和 3 中。transient-pointer

当我将一个对象附加到控制器时，它会出现在用户的脸上。

输入源自用户的眼睛和指向其视线方向。若要将对象放在用户手中，请改为将对象附加到输入的位置，该位置对应于用户捏合的位置。targetRaySpacegripSpace

用于与对象交互的选择光线滞后于当前选择的位置和上一个选择的位置。

一些框架试图通过在每一帧中插值控制器的位置来平滑控制器的运动。如果控制器断开连接并重新连接，则应重置此插值运动。您可能需要向框架作者提出问题。

让我们知道

我们迫不及待地想看看你做了什么。要分享您对 WebXR 的看法，请在 Mastodon 的 @ada@mastodon.social、@jensimmons@front-end.social、@jondavis@mastodon.social 或 X 的 @zachernuk 上找到我们。或者在 X 上回复 @webkit。您也可以在 LinkedIn 上关注 WebKit。如果您遇到任何问题，我们欢迎您提供反馈（包括 Apple Vision Pro 的系统诊断），或您关于 Web 检查器或 Web 平台功能的 WebKit 错误报告。申请问题确实有所作为。谢谢。

来源：webkit