WebXR 命中测试优化引擎：光线投射增强技术

WebXR 正在彻底改变我们与网页的交互方式，它能在浏览器中直接带来沉浸式体验。在许多 WebXR 应用中，尤其是涉及增强现实（AR）的应用，一个核心组件是命中测试（hit test）。命中测试用于确定一条通常源自用户视线或控制器的射线是否与现实世界中的表面相交。这种交互对于放置虚拟对象、与叠加在物理世界上的数字内容进行互动以及根据用户交互触发事件至关重要。然而，命中测试的计算成本可能很高，尤其是在复杂环境中或频繁执行时。因此，优化命中测试过程对于提供流畅且响应迅速的用户体验至关重要。本文将深入探讨用于 WebXR 命中测试优化的光线投射增强技术，为提升您的 WebXR 应用性能提供可行的策略。

理解 WebXR 命中测试

在深入探讨优化策略之前，理解 WebXR 命中测试的工作原理至关重要。WebXR Device API 提供了针对现实底层进行命中测试的方法。这些方法本质上是从用户的视点（或控制器的位置和方向）向场景中投射一条射线，并确定它是否与任何检测到的平面或特征点相交。如果找到交点，这个交点将提供有关表面的位置和方向信息，从而允许开发者在该点放置虚拟对象或启动交互。

用于命中测试的主要方法有：

• XRFrame.getHitTestResults(XRHitTestSource): 检索命中测试的结果，返回一个 XRHitTestResult 对象数组。每个 XRHitTestResult 代表一个交点。
• XRHitTestSource: 一个用于创建和管理命中测试源的接口，指定射线的原点和方向。

这些命中测试的性能会受到几个因素的显著影响，包括：

• 场景的复杂性： 具有更高多边形数量的更复杂场景需要更多处理能力来确定射线相交。
• 命中测试的频率： 每一帧都执行命中测试会给设备资源带来压力，尤其是在移动设备上。
• 特征检测的准确性： 不准确或不完整的特征检测可能导致错误的命中测试结果和浪费的处理时间。

光线投射优化技术

优化光线投射涉及降低确定射线相交的计算成本。可以采用多种技术来实现这一点：

1. 包围盒层次结构 (BVH)

包围盒层次结构 (Bounding Volume Hierarchy, BVH) 是一种树状数据结构，它将场景的几何体组织成一个包围盒的层次结构。这些包围盒通常是简单的形状，如包围一组三角形的盒子或球体。在执行光线投射时，算法首先检查与包围盒的相交情况。如果射线不与某个包围盒相交，则可以跳过该包围盒内包含的整个子树，从而显著减少所需的三角形-射线相交测试的数量。

示例： 想象一下使用 AR 在房间里放置几件虚拟家具。BVH 可以根据它们的邻近程度将这些家具组织成组。当用户点击地板以放置新对象时，光线投射将首先检查它是否与包含所有家具的包围盒相交。如果没有，光线投射可以快速跳过对远处单个家具的检查。

实现 BVH 通常包括以下步骤：

1. 构建 BVH： 递归地将场景的几何体划分为更小的组，并为每个组创建包围盒。
2. 遍历 BVH： 从根节点开始，遍历 BVH，检查射线与包围盒的相交情况。
3. 测试三角形： 仅测试与射线相交的包围盒内的三角形。

像 Three.js 的 three-mesh-bvh 以及其他 WebGL 框架的类似库提供了预构建的 BVH 实现，简化了这一过程。

2. 空间分区

空间分区技术将场景划分为离散的区域，例如八叉树或 KD 树。这些技术使您能够快速确定场景的哪些区域可能被射线穿过，从而减少需要进行相交测试的对象数量。

示例： 设想一个 AR 应用，允许用户探索叠加在他们物理环境上的虚拟博物馆展览。空间分区方法可以将展览空间划分为更小的单元格。当用户移动设备时，应用只需检查射线与当前在用户视野内的单元格中所包含对象的相交情况。

常见的空间分区技术包括：

• 八叉树 (Octrees)： 递归地将空间划分为八个卦限。
• KD 树 (KD-trees)： 沿不同轴递归地划分空间。
• 基于网格的分区 (Grid-based partitioning)： 将空间划分为均匀的单元格网格。

空间分区技术的选择取决于场景的具体特征。八叉树非常适合对象分布不均的场景，而 KD 树对于对象分布相对均匀的场景可能更高效。基于网格的分区实现简单，但对于对象密度变化大的场景可能效率不高。

