NSDT工具推荐： Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器 - REVIT导出3D模型插件 - 3D模型语义搜索引擎 - Three.js虚拟轴心开发包 - 3D模型在线减面 - STL模型在线切割

大家好！ 👩‍💻今天，我想谈谈我已经使用了一段时间的一个工具。 WebXR 正在彻底改变我们对 Web 应用程序中虚拟现实和增强现实的思考方式，但它也面临着挑战。 当谈到性能优化时，有一个工具引起了我的注意——Spector.JS。 因此，当我们开始使用 Spector.JS 剖析和优化 WebXR 的激动人心的旅程时，请系好安全带！

1、什么是 Spector.JS？ 🤔

Spector.JS 可以用作浏览器扩展以及应用程序内的工具。 它通过捕获和分析应用程序的各个帧来帮助您调试和优化 WebGL 和 WebXR 应用程序。 它提供了对底层渲染过程的详细见解，使你可以更轻松地识别影响应用程序性能的瓶颈或问题。 对于任何在网络上处理 3D 图形的人来说，它都是一个非常宝贵的工具，尤其是在处理复杂的场景和着色器时。

2、开始使用 Spector.JS ⚙️

就我个人而言，我主要使用浏览器扩展，所以我首先关注它。 首先，你需要安装 Spector.JS 浏览器扩展，该扩展适用于 Chrome 和 Firefox。 Chrome 版本也可以在 Edge 中使用。 安装后，你应该在浏览器工具栏中看到一个新图标。

接下来，在浏览器中打开 WebXR 应用程序，然后单击 Spector.JS 图标开始捕获帧。 首先，你的浏览器页面将刷新，Spector.JS 将在你的页面中激活自身。 准备好捕捉时，图标应变为绿色。

现在你可以在游戏中移动到想要进行捕获的位置。 你可能会在某个特定位置发现性能下降，或者使用特定着色器。 当你到达那里时，单击现在的绿色图标，然后单击捕获按钮。

该扩展将显示捕获的帧，允许你选择绘制调用以进行进一步分析。

3、分析📊

Spector.JS 将显示有关该框架的大量信息。 这包括：但是你如何知道到底是什么导致了这些高帧时间？ 这就是 Spector.JS 真正的闪光点。 通过检查调试器界面中的“Captures”选项卡，你可以看到每帧期间执行的所有 WebGL 命令的详细细分。

查找执行时间异常长或调用过于频繁的命令。 这些可能是你的罪魁祸首！ 一些常见问题包括：

  • 过度绘制：场景中的对象由于重叠或透明度而被多次渲染。
  • 绘制调用过多：每个绘制调用都有一些开销，因此减少其数量可以提高性能。
  • 低效的着色器：复杂或未优化的着色器可能会导致速度显着下降。

所有这些信息使你可以更轻松地发现潜在的性能问题，例如昂贵的着色器操作或不必要的状态更改。 你可以更深入地了解所使用的不同着色器。 在网络上使用着色器时，这是非常宝贵的。

4、在代码中添加调试语句🧑‍💻

如果你更喜欢更多自定义控制或者不介意向你的项目添加一些额外的代码。 让我引导你完成将spector.JS 作为脚本包含在内的过程。 它非常简单明了。

首先，可以使用这个 URL 通过 CDN 访问spector.JS， 但如果你更喜欢托管自己的版本，不用担心 - 前往存储库中的 dist 文件夹。

对于通过 npm 安装该库的人来说，你会在 node_module/spectorjs/dist 文件夹中发现spector.bundle.js 文件。

下一步 - 引用！ 只需将此标签添加到你的 HTML 页面标题中即可：

<script type="text/javascript" src="https://spectorcdn.babylonjs.com/spector.bundle.js"></script>

现在它已在你的应用程序中可用，让我们通过将此命令添加到你的脚本来创建一个检查器：

var spector = new SPECTOR.Spector();

想要直接在页面上显示嵌入式 UI？ 没问题：

spector.displayUI();

或者，如果你想启动捕获并使用其 JSON 结果，请执行以下操作：

spector.onCapture.add((capture) => {
    // Do something with capture.
    var myEvent = new CustomEvent("SpectorOnCaptureEvent", { detail: { captureString: JSON.stringify(capture) } });
    document.dispatchEvent(myEvent);
});

var canvas = document.getElementById("renderCanvas");
spector.captureCanvas(canvas);

最后，另一个方便的 API：

spector.spyCanvases();

这甚至可以在捕获之前完整跟踪 GL 调用，这意味着你可以访问纹理输入或内存消耗信息。 🕵️‍♀️

5、优化 WebXR 性能的技巧 💡

使用 Spector.JS 分析你的 WebXR 应用程序可以揭示一些优化机会。 一旦发现了潜在的瓶颈，就该解决它们了。 以下是一些可能有帮助的一般提示：

  • 减少多边形数量：简化模型或使用细节层次技术来降低几何复杂性。
  • 优化纹理：使用较小的纹理或对其进行压缩以减少内存使用和带宽消耗。
  • 使用实例化：如果场景中有许多相同的对象，请使用实例化以更少的绘制调用来渲染它们。
  • 优化着色器：寻找机会简化着色器或使用更有效的技术。

6、结束语

Spector.JS 是一款非常宝贵的工具，可用于分析 WebXR 性能，帮助你识别应用程序中的瓶颈，并提供有关如何优化应用程序以获得流畅用户体验的见解。 所以，继续尝试吧——你的用户会感谢你！

原文链接：WebXR Performance debugging with Spector.JS

BimAnt翻译整理，转载请标明出处