Android XR 上的 Chrome 支持 WebXR。WebXR 是 W3C 制定的一项开放标准 ，可为 受支持的浏览器提供高性能 XR API。如果您是为 Web 构建，则可以使用 3D 模型增强现有网站，或打造全新的沉浸式体验。
Android XR 版 Chrome 支持以下 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 XR 版 Chrome 支持 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 支持将 Hand Input 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 会一次提示授予一项权限。
与 Web 上的所有权限一样，您应正确处理权限被拒绝的情况。