使用 WebXR 进行开发

Android XR 上的 Chrome 支持 WebXR。WebXR 是 W3C 制定的一项开放标准，可为受支持的浏览器带来高性能 XR API。如果您要构建 Web 应用，则可以使用 3D 模型增强现有网站，或构建新的沉浸式体验。

Chrome for Android XR 支持以下 WebXR 功能：

如需查看 WebXR 的实际运作方式，请在 Android XR 设备或 Android XR 模拟器上启动 Chrome，然后浏览官方 WebXR 示例。

前提条件：选择 WebXR 框架

在开始开发之前，请务必选择合适的 WebXR 框架。 这会显著提高您自己的工作效率，并提升您打造的体验质量。

如果您更喜欢使用原生 JavaScript 和 WebGL，请参阅 GitHub 上的 WebXR 以创建您的第一个 WebXR 实验。

针对 Android XR 进行适配

如果您在其他设备上运行现有的 WebXR 体验，则可能需要更新代码，以便在 Android XR 上正确支持 WebXR。例如，专注于移动设备的 WebXR 体验必须从一块屏幕适应到 Android XR 中的两块立体屏幕。以移动设备或现有头显为目标平台的 WebXR 体验可能需要调整输入代码，以便优先使用手部操作。

在 Android XR 上使用 WebXR 时，您可能需要更新代码，以补偿两个屏幕（每个眼睛一个）这一事实。

关于在 WebXR 中确保深度感

当用户将虚拟对象放置在其实际空间中时，其比例应准确无误，以使其看起来像是真正属于该空间。例如，在家具购物应用中，用户需要相信虚拟扶手椅会完美地融入他们的客厅。

Chrome for Android XR 支持 WebXR 中的深度感知模块，可增强设备感知现实环境的尺寸和轮廓的能力。借助这些深度信息，您可以打造更具沉浸感和真实感的互动，帮助用户做出明智的决策。

与手机上的深度感知不同，Android XR 中的深度感知是立体的，可实时流式传输两个深度图，以实现双目视觉。您可能需要更新 WebXR 代码，以便正确支持立体深度帧。

以下示例以立体方式渲染深度信息：

// Called every time a XRSession requests that a new frame be drawn.
function onXRFrame(t, frame) {
  const session = frame.session;
  session.requestAnimationFrame(onXRFrame);
  const baseLayer = session.renderState.baseLayer;
  const pose = frame.getViewerPose(xrRefSpace);

  if (pose) {
    gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer);

    // Clears the framebuffer.
    gl.clearColor(0, 0, 0, 0);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    // Note: Two views will be returned from pose.views.
    for (const view of pose.views) {
      const viewport = baseLayer.getViewport(view);
      gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);

      const depthData = frame.getDepthInformation(view);
      if (depthData) {
        renderDepthInformationGPU(depthData, view, viewport);
      }
    }
  } else {
    console.error('Pose unavailable in the current frame!');  }
}

代码要点

  • 必须返回有效的姿势才能访问深度数据。
  • pose.views 会为每只眼睛返回一个视图，并且其对应的 for 循环会运行两次。

使用 WebXR Depth Sensing API 进行实时深度可视化。红色表示较近的像素，蓝色表示较远的像素。

在 WebXR 中添加手部互动

通过向 WebXR 应用添加手部互动，您可以实现更直观、更沉浸的体验，从而提高用户互动度。

手部输入是 Android XR 的主要交互机制。Chrome for Android XR 支持将 Hand Input API 用作默认输入。借助此 API，用户可以使用手势和手部动作来抓取、推或操控场景中的元素，从而自然地与虚拟对象互动。

手机或以控制器为中心的 XR 设备等设备可能尚不支持手部输入。您可能需要更新 WebXR 代码，以便正确支持手部输入。包含手部的沉浸式 VR 会话演示了如何将手部跟踪功能集成到 WebXR 项目中。

以下动画展示了将“双指张合”与 WebXR API 结合使用的示例，其中显示了用户“擦除”虚拟空间表面，以显示通往现实世界的透视窗口。

WebXR 演示：使用手指张合擦除屏幕，以透视现实世界。

WebXR 中的权限

当您使用需要权限的 WebXR API 时，Chrome 会提示用户向网站授予权限。所有 WebXR API 都需要 3D 映射和摄像头跟踪权限。访问所跟踪的面部、眼睛和手部数据也受权限保护。如果已授予所有所需权限，调用 navigator.xr.requestSession('immersive-ar', options) 会返回有效的 WebXR 会话。

用户选择的权限偏好设置会保留在每个网域中。在其他网域中访问 WebXR 体验会导致 Chrome 再次提示用户授予权限。如果 WebXR 体验需要多项权限，Chrome 会一次请求一项权限。

与 Web 上的所有权限一样，您应妥善处理被拒绝权限的情况。