在过去的几年中，我们一直在为 WebGPU 编写新版本的 Babylon.js 引擎。随着下一代 Web 3D 迈出第一步，人们的兴奋感与日俱增，WebGPU 1.0 版本针对 Chrome 102~103。在这篇博文中，我将简要介绍这个新的 Babylon.js WebGPU 引擎，并介绍它可以为 Web 上的 3D Commerce 体验带来的一些性能改进。

WebGPU 3D 针对商业应用的研发推进心得 — WebGPU 3D 房间演示（使用启用 WebGPU 标志的 Edge/Chrome Canary）

Babylon.js WebGPU 引擎

旅程始于 2019 年，首次尝试了 Render Bundle Forest Demo。Babylon.js在设计上是不可知的，并且向后兼容性至关重要，因此从一开始，其实现就旨在确保用户无需更改代码或只需进行最少的代码更改。

引擎的大部分功能在 2020 年移植完成（渲染目标、后期处理、阴影、压缩纹理、模板缓冲区、效果层等），并于 2020 年 12 月合并到主分支，发布了WebGPU Playground的第一个版本。2021 年，开始实现新功能，例如计算着色器和由渲染包支持的快速路径和其他优化。您可以在 WebGL+WebGPU 聚会演示中找到更多详细信息。

新功能：计算着色器。这是 WebGPU 带来的旗舰功能之一。非图形并行处理（如模糊、计算机视觉、模拟）现在是一流的。查看此文档页面了解更多详细信息和演示。

新功能：快速路径。WebGPU的另一个承诺是实现高性能 3D 图形，因为它为 JavaScript 中的图形资源提供了较低级别的控制。使用渲染包，新的 Babylon 引擎实现了多个级别的优化。快照记录是最快的模式，它会在一帧内记录绘制调用，并在所有后续帧中重播它们。它适用于大多数静态场景（无管道变化），例如电子商务，并且可以将性能提高 10 倍。

3D 商务室演示

在网上购物中，3D 的使用在过去几年中加速发展，因为它带来的虚拟表现通常是客户在家中发现和定制产品的最佳方式。随着 3D 对象在实时渲染中变得越来越逼真，在保持性能的同时组装一个充满对象的虚拟房间对于开发人员和 3D 艺术家来说是一项权衡利弊的工作。为了这篇博文，我构建了我的第一个 WebGPU 演示，试图展示 WebGPU 如何提高性能（本例中为 10 倍）并帮助突破 3D 商务场景的极限。

第一步。要开始使用 WebGPU 引擎，只需进入Playground，如果您的浏览器支持 WebGPU 引擎（目前启用了 WebGPU 标志的 Chrome/Edge Canary），您将能够使用右上角的下拉列表从 WebGL 切换到 WebGPU。

如果没有 Playground，您只需更新引擎创建（WebGPU 的初始化是异步的）。

3D 房间演示。使用Polygon Runway提供的出色教程在 Blender 中构建了一个简单的房间。在配备好房间后，我向其中添加了一些 Khronos glTF和3D Commerce工作组使用的 glTF 示例对象，以展示 PBR 扩展和 KTX2。我确保选择了一些重物体，因为目标是展示 WebGPU 可以带来的改进。在开发过程中，能够开箱即用地从 WebGL 切换到 WebGPU 非常实用！

快照录制 — 快速模式。下一步是使用快照录制功能优化场景。只需几行代码即可。

在快照录制的快速模式下，风扇和跳舞机器人模型不再动画。为了纠正这个问题，正如文档的最后一个示例（ “动画骨骼”）中所述，我只需确保通过调用skeleton.prepare方法构建渲染骨架所需的所有资源。请注意，此快照快速模式仅适用于大多数静态场景（无管道更改），并且可以更新快照（在为实例添加网格时）。

就是这样！实际上，我花在构建和设置 3D 场景上的时间比在 Playground 上编码的时间要多得多，但这可能是因为我远不是一个 3D 艺术家（甚至不是一个技术艺术家！）。当然，这只是 WebGPU 的早期阶段，但我希望这会让你有兴趣尝试它。

一些有用的链接可供深入了解：