3. 从粗到精的相交测试

该技术涉及以递增的细节级别执行一系列相交测试。初始测试使用对象的简化表示（例如包围球或包围盒）进行。如果射线不与简化表示相交，则可以丢弃该对象。只有当射线与简化表示相交时，才会使用实际的对象几何体进行更详细的相交测试。

示例： 在 AR 花园中放置虚拟植物时，初始命中测试可以使用植物模型周围的一个简单包围盒。如果射线与包围盒相交，则可以接着使用植物实际的叶子和茎的几何体进行更精确的命中测试。如果射线不与包围盒相交，则跳过更复杂的命中测试，从而节省宝贵的处理时间。

从粗到精相交测试的关键是选择合适的简化表示，这些表示测试速度快，并能有效地剔除不太可能被相交的对象。

4. 视锥体剔除

视锥体剔除是一种用于丢弃在摄像机视野（视锥体）之外的对象的技术。在执行命中测试之前，可以将用户看不到的对象从计算中排除，从而减少整体计算负荷。

示例： 在一个模拟虚拟展厅的 WebXR 应用中，可以使用视锥体剔除来排除当前在用户身后或视野之外的家具和其他对象。这显著减少了在命中测试期间需要考虑的对象数量，从而提高了性能。

实现视锥体剔除包括以下步骤：

1. 定义视锥体： 计算定义摄像机视野的平面。
2. 测试对象边界： 确定每个对象的包围盒是否在视锥体内。
3. 丢弃对象： 将在视锥体之外的对象从命中测试计算中排除。

5. 时间相干性

时间相干性利用了这样一个事实：用户和场景中对象的位置和方向通常会随时间逐渐变化。这意味着前几帧的命中测试结果通常可以用来预测当前帧的命中测试结果。通过利用时间相干性，您可以减少执行完整命中测试的频率。

示例： 如果用户使用 AR 在桌子上放置了一个虚拟标记，并且用户轻微移动，那么标记很可能仍在该桌子上。与其执行完整的命中测试来确认这一点，不如根据用户的移动来推断标记的位置，并且仅在用户移动较大或标记似乎已离开桌子时才执行完整的命中测试。

利用时间相干性的技术包括：

• 缓存命中测试结果： 存储前几帧的命中测试结果，并在用户位置和方向没有显著变化时重用它们。
• 推断对象位置： 根据对象的先前位置和速度预测其位置。
• 使用运动预测： 采用运动预测算法来预测用户的移动，并相应地调整命中测试参数。

6. 自适应命中测试频率

与其以固定频率执行命中测试，不如根据用户的活动和应用的性能动态调整频率。当用户积极与场景交互或应用运行流畅时，可以增加命中测试频率以提供更灵敏的反馈。相反，当用户处于空闲状态或应用遇到性能问题时，可以降低命中测试频率以节省资源。

示例： 在一个用户射击虚拟弹丸的 WebXR 游戏中，当用户瞄准和射击时可以增加命中测试频率，而当用户只是在环境中导航时则可以降低频率。

调整命中测试频率时要考虑的因素包括：

• 用户活动： 当用户积极与场景交互时增加频率。
• 应用性能： 当应用遇到性能问题时降低频率。
• 设备能力： 根据用户设备的能力调整频率。

7. 优化光线投射算法

底层的光线投射算法本身也可以进行性能优化。这可能涉及使用 SIMD（单指令，多数据）指令来同时处理多条射线，或采用更高效的相交测试算法。

示例： 利用优化的射线-三角形相交算法，例如以其速度和效率而闻名的 Möller–Trumbore 算法，可以带来显著的性能提升。SIMD 指令允许并行处理光线投射中常见的向量运算，从而进一步加速该过程。

8. 性能分析与监控

分析和监控 WebXR 应用的性能，以识别瓶颈和优化领域至关重要。使用浏览器开发者工具或专门的性能分析工具来测量执行命中测试和其他性能关键操作所花费的时间。这些数据可以帮助您精确定位最需要集中优化工作的领域。

示例： 可以使用 Chrome 开发者工具的 Performance 标签页来记录一个 WebXR 会话。然后可以分析时间线视图，以识别与命中测试相关的高 CPU 使用率时段。这样就可以针对导致性能瓶颈的特定代码部分进行优化。

需要监控的关键指标包括：

