Android XR 上的 Chrome 支持 WebXR。WebXR 是 W3C 制定的一项开放标准，可为受支持的浏览器提供高性能 XR API。如果您要构建 Web 应用，可以使用 3D 模型增强现有网站，也可以打造全新的沉浸式体验。
Chrome for Android XR 支持以下 WebXR 功能：
如需查看 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 中的深度感
当用户将虚拟对象放置在实际空间中时，其比例应准确无误，这样才能让该对象看起来像是真实存在于该空间中。例如，在家具购物应用中，用户需要相信虚拟扶手椅能完美融入他们的客厅。
Android 版 Chrome 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 深度感测 API 实现实时深度可视化。红色表示距离较近的像素，蓝色表示距离较远的像素。
在 WebXR 中添加手部互动
通过添加手部互动，WebXR 应用可提供更直观、更具沉浸感的体验，从而提高用户互动度。
手部输入是 Android XR 中的主要互动机制。Android XR 版 Chrome 支持将手部输入 API 作为默认输入。 借助此 API，用户可以使用手势和手部动作自然地与虚拟对象互动，从而抓取、推动或操纵场景中的元素。
手机或以控制器为中心的 XR 设备等设备可能尚不支持手部输入。您可能需要更新 WebXR 代码，才能正确支持手部输入。Immersive VR Session with Hands 演示了如何将手部跟踪功能集成到 WebXR 项目中。
以下动画展示了一个示例，该示例将捏合操作与 WebXR API 相结合，向用户展示“擦除”虚拟空间表面以显示通往现实世界的透视窗口的效果。
WebXR 演示：使用手部捏合动作擦除屏幕，透视到现实世界。
WebXR 中的权限
当您使用需要权限的 WebXR API 时，Chrome 会提示用户向网站授予权限。所有 WebXR API 都需要 3D 地图和摄像头跟踪权限。对所追踪的面部、眼部和手部数据的访问也受到权限的保护。如果所有必需的权限都已授予，则调用 navigator.xr.requestSession('immersive-ar', options) 会返回有效的 WebXR 会话。
用户选择的权限偏好设置会针对每个网域保持不变。 在其他网域中访问 WebXR 体验会导致 Chrome 再次提示用户授予权限。如果 WebXR 体验需要多项权限，Chrome 会逐一提示用户授予每项权限。
与网络上的所有权限一样，您应妥善处理权限被拒绝的情况。