在线演示: WebGPU Samples 官网
WebGPU Samples 是一套展示 WebGPU API 用法的示例和演示集合。WebGPU 是新一代 Web 图形 API，提供对现代 GPU 的底层访问能力。
我们提供了详细的中文学习教程，帮助你从零开始掌握 WebGPU：
👉 开始学习 →
| 教程 | 难度 | 内容 |
|---|---|---|
| WebGPU 基础概念 | ⭐ | Adapter、Device、Buffer、Texture、Pipeline |
| Hello Triangle | ⭐ | WebGPU 初始化、着色器、渲染循环 |
| Hello Triangle MSAA | ⭐ | 多重采样抗锯齿 |
| Rotating Cube | ⭐⭐ | 顶点缓冲区、MVP矩阵、深度测试 |
| Textured Cube | ⭐⭐ | 纹理加载、采样器、Bind Groups |
| Compute Boids | ⭐⭐⭐ | 计算着色器、Storage Buffer |
- WGSL 速查表 - 着色器语言语法速查
- WebGPU API 参考 - JavaScript API 速查
- Node.js 18+
- 支持 WebGPU 的浏览器:
- Chrome 113+
- Edge 113+
- Safari 17+ (macOS Sonoma)
- Firefox (需开启实验特性)
# 1. 克隆项目 (如果还没有)
git clone https://github.com/webgpu/webgpu-samples.git
cd webgpu-samples
# 2. 安装依赖
npm ci
# 3. 启动开发服务器
npm start
# 4. 打开浏览器访问
# http://localhost:8080| 命令 | 说明 |
|---|---|
npm ci |
安装依赖 |
npm start |
启动开发服务器 (热重载) |
npm run build |
生产环境构建 |
npm run serve |
运行生产服务器 |
webgpu-samples/
│
├── 📄 index.html # 项目入口页面
├── 📄 package.json # 项目配置和依赖
├── 📄 rollup.config.js # Rollup 打包配置
├── 📄 LICENSE.txt # BSD-3-Clause 许可证
│
├── 📚 docs/ # 学习教程文档
│ ├── README.md # 学习路径索引 (入口)
│ ├── 00-webgpu-basics.md # WebGPU 基础概念
│ ├── 01-hello-triangle.md # Hello Triangle 教程
│ ├── 02-hello-triangle-msaa.md
│ ├── 03-rotating-cube.md
│ ├── 05-textured-cube.md
│ ├── 11-compute-boids.md
│ └── appendix/ # 附录
│ ├── wgsl-cheatsheet.md # WGSL 速查表
│ └── webgpu-api-reference.md # API 参考
│
├── 🎯 sample/ # 示例源码目录 (40+ 示例)
│ ├── helloTriangle/ # 基础示例
│ │ ├── index.html # 示例页面
│ │ ├── main.ts # 主程序逻辑
│ │ └── meta.ts # 示例元数据
│ ├── rotatingCube/
│ ├── texturedCube/
│ ├── computeBoids/
│ ├── shadowMapping/
│ ├── deferredRendering/
│ ├── particles/
│ ├── cornell/ # 光线追踪
│ └── ... # 更多示例
│
├── 🎨 shaders/ # 共享着色器 (WGSL)
│ ├── basic.vert.wgsl # 基础顶点着色器
│ ├── triangle.vert.wgsl # 三角形顶点着色器
│ ├── red.frag.wgsl # 红色片段着色器
│ ├── black.frag.wgsl # 黑色片段着色器
│ ├── vertexPositionColor.frag.wgsl
│ └── fullscreenTexturedQuad.wgsl
│
├── 📦 meshes/ # 3D 网格数据
│ ├── cube.ts # 立方体顶点数据
│ ├── sphere.ts # 球体
│ ├── box.ts # 盒子
│ ├── teapot.ts # 茶壶
│ ├── stanfordDragon.ts # 斯坦福龙模型
│ ├── primitives.ts # 基础图元
│ ├── mesh.ts # 网格基类
│ └── utils.ts # 工具函数
│
├── 🌐 public/ # 静态资源
│ ├── assets/
│ │ ├── img/ # 图片纹理 (PNG, JPG)
│ │ ├── font/ # 字体资源
│ │ ├── gltf/ # 3D 模型 (GLB)
│ │ └── video/ # 视频文件
│ ├── css/ # 样式文件
│ │ ├── styles.css # 全局样式
│ │ ├── HomePage.css # 首页样式
│ │ ├── MainLayout.css # 主布局
│ │ └── SampleLayout.css # 示例页面布局
│ └── js/
│ └── iframe-helper.js # iframe 辅助脚本
│
├── 🔧 src/ # 框架源码
│ ├── main.ts # 主入口
│ ├── samples.ts # 示例注册
│ ├── types.d.ts # 类型定义
│ └── utils/ # 工具函数
│
├── 🛠️ build/ # 构建脚本
│ ├── tools/
│ │ ├── build.js # 构建脚本
│ │ ├── serve.js # 开发服务器
│ │ └── copy.js # 文件复制
│ └── lib/ # 构建工具库
│
└── 📁 out/ # 构建输出目录 (gitignore)
└── ... # 编译后的文件
| 文件/目录 | 说明 |
|---|---|
sample/*/main.ts |
每个示例的主程序，包含 WebGPU 初始化和渲染逻辑 |
sample/*/index.html |
示例的 HTML 页面 |
sample/*/*.wgsl |
示例专用的着色器文件 |
shaders/*.wgsl |
多个示例共享的着色器 |
meshes/*.ts |
3D 模型的顶点数据定义 |
src/samples.ts |
所有示例的注册和配置 |
每个示例目录通常包含：
sample/exampleName/
├── index.html # HTML 页面模板
├── main.ts # TypeScript 主程序
├── meta.ts # 示例元数据 (名称、描述、标签)
└── *.wgsl # 该示例专用的着色器 (可选)
| 示例 | 说明 |
|---|---|
helloTriangle |
最基础的 WebGPU 示例 |
helloTriangleMSAA |
带抗锯齿的三角形 |
rotatingCube |
旋转的彩色立方体 |
twoCubes |
渲染两个立方体 |
texturedCube |
带纹理的立方体 |
instancedCube |
实例化渲染 |
| 示例 | 说明 |
|---|---|
computeBoids |
粒子群模拟 (Boids 算法) |
gameOfLife |
康威生命游戏 |
bitonicSort |
GPU 排序算法 |
imageBlur |
图像模糊处理 |
| 示例 | 说明 |
|---|---|
shadowMapping |
阴影映射 |
deferredRendering |
延迟渲染 |
normalMap |
法线贴图 |
particles |
高级粒子系统 |
cubemap |
立方体贴图/天空盒 |
| 示例 | 说明 |
|---|---|
a-buffer |
顺序无关透明度 |
cornell |
康奈尔盒 (光线追踪) |
volumeRenderingTexture3D |
体积渲染 |
- 按顺序学习 - 从 Hello Triangle 开始，逐步深入
- 动手实践 - 修改代码，观察效果变化
- 理解着色器 - WGSL 是 WebGPU 的核心
- 善用调试 - Chrome DevTools 的 WebGPU 面板
- 阅读规范 - 遇到问题查阅官方文档
BSD-3-Clause License
开始你的 WebGPU 学习之旅吧！ 🚀
👉 查看学习教程