WebXR 空间坐标引擎：精通坐标系管理

WebXR 为直接在浏览器中构建沉浸式和交互式的增强现实与虚拟现实体验提供了巨大的潜力。开发强大而精确的 XR 应用程序，其基础就是要理解和管理空间坐标引擎。本篇博文将全面介绍 WebXR 的坐标系统，涵盖参考空间、坐标变换以及为全球用户创建引人入胜的 XR 体验的最佳实践。

理解 WebXR 坐标系

WebXR 的核心依赖于三维笛卡尔坐标系。该系统使用三个轴（X、Y 和 Z）来定义空间中物体的位置和方向。理解这些轴如何定义以及 WebXR 如何使用它们，对于构建精确且直观的 XR 体验至关重要。

• X 轴：通常代表水平轴，正值向右延伸。
• Y 轴：通常代表垂直轴，正值向上延伸。
• Z 轴：代表深度轴，正值朝向观察者延伸。请注意，在某些约定（如 OpenGL）中，Z 轴是*远离*观察者延伸的；然而，WebXR 通常使用相反的约定。

原点 (0, 0, 0) 是三个轴相交的点。XR 场景中的所有位置和方向都是相对于此原点定义的。

坐标系的左右手性

WebXR 通常使用右手坐标系。在右手坐标系中，如果你用右手的手指从正 X 轴卷向正 Y 轴，你的拇指将指向正 Z 轴的方向。在进行计算和变换时，记住这个约定非常重要。

参考空间：空间理解的基础

参考空间是 WebXR 中空间理解的基石。它们为解释 XR 场景中物体的位置和方向提供了上下文。每个参考空间都定义了自己的坐标系，允许开发者将虚拟内容锚定到不同的参考点。

WebXR 定义了多种类型的参考空间，每种都有其特定用途：

• 观察者参考空间 (Viewer Reference Space)：此参考空间附着于观察者的头部。其原点通常位于用户双眼之间。当用户移动头部时，观察者参考空间会随之移动。这对于创建头部锁定的内容非常有用，例如平视显示器 (HUD)。
• 本地参考空间 (Local Reference Space)：本地参考空间锚定在用户的起始位置。即使用户四处移动，它也相对于真实世界环境保持固定。这对于需要将虚拟对象锚定在用户物理空间中特定位置的体验非常理想。想象一下，将一个虚拟植物放在真实的桌子上——本地参考空间会使植物保持在该位置。
• 有界参考空间 (Bounded Reference Space)：与本地参考空间类似，但它还定义了 XR 体验设计运行的边界或体积。这有助于确保用户停留在安全可控的区域内。这对于房间规模的 VR 体验尤其重要。
• 无界参考空间 (Unbounded Reference Space)：这种参考空间没有任何预定义的边界。它允许用户在可能无限的虚拟环境中自由移动。这在飞行模拟器或探索广阔虚拟景观等 VR 体验中很常见。
• 跟踪参考空间 (Tracking Reference Space)：这是最基础的空间。它直接反映了硬件的跟踪姿态。通常你不会直接与它交互，但其他参考空间都是在此基础上建立的。

选择正确的参考空间

选择合适的参考空间对于创建理想的 XR 体验至关重要。在做决定时，请考虑以下因素：

• 移动性：用户是否会在现实世界中四处走动？如果是，本地或有界参考空间可能比观察者参考空间更合适。
• 锚定：你是否需要将虚拟对象锚定到现实世界的特定位置？如果是，本地参考空间是最佳选择。
• 规模：XR 体验的规模是多大？如果体验是为特定物理空间设计的，有界参考空间就很重要。
• 用户舒适度：确保所选的参考空间与用户的预期移动和交互方式一致。在一个小的游戏空间中使用无界空间可能会导致不适。

例如，假设您正在构建一个 AR 应用程序，允许用户将虚拟家具放置在他们的客厅中。本地参考空间将是完美的选择，因为它允许用户在房间里走动，而虚拟家具仍能锚定在其原始位置。

坐标变换：弥合空间之间的差距

坐标变换对于在不同参考空间之间转换位置和方向至关重要。它们允许您在 XR 场景中正确定位和定向虚拟对象，无论用户的移动或选择的参考空间如何。可以把它想象成在不同语言之间进行翻译——坐标变换让 WebXR 能够理解物体的位置，无论它们是用哪种“语言”（参考空间）描述的。

