为什么需要从 WebGL 转到 WebGPU?
原因
主要原因有三点：
•性能的极大提升；
•更高级和现代化的图形 API 支持； •GPU 通用计算的支持；
更详细的原因可参考下面的 WebGPU 标准释义中文翻译。
性能提升的例子：
使用 128M 大小的未经过加载优化处理的 glTF 文件，分别在基于 WebGL 渲染器的 Three.js glTF Viewer[1]、基于 WebGPU 的简易 glTFloader 进行加载。
模型三角形数量等信息如下：
加载结果：
gltf-viewer 稳定在 11.5fps
基于 WebGPU 的简易 glTFloader 稳定在 51.8fps
如果再使用某些加载优化技术，后者跑满帧率是很容易的，前者则比较困难。
WebGPU 的兼容性问题？
Starting in Chrome 94, WebGPU is available as an origin trial in Chrome. The origin trial is expected to end in Chrome 101 (May 18, 2022).
Access modern GPU features with WebGPU[2]
当前仍在测试阶段，可参考此处，Chrome*Origin trial *阶段即将在 2022 年 5 月 18 日结束，在之后的版本将默认开启 WebGPU 功能。
以下是 WebGPU 标准释义 WebGPU Explainer[3] 第一章的中文翻译
一、简介
WebGPU 是一种提议的 Web API，使网页能够使用系统的 GPU（图形处理单元）[4] 来执行计算并绘制可以在页面内呈现的复杂图像。此目标类似于 WebGL[5] 系列 API，但 WebGPU 允许访问 GPU 的更高级功能。WebGL 主要用于绘制图像，但可以重新利用（付出很大的努力）来执行其他类型的计算，而 WebGPU 对在 GPU 上执行通用计算具有一流的支持。
1.1. 用例
WebGL 2 未解决的 WebGPU 示例用例包括：
•使用具有许多不同对象（例如 CAD 模型）的高度详细的场景绘制图像。WebGPU 的绘图命令单独比 WebGL 便宜。
•执行用于绘制逼真场景的高级算法。由于缺乏对通用计算的支持，许多现代渲染技术和优化无法在 WebGL 2 上执行。 •在 GPU 上高效执行机器学习模型。可以在 WebGL 中进行通用 GPU (GPGPU) 计算，但它是次优的并且要困难得多。
具体例子是：
1.2. 目标
目标：
•在屏幕上以及离屏启用现代图形的渲染。
•使通用计算能够在 GPU 上高效执行。 •支持针对各种原生 GPU API 的实现：Microsoft 的 D3D12、Apple 的 Metal 和 Khronos 的 Vulkan。 •提供一种人类可编写的语言来指定要在 GPU 上运行的计算。 •可在浏览器的多进程架构中实现，维护 Web 的安全性。 •尽可能让应用程序在不同的用户系统和浏览器上可移植地工作。 •以有用但谨慎范围的方式与 Web 平台的其余部分交互（基本上以一种或另一种方式共享图像）。 •为在 Web 上公开现代 GPU 功能提供基础。WebGPU 的结构类似于所有当前的原生 GPU API，即使它不提供它们的所有功能。有计划稍后对其进行扩展以具有更现代的功能。另见：§ 1.3 为什么不是“WebGL 3”？[6].
非目标：
•公开对根本不可编程的硬件或不太灵活的硬件的支持，例如 DSP 或专用机器学习硬件。 •公开对无法进行通用计算的硬件（如旧手机 GPU 甚至旧桌面 GPU）的支持。 •详尽地公开原生 GPU API 上可用的所有功能（某些功能仅在单一供应商的 GPU 上可用，或者太小众而无法添加到 WebGPU）。 •允许广泛混合和匹配 WebGL 和 WebGPU 代码。 •与 CSS Houdini[7] 等页面渲染流程紧密集成。
1.3. 为什么不是“WebGL 3”？
WebGL 1.0 和 WebGL 2.0 分别是 OpenGL ES 2.0 和 OpenGL ES 3.0 API 的 Javascript 投影。WebGL 的设计可以追溯到 1992 年发布的 OpenGL 1.0 API（进一步追溯到 1980 年代的 IRIS GL）。这个沿袭有许多优点，包括大量可用的知识体系以及将应用程序从 OpenGL ES 移植到 WebGL 的相对容易性。
然而，这也意味着 WebGL 与现代 GPU 的设计不匹配，导致 CPU 性能和 GPU 性能问题。这也使得在现代原生 GPU API 之上实现 WebGL 变得越来越困难。WebGL 2.0 Compute[8] 尝试向 WebGL 添加通用计算功能，但与原生 API 的阻抗不匹配使这项工作变得异常困难。WebGL 2.0 Compute 的贡献者决定将精力集中在 WebGPU 上。
References
[1] glTF Viewer: https://gltf-viewer.donmccurdy.com/[2] Access modern GPU features with WebGPU: https://web.dev/gpu/[3] WebGPU Explainer: https://gpuweb.github.io/gpuweb/explainer/#why-not-webgl3[4] GPU（图形处理单元）: https://en.wikipedia.org/wiki/Graphics_processing_unit[5] WebGL: https://www.khronos.org/webgl/[6] § 1.3 为什么不是“WebGL 3”？: https://gpuweb.github.io/gpuweb/explainer/#why-not-webgl3[7] 与 CSS Houdini: https://developer.mozilla.org/en-US/docs/Web/Houdini[8] WebGL 2.0 Compute: https://www.khronos.org/registry/webgl/specs/latest/2.0-compute/