WebGPU学习路径与资源分享

感谢朋友的邀请，写一下WebGPU入门相关的东西。

如果有其他的图形API的经验，当然是最好的。例如Vulkan、DX12、Metal、Opengl、WebGL等之一或者之多。

有CUDA使用经验也挺好。

如果没有这些经验，那就按部就班的跟着练习就行了，遇到问题尽力解决问题就O了。

如果懂得渲染技术，应用或者理解起相关实现功能，更容易。

如果懂得GPU端的架构或者基于GPU的计算机制，理解起WebGPU的系统，就没啥障碍了。

当然，如果要用WebGPU写引擎，或者优化，或者与其他引擎做跨平台集成，那就要熟悉上面的种种以及引擎系统的相关知识，可能最终要回到编程能力，要回到系统架构呢你，要回到对计算机系统的具体认知能力上。啊哈，总会遇到几何数学物理知识的，还有英语。已经尬聊了，感觉是在说废话。。。。。。

最后说一句，多交流多交流多交流。切入正题。

从这篇开始，如果有需要就照做一遍：

https://codelabs.developers.google.com/your-first-webgpu-app?hl=zh-cn#0

相关源码实现请见: 

 Google codelab WebGPU入门教程源码＜1＞ - 初始化WebGPU(源码)-CSDN博客

 Google codelab WebGPU入门教程源码＜2＞ - 绘制几何形状(源码)-CSDN博客

Google codelab WebGPU入门教程源码＜3＞ - 绘制网格(源码)-CSDN博客

Google codelab WebGPU入门教程源码＜4＞ - 使用Uniform类型对象给着色器传数据(源码)-CSDN博客

Google codelab WebGPU入门教程源码＜5＞ - 使用Storage类型对象给着色器传数据(源码)-CSDN博客

Google codelab WebGPU入门教程源码＜6＞ - 使用计算着色器实现计算元胞自动机之生命游戏模拟过程(源码)-CSDN博客

Google codelab WebGPU入门教程源码＜7＞ - 完整的元胞自动机之生命游戏的完整实现(源码)-CSDN博客

练习的过程中，要看官方的API:

        1. 面向JavaScript语言的API: WebGPU API - Web APIs | MDN

        2. WebGPU官方技术文档: WebGPU

        3. 还有WGSL官方技术文档: WebGPU Shading Language

        4. WGSL 的一些语法用法教程: Pointers As Function Parameters | Tour of WGSL

        5. 一些不错的实践: WebGPU Best Practices | Toji.dev

        一个小小的建议: 可以自己梳理一下对应的API接口，这样理解更深刻和直接。

通过(Github)代码样例来进一步学习用法：

        1. 绘制一个三角形: Raw WebGPU

               源码: 用WebGPU入门教程: 从最简单的代码开始绘制一个彩色三角形源码-CSDN博客

        2. 若干可以说是官方的样例: WebGPU Samples

        3. 关于WebGPU mipmap纹理生成: https://github.com/toji/web-texture-tool/blob/main/src/webgpu-mipmap-generator.js

        4. GitHub - gpuweb/cts: WebGPU Conformance Test Suite

        5. https://github.com/vilyLei/gpuweb

        6. GitHub - samdauwe/webgpu-native-examples: Collection of C-language examples that demonstrate basic rendering and computation in WebGPU native.

将这些梳理完，熟悉起来，就能用WebGPU实施计算或者进一步实现光栅或者光追渲染功能了。

相关组织:

        1. (GPU for the Web) GPU for the Web Community Group

        2. gpuweb · GitHub

        3. chrome和firefox各自实现的WebGPU: Hello WebGPU - Learn WebGPU for C++ documentation

        4. ...