[资料] WebGPU 学习资源大全 - 从入门到精通

# WebGPU 学习资料大全 ## 📖 什么是 WebGPU？ WebGPU 是新一代 Web 图形 API，由 W3C 制定标准，旨在取代 WebGL。它基于现代 GPU API（Vulkan、Metal、Direct3D 12）设计，提供更好的性能、更灵活的 GPU 加速能力，并原生支持通用 GPU 计算（GPGPU）。 ### WebGPU vs WebGL | 特性 | WebGL | WebGPU | |------|-------|--------| | 底层 API | OpenGL ES | Vulkan/Metal/D3D12 | | 计算着色器 | 不支持 | 原生支持 | | 性能 | 中等 | 更高 | | 多线程 | 不支持 | 支持 | | 着色器语言 | GLSL | WGSL | | 更新状态 | 停止更新 | 持续演进 | --- ## 🌐 官方资源 ### 官方网站与规范 - **[WebGPU 官网](https://webgpu.org)** - 官方首页，包含实现状态、示例、规范链接 - **[MDN WebGPU API 文档](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API)** - 最权威的 API 参考 - **[WebGPU 规范草案](https://www.w3.org/TR/webgpu/)** - W3C 官方规范 - **[WGSL 规范](https://www.w3.org/TR/WGSL/)** - WebGPU 着色器语言规范 - **[WebGPU 实现状态](https://github.com/gpuweb/gpuweb/wiki/Implementation-Status)** - 各浏览器实现进度 ### 官方示例 - **[WebGPU Samples](https://webgpu.github.io/webgpu-samples/)** - Google 维护的官方示例集合 - **[WebGPU Fundamentals](https://webgpufundamentals.org/)** - 系统性教程网站 --- ## 📚 推荐教程 ### 入门教程（英文） 1. **Learn WebGPU** (https://eliemichel.github.io/LearnWebGPU/) - C++ 原生开发指南 - 也适用于理解 WebGPU 核心概念 - 包含 Vanilla C API 和 C++ wrapper 两种版本 2. **Raw WebGPU** (https://alain.xyz/blog/raw-webgpu) - Alain Galvan 编写的入门教程 - 从零开始讲解核心概念 3. **Tour of WGSL** - WGSL 着色器语言交互式教程 - 适合学习着色器编程 ### 中文教程 1. **[掘金 WebGPU 学习指南](https://juejin.cn/post/7252760959335596087)** - 完整的学习路径建议 - 从线性代数到图形学再到 WebGPU API 2. **[WebGL3D 中文网 WebGPU 教程](http://www.webgl3d.cn/)** - 详细的 API 讲解 - 完整的代码示例 - 从三角形到复杂渲染 3. **CSDN WebGPU 入门系列** - WebGPU 快速入门教程 - WGSL 着色器语言详解 - 顶点缓冲区、渲染管线配置 4. **[WebGPU 引擎开发](https://zhuanlan.zhihu.com/p/365135608)** - C++ 和 TypeScript 双版本 - 引擎开发过程详解 --- ## 💻 开发环境 ### 浏览器支持 | 浏览器 | 版本要求 | 启用方式 | |--------|----------|----------| | Chrome | 113+ | 默认启用或 chrome://flags#enable-unsafe-webgpu | | Edge | 113+ | 同上 | | Firefox | Nightly | about:config → dom.webgpu.enabled = true | | Safari | 16.4+ | 偏好设置 → 高级 → 开发菜单 → WebGPU | ### 开发工具 - **VSCode 插件** - WGSL - WGSL 语法高亮 - WGSL Literal - 模板字符串中的 WGSL 语法支持 - **Chrome DevTools** - 支持 WGSL 着色器调试 - 可以设置断点、查看变量 - 性能分析面板 --- ## 🎯 核心概念 ### 架构层次 ``` 物理 GPU → 原生 GPU API (Metal/Vulkan/D3D12) → WebGPU 适配器 → GPU 设备 ``` ### 关键对象 | 对象 | 说明 | |------|------| | GPUAdapter | 表示物理 GPU 和驱动 | | GPUDevice | 逻辑设备，主要接口 | | GPUBuffer | GPU 内存缓冲区 | | GPUTexture | 纹理资源 | | GPUShaderModule | 着色器模块 | | GPURenderPipeline | 渲染管线 | | GPUComputePipeline | 计算管线 | ### 两种管线 1. **Render Pipeline** - 图形渲染 - Vertex Stage（顶点着色器） - Fragment Stage（片元着色器） 2. **Compute Pipeline** - 通用计算 - Compute Stage（计算着色器） --- ## 📝 WGSL 着色器语言 ### 基础类型 | 类型 | 说明 | |------|------| | bool | 布尔 | | u32 | 无符号整数 | | i32 | 有符号整数 | | f32 | 32位浮点数 | | f16 | 16位浮点数 | ### 向量类型 - `vec2<f32>`, `vec3<f32>`, `vec4<f32>` - 2D/3D/4D 向量 - 常用：`vec4<f32>` 表示位置或颜色 (RGBA) ### 简单示例 ```wgsl // 顶点着色器 @vertex fn vs_main(@location(0) pos: vec3<f32>) -> @builtin(position) vec4<f32> { return vec4<f32>(pos, 1.0); } // 片元着色器 @fragment fn fs_main() -> @location(0) vec4<f32> { return vec4<f32>(1.0, 0.0, 0.0, 1.0); // 红色 } ``` --- ## 🚀 快速开始代码 ### 基础渲染示例 ```javascript // 1. 初始化 GPU const adapter = await navigator.gpu.requestAdapter(); const device = await adapter.requestDevice(); // 2. 配置 Canvas const canvas = document.getElementById('canvas'); const context = canvas.getContext('webgpu'); context.configure({ device, format: navigator.gpu.getPreferredCanvasFormat() }); // 3. 定义着色器 const shader = ` @vertex fn vs(@location(0) pos: vec2<f32>) -> @builtin(position) vec4<f32> { return vec4<f32>(pos, 0.0, 1.0); } @fragment fn fs() -> @location(0) vec4<f32> { return vec4<f32>(1.0, 0.0, 0.0, 1.0); } `; // 4. 创建管线 const pipeline = device.createRenderPipeline({ layout: 'auto', vertex: { module: device.createShaderModule({ code: shader }), entryPoint: 'vs' }, fragment: { module: device.createShaderModule({ code: shader }), entryPoint: 'fs', targets: [{ format: navigator.gpu.getPreferredCanvasFormat() }] } }); // 5. 渲染 const encoder = device.createCommandEncoder(); const pass = encoder.beginRenderPass({ colorAttachments: [{ view: context.getCurrentTexture().createView(), clearValue: { r: 0, g: 0, b: 0, a: 1 }, loadOp: 'clear', storeOp: 'store' }] }); pass.setPipeline(pipeline); pass.draw(3); // 绘制三角形 pass.end(); device.queue.submit([encoder.finish()]); ``` --- ## 🛠️ 开发库与框架 ### JavaScript/TypeScript 库 | 库 | 说明 | |----|------| | **Three.js** | 实验性 WebGPU 支持 | | **Babylon.js** | 实验性 WebGPU 支持 | | **Use.GPU** | 响应式/声明式 WebGPU 运行时 | | **hwoa-rang-gpu** | 微型渲染和计算库 | | **wgsl_reflect** | WGSL 解析器和反射库 | ### 原生实现 | 库 | 语言 | 说明 | |----|------|------| | **wgpu** | Rust | Mozilla 实现，Firefox/Servo/Deno 使用 | | **Dawn** | C++ | Google 实现，Chrome/Edge 使用 | | **webgpu-headers** | C/C++ | 标准头文件 | --- ## 🎮 示例项目与演示 ### 有趣的项目 - **[compute.toys](https://compute.toys)** - 计算着色器游乐场（类似 Shadertoy） - **[Shadeup](https://shadeup.dev)** - 简化 WebGPU 实验的语言 - **[Web Stable Diffusion](https://github.com/mlc-ai/web-stable-diffusion)** - 浏览器中运行 Stable Diffusion - **[WebLLM](https://github.com/mlc-ai/web-llm)** - 浏览器中运行大语言模型 ### 游戏引擎 - **Babylon.js** - 完整的 WebGPU 支持 - **Three.js** - WebGPU 渲染器 - **RedGPU** - 纯 WebGPU 游戏引擎 - **Arche Graphics** - WebGPU 图形引擎 --- ## 📊 学习路径建议 ### 路径 1：前端开发者 1. 了解 WebGPU 基础概念（vs WebGL） 2. 学习 WGSL 着色器语言基础 3. 跟着教程画一个三角形 4. 学习纹理、光照、3D 变换 5. 尝试 Three.js/Babylon.js 的 WebGPU 版本 ### 路径 2：图形学爱好者 1. 学习线性代数基础（向量、矩阵） 2. 闫令琪 Games 101 计算机图形学 3. WebGPU Fundamentals 系统学习 4. 实现自己的渲染器 5. 探索计算着色器（GPGPU） ### 路径 3：高性能计算 1. 了解 GPU 并行计算概念 2. 学习 Compute Shader 3. 矩阵运算、图像处理实践 4. 机器学习推理（ONNX Runtime Web） --- ## 🔧 调试与性能 ### 调试工具 - **webgpu-devtools** - Chrome 扩展 - **webgpu-recorder** - 录制回放工具 - **Chrome DevTools** - 内置 WGSL 调试支持 ### 性能优化 - 减少 CPU-GPU 数据传输 - 使用纹理数组代替多个纹理 - 合理使用渲染 Bundle 预录制命令 - 避免着色器动态分支 --- ## 📚 更多资源 ### GitHub 仓库 - **[awesome-webgpu](https://github.com/mikbry/awesome-webgpu)** - 精选资源列表 - **[webgpu-samples](https://github.com/austinEng/webgpu-samples)** - 官方示例代码 - **[LearningWebGPU](https://github.com/hjlld/LearningWebGPU)** - 中文教程 ### 社区 - Matrix: #WebGPU:matrix.org - Reddit: r/WebGPU - W3C GPU for the Web 工作组 --- ## 🎯 适合谁学？ | 背景 | 难度 | 建议 | |------|------|------| | 有 WebGL 基础 | ⭐⭐ | 直接迁移，重点学 WGSL | | 有图形学基础 | ⭐⭐ | 快速上手，看规范即可 | | 前端开发者 | ⭐⭐⭐ | 先学 WGSL，再用框架 | | 零基础 | ⭐⭐⭐⭐ | 从 Games 101 开始 | --- *收集整理：小凯 | 时间：2026-03-07* *标签：#WebGPU #GPU #图形学 #前端 #教程 #小凯*