你可能使用过 WebGL，如果没有，那么一定使用过 Three.js，不是吗？本文将向你介绍 WebGL 和后起之秀 WebGPU。

1、WebGL 的起源

说起起源，就不得不说OpenGL。

在个人计算机的早期，使用最广泛的 3D 图形渲染技术是 Direct3D 和 OpenGL。Direct3D 是微软 DirectX 技术的一部分，主要用于 Windows 平台。OpenGL作为一种开源的跨平台技术，赢得了众多开发者的青睐。

然后是一个特殊的版本——OpenGL ES。它专为嵌入式计算机、智能手机、家用游戏机和其他设备而设计。它从 OpenGL 中删除了许多旧的和无用的特性，同时添加了新特性。比如去掉矩形等多余的多边形，只保留点、线、三角形等基本图形。这使它能够保持轻量级，同时仍然足够强大以渲染漂亮的 3D 图形。

而 WebGL 是从 OpenGL ES 衍生而来的。它专注于 Web 的 3D 图形渲染。

下图显示了它们之间的关系：

2、WebGL 的历史

从上图可以看出，WebGL 已经很老了。不仅因为它的存在时间长，还因为它的标准继承自OpenGL。OpenGL的设计理念可以追溯到1992年，而这些古老的概念其实与今天GPU的工作原理很不相符。

对于浏览器开发者来说，他们需要适应GPU的不同特性，这给他们带来了很多不便。虽然这些对于我们的上层开发者来说是不可见的。

从上图我们可以看到，苹果在 2014 年发布了 Metal。Steve Jobs 是 OpenGL ES 的支持者，他认为这是行业的未来。所以当时Apple设备上的游戏依赖于OpenGL ES。你玩过吗？

但在乔布斯去世后，苹果放弃了 OpenGL ES，开发了新的图形框架 Metal。

微软也在2015年发布了自己的D3D12[Direct3D 12]图形框架。紧随其后的是Khronos Group，你知道是谁吗？

事实上，它是图形行业的一个国际组织，类似于前端圈的 W3C 和 TC39。WebGL 是它的标准。甚至他们也逐渐淡化了 WebGL，转而支持现在的 Vulkan。

到目前为止，Metal、D3D12 [Direct3D 12] 和 Vulkan 并列为三大现代图形框架。这些框架充分释放了 GPU 的可编程能力，让开发者可以最大程度地自由控制 GPU。

还需要注意的是，当今的主流操作系统不再支持 OpenGL 作为主要支持。这意味着我们今天编写的每一行 WebGL 代码都有 90% 的机会不会被 OpenGL 绘制。它在 Windows 计算机上使用 DirectX 绘制，在 Mac 计算机上使用 Metal 绘制。

可以看出OpenGL已经晚了。但这并不意味着它会消失。它继续在嵌入式和科学研究等特殊领域发挥作用。

WebGL 也是如此，大量的适配工作使其难以向前推进。于是推出了 WebGPU。

3、什么是 WebGPU？

WebGPU 的目的是提供现代 3D 图形和计算能力。它是前端的老朋友W3C组织制定的标准。与 WebGL 不同，WebGPU 不是 OpenGL 的包装器。相反，它指的是当前的图形渲染技术，一种新的跨平台高性能图形界面。

它的设计更容易被三大图形框架实现，减轻了浏览器开发者的负担。它是一个精确的图形API，完全开放了整个显卡的能力。不再是像 WebGL 这样的上层 API。

更具体的优点如下：

• 减少 CPU 开销
• 对多线程的良好支持
• 使用计算着色器将通用计算 (GPGPU) 的强大功能引入 Web
• 全新的着色器语言——WebGPU Shading Language (WGSL)
• 未来将支持“实时光线追踪”的技术

这里我挑出多线程支持来详细说一下：

在 WebGL 中，你可以使用 OffscreenCanvas 进行多线程处理，但 Safari 尚不支持此功能。而且它的操作也很有限，你必须将整个 Canvas 的所有操作都转移到单个 Worker 上。

webGPU 上下文可以由多个工作人员共享。这些worker只要在时间线上没有互斥操作，都可以正常运行。这无疑带 来了良好的开发体验。

这是因为 WebGL 全局状态的设置。它在设置状态后立即执行，这使得 WebGL 无法支持多线程。

而WebGPU用来Pipeline Object设置渲染管线中的相关信息。它分为两个阶段：“记录命令”和“提交命令”。

“记录命令”是一个纯 CPU 进程。可以分别记录在多个worker（多线程）中，然后提交到同一个队列中。

“提交命令”就是让GPU根据队列中的命令顺序执行。

4、WebGPU的发展现状

WebGPU 的 API 仍在开发迭代中，但我们可以在 Chrome Canary 中试用。

在目前的前端框架中，Three.js 已经开始实现 WebGPU 的后端渲染器，Babylon.js 计划在5.x版本中支持 WebGPU。

5、结束语

我认为WebGPU取代WebGL是大势所趋。而且我相信它在元宇宙场景中有很大的潜力，这很有趣不是吗？

原文链接：http://www.bimant.com/blog/webgpu-is-webgl-killer/