WebGPU 计算管线、计算着色器（通用计算）入门案例：2D 物理模拟

---

原文译名：WebGPU - 专注于处理核心（GPU Cores），而不是绘图画布（Canvas）

原文发布于 2022年3月8日，传送门 https://surma.dev/things/webgpu

这篇东西非常长，不计代码字符也有1w字，能比较好理解 WebGPU 的计算管线中的各个概念，并使用一个简单的 2D 物理模拟程序来理解它，本篇重点是在计算管线和计算着色器，绘图部分使用 Canvas2D 来完成。

---

WebGPU 是即将推出的 WebAPI，你可以用它访问图形处理器（GPU），它是一种底层接口。

原作者对图形编程没有多少经验，他是通过研究 OpenGL 构建游戏引擎的教程来学习 WebGL 的，还在 ShaderToy 上学习 Inigo Quilez 的例子来研究着色器。因此，他能在 PROXX 中创建背景动画之类的效果，但是他表示对 WebGL 并不太满意。别急，下文马上会解释。

当作者开始注意 WebGPU 后，大多数人告诉他 WebGPU 这东西比 WebGL 多很多条条框框。他没考虑这些，已经预见了最坏的情况，他尽可能找了一些教程和规范文档来看，虽然彼时并不是很多，因为他找的时候 WebGPU 还在早期制定阶段。不过，他深入之后发现 WebGPU 并没有比 WebGL 多所谓的“条条框框”，反而是像见到了一位老朋友一样熟悉。

所以，这篇文章就是来分享学到的东西的。

作者明确指出&#x