关注「索引目录」公众号，获取更多干货。
WebGPU是目前的热门话题。这是一个全新的Web API，很可能会很快取代WebGL（兄弟，我不会想念你的👋）。
它已经得到了所有主流浏览器的支持，说实话……我怎么能不试一试呢？
于是，我做了任何一个好奇的、以前端为中心的软件开发人员都会做的事：我构建了一个小型交互式演示，并学到了比我最初预期的要多得多的东西。
首先，为什么要选择GPU？
对你们中的许多人来说，这听起来可能很明显，但对于这个领域的新手来说，我们还是做一个简单的介绍吧。
CPU擅长依次执行少量复杂任务。GPU
擅长大规模并行执行简单任务。
这就是GPU的优势所在：
-
图形和图像处理 -
模拟 -
矩阵密集型工作负载 -
是的——比如法学硕士学位之类的东西
无论是渲染像素、模糊纹理还是进行大型矩阵运算，GPU 都天生适合这类工作。WebGPU 最终让我们能够在浏览器中直接使用这种强大的计算能力。
那么……它与WebGL有何不同？
WebGL 基于OpenGL，而 OpenGL……嗯……已经很老了。以 GPU 的发展速度来看，它非常老旧。
使用 WebGL：
-
当时并没有真正的计算着色器。 -
一切都必须以“渲染问题”的形式表达出来。 -
很多技巧、窍门和变通方法 -
很多隐藏的全局状态
如果你曾经在 WebGL 中实现过 GPGPU，你可能还记得把数据编码到纹理中，然后假装三角形是完全不同的东西🙃
WebGPU 可以正确解决这个问题：
-
显式计算过程 -
显式管道和绑定组 -
没有神奇的全局状态 -
可直接映射到现代 GPU 架构（Metal、Vulkan、DirectX 12）的 API
简而言之：WebGPU 就是 GPU 如今的实际工作方式。
WebGPU是否已准备好投入生产使用？
实话实说：这要看情况。
如果可以的话：
-
需要使用现代浏览器。 -
目标浏览器：最新版本的 Chrome、Edge、Firefox、Safari
→ 那么是的，WebGPU 目前完全可以使用。
但是，如果：
-
你的受众群体非常广泛。 -
居然还有人在使用老旧的Safari浏览器。 -
或者（请不要）IE 11
→ 那么你要么投资 WebGL 作为备用方案，要么暂时放弃 WebGPU。
对于实验、演示、内部工具和前瞻性产品而言？
它已经是一个非常可靠的选择。
WGSL——那些“奇怪”的新着色器文件
WebGPU 引入了WGSL（WebGPU 着色语言）。
乍一看，它看起来很奇怪——但如果你曾经见过以下类型的着色器：
-
金属 -
Vulkan -
或现代 DirectX
……感觉其实挺熟悉的。
WGSL是：
-
强类型 -
显式 -
旨在避免一类GPU错误
在这个项目中，我将着色器放在单独的.wgsl文件中，但你也可以根据需要将它们作为字符串内联到 TypeScript 中。VS Code 已经为 WGSL 提供了语法高亮，这在两种情况下都很有帮助。
现在，来说说我的演示。
我不会撒谎——这个演示程序比我其他很多实验程序都难写。
或许是因为WebGPU还比较新。
又或许是因为我一直对计算机图形学不太感兴趣……而这个演示程序对图形的要求很高。
但最终结果如何呢？我对这个结果非常满意。
从视觉上看，它就像是鼠标悬停在画布上时出现的发光墨水或烟雾。
从技术上讲，它是一个GPU驱动的模拟，其中：
-
指针输入将颜色注入浮点纹理 -
计算着色器模糊并随时间传输数据 -
价值逐渐消失，留下痕迹 -
渲染过程显示结果
它在物理上准确吗？绝对不准确😄
它看起来很酷吗？哦，是的。
轨迹长度、笔刷大小、漩涡强度和颜色等实时参数都可以通过控制面板进行调整——无需重新编译着色器。
React……用于 WebGPU 演示？
大多数WebGPU演示程序都是用纯HTML+JS编写的。我也能做到这一点。
但我决定使用React + TypeScript作为一个简单的封装：
-
简洁的用户界面 -
滑块的简易状态管理 -
零手动DOM接线
效果很好——但有一个重要的注意事项。
为了使这个演示可用，我不得不禁用 React 严格模式。
为什么？因为严格模式会在开发过程中故意运行两次特效来检测副作用。这通常很棒……但当你创建 GPU 设备、管线、纹理和缓冲区时就不太好了。重复初始化很容易导致问题。
底层 GPU 代码是严格模式会造成干扰的少数情况之一。
TypeScript 的一个陷阱
还有一点小问题：
TypeScript 目前还没有完全启用 WebGPU 类型。
您需要在 TypeScript 配置中显式启用 WebGPU 类型定义，否则所有 GPU 类型都将不存在。这是一次性设置，但如果您是第一次尝试，则值得一提。
链接
- 代码库：
https://github.com/sylwia-lask/webgpu-neon-demo - 在线演示：
webgpu-fluid-demo
最后想说的
WebGPU感觉像是Web技术的一大进步。它
不仅仅是“略微提升图形性能”，而是开辟了一个全新的领域，让我们能够在浏览器中切实构建更多类型的应用。
这个演示只是一个视觉实验——但它已经展示了 GPU 驱动的 Web 应用程序可以多么强大、富有表现力和趣味性。
如果你一直对 WebGPU 感兴趣……这就是你尝试它的信号🚀
关注「索引目录」公众号，获取更多干货。