从零学会 WebGPU

学习路径

站点分成四块。下面的教程顺序和侧边栏一致，可以从任意一章进入。

教程 按顺序学习 介绍、基础对象、WGSL、渲染管线、缓冲、纹理、深度，一直到计算着色器。 开始教程 → API 参考 查阅核心对象 概览之后是 GPUBuffer、GPUTexture、GPUSampler、绑定组、渲染管线、计算管线和命令编码器。 打开 API 参考 → 实例 运行短例子 从三角形开始，接着是顶点缓冲区、uniform 缓冲区和纹理采样。 运行三角形 → 延伸 规范与生态 W3C 规范、WGSL、MDN，以及 Babylon.js、Three.js 等引擎的入口。 查看资源 →

教程顺序

每一章都接在上一章后面，从第一个适配器写到计算着色器。

1. 1 介绍 WebGPU 能做什么，以及当前浏览器能不能跑。
2. 2 基础对象 适配器、设备、命令编码器和队列。
3. 3 WGSL 基础 类型、入口函数，以及阶段之间怎么传数据。
4. 4 渲染管线 着色器模块、管线和渲染通道。
5. 5 缓冲区 用 GPUBuffer 上传顶点和索引。
6. 6 绑定组 把缓冲、纹理和采样器交给着色器。
7. 7 Uniform 缓冲区 传递每帧都会变的参数。
8. 8 纹理与采样器 上传像素，并在片元着色器里采样。
9. 9 深度缓冲 用深度测试处理遮挡。
10. 10 计算着色器 写入存储纹理，并把缓冲读回 CPU。

教程在任何浏览器里都能阅读。页面里的实时示例需要支持 WebGPU 的浏览器。

可运行的例子

• 三角形
• 顶点缓冲区
• Uniform 缓冲区
• 纹理映射