• 帧率： 测量每秒渲染的帧数。
• 命中测试持续时间： 测量执行命中测试所花费的时间。
• CPU 使用率： 监控应用的 CPU 利用率。
• 内存使用量： 跟踪应用的内存消耗。

代码示例

以下是使用 Three.js 演示基本光线投射的简化代码示例：

const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); function onMouseMove( event ) { mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1; raycaster.setFromCamera( mouse, camera ); const intersects = raycaster.intersectObjects( scene.children ); if ( intersects.length > 0 ) { // Handle intersection console.log("Intersection found:", intersects[0].object); } } window.addEventListener( 'mousemove', onMouseMove, false );

此示例设置了一个根据鼠标移动更新并与场景中所有对象进行相交测试的光线投射器。虽然简单，但这很快就会成为性能密集型操作。下面展示了如何使用 `three-mesh-bvh` 实现 BVH 结构并限制要测试的对象数量：

import { MeshBVH, Ray } from 'three-mesh-bvh'; // Assume `mesh` is your Three.js Mesh const bvh = new MeshBVH( mesh.geometry ); mesh.geometry.boundsTree = bvh; const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); const ray = new Ray(); // BVH expects a Ray object function onMouseMove( event ) { mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1; raycaster.setFromCamera( mouse, camera ); ray.copy(raycaster.ray); const intersects = bvh.raycast( ray, mesh.matrixWorld ); //Using raycast directly on the BVH if ( intersects ) { // Handle intersection console.log("Intersection found:", mesh); } } window.addEventListener( 'mousemove', onMouseMove, false );

此示例演示了如何使用 three-mesh-bvh 将 BVH 与光线投射集成。它为网格几何体构建了一个 BVH 树，然后利用 `bvh.raycast` 进行更快的相交检查。这避免了将射线与场景中每个三角形进行测试的开销。

WebXR 命中测试优化最佳实践

以下是优化 WebXR 命中测试的最佳实践摘要：

• 使用包围盒层次结构 (BVH) 或其他空间分区技术。
• 实现从粗到精的相交测试。
• 采用视锥体剔除以丢弃屏幕外的对象。
• 利用时间相干性以减少命中测试频率。
• 根据用户活动和应用性能自适应调整命中测试频率。
• 使用 SIMD 等技术优化光线投射算法。
• 分析和监控您的应用以识别瓶颈。
• 在适当的情况下考虑使用异步命中测试，以避免阻塞主线程。
• 最小化场景中的对象数量，或简化其几何体。
• 使用优化的 WebGL 渲染技术以提高整体性能。

WebXR 开发的全球化考量

在为全球受众开发 WebXR 应用时，考虑以下因素非常重要：

• 设备多样性： WebXR 应用应设计为能在从高端 PC 到低端手机的各种设备上流畅运行。这可能涉及使用自适应渲染技术或根据设备能力提供不同级别的细节。
• 网络连接性： 在某些地区，网络连接可能有限或不可靠。WebXR 应用应设计为能够应对网络中断，并应最小化需要通过网络传输的数据量。
• 本地化： WebXR 应用应针对不同语言和文化进行本地化。这包括翻译文本、调整 UI 元素以及使用适当的文化参考。
• 无障碍性： WebXR 应用应能为残障用户所用。这可能涉及提供替代输入方法，如语音控制或眼动追踪，并确保应用与辅助技术兼容。
• 数据隐私： 注意不同国家和地区的数据隐私法规。在收集或存储任何个人数据之前，请获取用户同意。

示例： 一个展示历史地标的 AR 应用应考虑设备多样性，通过在低端移动设备上提供较低分辨率的纹理和简化的 3D 模型来保持流畅的帧率。它还应进行本地化以支持不同语言，通过以用户偏好的语言显示地标描述，并在需要时为从右到左的语言调整用户界面。

结论

优化 WebXR 命中测试对于提供流畅、响应迅速且愉悦的用户体验至关重要。通过理解光线投射的基本原理并实施本文中概述的技术，您可以显著提高 WebXR 应用的性能，并创造出能被更广泛受众接触的沉浸式体验。请记住分析您的应用，监控其性能，并根据您的场景和目标设备的具体特征调整优化策略。随着 WebXR 生态系统的不断发展，新的创新优化技术将会出现。紧跟最新进展和最佳实践，对于开发推动沉浸式网页体验边界的高性能 WebXR 应用至关重要。