WebXR 使用变换矩阵来表示坐标变换。变换矩阵是一个 4x4 矩阵，它编码了将一个点从一个坐标系变换到另一个坐标系所需的平移、旋转和缩放。

理解变换矩阵

一个变换矩阵将多个操作组合成一个单一的矩阵：

• 平移：沿 X、Y 和 Z 轴移动对象。
• 旋转：围绕 X、Y 和 Z 轴旋转对象。这通常在内部由四元数表示，但最终会解析为整个变换中的旋转矩阵分量。
• 缩放：沿 X、Y 和 Z 轴改变对象的大小。

通过将一个点的坐标（表示为 4D 向量）乘以变换矩阵，您可以在新的坐标系中获得变换后的坐标。许多 WebXR API 会为您处理矩阵乘法，但对于高级场景，理解其底层数学原理至关重要。

在 WebXR 中应用变换

WebXR 提供了几种获取和应用变换的方法：

• XRFrame.getViewerPose()：在给定的参考空间中返回观察者的姿态（位置和方向）。这使您能够确定观察者相对于特定参考点的位置。
• XRFrame.getPose()：在给定的参考空间中返回 XRInputSource（例如控制器）或 XRAnchor 的姿态。这对于跟踪控制器和其他被跟踪对象的位置和方向至关重要。
• 使用矩阵库：像 gl-matrix (https://glmatrix.net/) 这样的库提供了用于创建、操作和应用变换矩阵的函数。这些库简化了执行复杂变换的过程。

例如，要将一个虚拟对象放置在用户头部前方 1 米处，您首先需要使用 XRFrame.getViewerPose() 获取观察者的姿态。然后，您将创建一个变换矩阵，将该对象沿观察者参考空间的 Z 轴平移 1 米。最后，您将此变换应用于对象的位置，以将其放置在正确的位置。

示例：使用 gl-matrix 变换坐标

这是一个使用 gl-matrix 变换坐标的简化 JavaScript 示例：

// 导入 gl-matrix 函数
import { mat4, vec3 } from 'gl-matrix';

// 在本地空间中定义一个点
const localPoint = vec3.fromValues(1, 2, 3); // X, Y, Z 坐标

// 创建一个变换矩阵（示例：平移 (4, 5, 6)）
const transformMatrix = mat4.create();
mat4.translate(transformMatrix, transformMatrix, vec3.fromValues(4, 5, 6));

// 创建一个向量来存储变换后的点
const worldPoint = vec3.create();

// 应用变换
vec3.transformMat4(worldPoint, localPoint, transformMatrix);

// worldPoint 现在包含了变换后的坐标
console.log("变换后的点：", worldPoint);

WebXR 中坐标系管理的最佳实践

有效的坐标系管理对于创建精确、稳定和直观的 XR 体验至关重要。以下是一些需要遵循的最佳实践：

• 选择正确的参考空间：仔细考虑每个参考空间的特性，并选择最适合您应用程序需求的那个。
• 最小化参考空间切换：频繁切换参考空间可能会带来性能开销和潜在的不准确性。尽量减少应用程序中参考空间的切换次数。
• 高效使用变换矩阵：变换矩阵的计算量很大。避免创建和应用不必要的变换。尽可能缓存变换矩阵以提高性能。
• 处理坐标系差异：注意不同 XR 设备和库之间坐标系约定的潜在差异。确保您的应用程序能正确处理这些差异。例如，一些较旧的系统或内容可能使用左手坐标系。
• 全面测试：在不同的 XR 设备和不同环境中彻底测试您的应用程序，以确保坐标系工作正常。注意准确性、稳定性和性能。
• 理解姿态表示：WebXR 姿态 (XRPose) 包含位置和方向（一个四元数）。请确保您正确地提取和使用这两个组件。开发者常常错误地认为姿态*只*包含位置数据。
• 考虑延迟：XR 设备存在固有延迟。尝试预测姿态以补偿这种延迟并提高稳定性。WebXR Device API 提供了预测姿态的方法，这有助于减少感知到的延迟。
• 保持世界比例：保持您的世界比例一致。避免在场景中任意缩放对象，因为这可能导致渲染失真和性能问题。尽量保持虚拟单位和真实世界单位之间的 1:1 映射。

常见陷阱及避免方法

在 WebXR 中使用坐标系可能具有挑战性，并且很容易出错。以下是一些常见的陷阱以及如何避免它们：

• 错误的矩阵乘法顺序：矩阵乘法不满足交换律，这意味着您乘以矩阵的顺序很重要。始终确保以正确的顺序乘以矩阵以实现所需的变换。通常，变换按以下顺序应用：缩放、旋转、平移 (SRT)。
• 混淆本地坐标和世界坐标：区分本地坐标（相对于对象自身坐标系的坐标）和世界坐标（相对于场景全局坐标系的坐标）非常重要。确保为每个操作使用正确的坐标系。
• 忽略坐标系的左右手性：如前所述，WebXR 通常使用右手坐标系。但是，某些内容或库可能使用左手坐标系。请注意这些差异并妥善处理。
• 未能考虑眼睛高度：当使用观察者参考空间时，原点通常位于用户的双眼之间。如果您想将对象定位在用户的眼睛水平位置，则需要考虑用户的眼睛高度。XRFrame.getViewerPose() 返回的 XREye 对象可以提供此信息。
• 漂移累积：在 AR 体验中，跟踪有时会随着时间的推移而漂移，导致虚拟对象与现实世界错位。实施诸如回环检测或视觉惯性里程计 (VIO) 等技术来减轻漂移并保持对齐。

高级主题：锚点和空间映射

除了基本的坐标变换，WebXR 还提供了更高级的空间理解功能：

• 锚点 (Anchors)：锚点允许您在虚拟对象和现实世界之间创建持久的空间关系。锚点是系统试图使其相对于环境保持固定的空间点。即使设备暂时失去跟踪，当跟踪恢复时，锚点也会尝试重新定位。这对于创建那些即使在用户四处走动或设备跟踪中断时，也需要将虚拟对象锚定到特定物理位置的体验非常有用。
• 空间映射 (Spatial Mapping)：空间映射（也称为场景理解或世界跟踪）允许系统创建用户环境的 3D 表示。该表示可用于将虚拟对象遮挡在真实世界对象之后，实现虚拟与真实世界对象之间的物理交互，并提供更具沉浸感和可信度的 XR 体验。空间映射并非普遍支持，需要特定的硬件功能。

使用锚点建立持久空间关系

要创建锚点，您首先需要获取一个 XRFrame 和一个代表锚点期望位置的 XRPose。然后，您可以调用 XRFrame.createAnchor() 方法，并传入 XRPose。该方法返回一个 XRAnchor 对象，代表新创建的锚点。

以下代码片段展示了如何创建锚点：

// 获取 XRFrame 和 XRPose
const pose = frame.getPose(hitTestResult.localPose, localReferenceSpace);

// 创建锚点
const anchor = frame.createAnchor(pose);

// 处理错误
if (!anchor) {
  console.error("未能创建锚点。");
  return;
}

// 锚点现已创建，并将尝试保持其
// 相对于现实世界的位置。

全球可访问性考量

在为全球受众设计 WebXR 体验时，考虑可访问性至关重要。这包括以下因素：

• 语言支持：为所有文本和音频内容提供翻译。
• 文化敏感性：注意文化差异，避免使用在某些文化中可能具有冒犯性或不恰当的图像或语言。
• 输入方法：支持多种输入方法，包括控制器、语音命令和基于注视的交互。
• 晕动症：通过避免快速或剧烈的移动、提供稳定的参考框架以及允许用户调整视野来最大程度地减少晕动症。
• 视觉障碍：提供调整文本和其他视觉元素大小和对比度的选项。考虑使用音频提示来提供额外信息。
• 听觉障碍：为所有音频内容提供字幕或文字稿。考虑使用视觉提示来提供额外信息。

结论

精通坐标系管理是构建引人入胜且精确的 WebXR 体验的基础。通过理解参考空间、坐标变换和最佳实践，您可以创建对世界各地的用户而言既沉浸又直观的 XR 应用程序。随着 WebXR 技术的不断发展，对于希望突破沉浸式网络体验界限的开发者来说，对这些核心概念的扎实理解将变得更加关键。

本篇博文全面概述了 WebXR 中的坐标系管理。我们鼓励您尝试本文讨论的概念和技术，并探索 WebXR API 文档以获取更多信息。通过遵循这些原则，您可以释放 WebXR 的全部潜力，为全球受众创造真正变革性的 XR 体验。