从WebGL迁移到WebGPU

迁移到即将推出的 WebGPU 不仅仅意味着切换图形 API。这也是迈向 Web 图形未来的一步。但如果做好准备并理解，迁移将会更加顺利 — 本文将帮助您做好准备。

在本文中，我们将讨论 WebGL 和即将推出的 WebGPU 之间的区别，并阐述如何为项目迁移做好准备。

WebGL 和 WebGPU 的时间线

WebGL 与许多其他 Web 技术一样，其历史可以追溯到很久以前。要了解转向 WebGPU 背后的动态和动机，首先快速回顾一下 WebGL 开发的历史会有所帮助：

• OpenGL 桌面版（1993 年） OpenGL 桌面版首次亮相。
• WebGL 1.0（2011）：这是 WebGL 的第一个稳定版本，基于 2007 年推出的 OpenGL ES 2.0。它为 Web 开发人员提供了直接在浏览器中使用 3D 图形的能力，而无需额外的插件。
• WebGL 2.0（2017 年）：WebGL 2.0 在第一版发布六年后推出，基于 OpenGL ES 3.0（2012 年）。此版本带来了许多改进和新功能，使 Web 上的 3D 图形更加强大。

近年来，人们对新的图形 API 的兴趣日益浓厚，这些 API 可以为开发人员提供更多的控制力和灵活性：

• Vulkan（2016 年）：由 Khronos 集团创建的跨平台 API 是 OpenGL 的“后继者”。Vulkan 提供对图形硬件资源的低级访问，让高性能应用程序能够更好地控制图形硬件。
• D3D12（2015）：此 API 由 Microsoft 创建，专用于 Windows 和 Xbox。D3D12 是 D3D10/11 的后继者，为开发人员提供了对图形资源的更深层次的控制。
• Metal（2014）：由 Apple 创建，是 Apple 设备的专属 API。其设计初衷是实现 Apple 硬件的最大性能。

WebGPU 的现状以及未来发展

如今，从 113 版本开始，WebGPU 可通过 Google Chrome 和 Microsoft Edge 浏览器在 Windows、Mac 和 ChromeOS 等多个平台上使用。预计在不久的将来会支持 Linux 和 Android。

以下是一些已经支持（或提供实验性支持）WebGPU 的引擎：

• Babylon JS：全面支持 WebGPU。
• ThreeJS：目前正在实验性支持。
• PlayCanvas：正在开发中，但前景非常光明。
• Unity：在 2023.2 alpha 版本中宣布了非常早期且实验性的 WebGPU 支持。
• Cocos Creator 3.6.2：正式支持 WebGPU，成为该领域的先驱之一。
• Construct：目前仅支持 Windows、macOS 和 ChromeOS 的 v113+ 版本。

考虑到这一点，过渡到 WebGPU 或至少为这种过渡准备项目似乎是近期及时的一步。

高层概念差异

让我们缩小范围，看看 WebGL 和 WebGPU 之间的一些高级概念差异，从初始化开始。

初始化

开始使用图形 API 时，第一步是初始化交互的主要对象。此过程在 WebGL 和 WebGPU 之间有所不同，两个系统都有一些特殊之处。

WebGL：上下文模型

在 WebGL 中，此对象称为“上下文”，它本质上表示在 HTML5 Canvas 元素上绘图的界面。获取此上下文非常简单：

const gl = canvas.getContext('webgl');

WebGL 的上下文实际上是与特定画布绑定的。这意味着如果您需要在多个画布上进行渲染，则需要多个上下文。

WebGPU：设备模型

WebGPU 引入了一个名为“设备”的新概念。此设备代表您将与之交互的 GPU 抽象。初始化过程比 WebGL 稍微复杂一些，但它提供了更大的灵活性：