使用 WebXR 进行开发

Android XR 上的 Chrome 支持 WebXR。WebXR 是 W3C 推出的开放标准，可将高性能 XR API 引入受支持的浏览器。如果您正在为网页构建应用，可以使用 3D 模型增强现有网站，或构建新的沉浸式体验。

Chrome for Android XR 支持以下 WebXR 功能

• 设备 API
• AR 模块
• 游戏手柄模块
• 命中测试模块
• 手部输入
• 锚点
• 深度感知
• 光照估算

要查看 WebXR 的实际效果，请在 Android XR 设备或 Android XR 模拟器上启动 Chrome，并浏览官方的 WebXR 示例。

前提条件：选择一个 WebXR 框架

在开始开发之前，选择合适的 WebXR 框架非常重要。这会显著提高您的工作效率，并改善您创建的体验质量。

• 为了完全控制 3D 场景并创建自定义或复杂交互，我们推荐使用 three.js 和 babylon.js。
• 对于快速原型设计或使用类似 HTML 的语法定义 3D 场景，我们推荐使用 A-Frame 和 model-viewer。
• 您还可以查看更多框架和示例代码。

如果您倾向于使用原生 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 中添加手部交互

向您的 WebXR 应用添加手部交互可实现更直观、更沉浸的体验，从而提升用户参与度。

手部输入是 Android XR 中的主要交互机制。Chrome for Android XR 支持 手部输入 API 作为默认输入。此 API 允许用户使用手势和手部动作自然地与虚拟对象交互，抓取、推动或操纵场景中的元素。

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

以下动画演示了如何将捏合手势与 WebXR API 结合使用，展示用户“擦除”虚拟空间表面以显示进入现实世界的透视窗口的示例。

WebXR 中的权限

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

用户选择的权限偏好会为每个域持久保存。在不同域中访问 WebXR 体验会导致 Chrome 再次提示权限。如果 WebXR 体验需要多个权限，Chrome 会逐一提示每个权限。

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