WebGPU 学习资料大全

📖 什么是 WebGPU？

WebGPU 是新一代 Web 图形 API，由 W3C 制定标准，旨在取代 WebGL。它基于现代 GPU API（Vulkan、Metal、Direct3D 12）设计，提供更好的性能、更灵活的 GPU 加速能力，并原生支持通用 GPU 计算（GPGPU）。

WebGPU vs WebGL

🌐 官方资源

官方网站与规范

• WebGPU 官网 - 官方首页，包含实现状态、示例、规范链接
• MDN WebGPU API 文档 - 最权威的 API 参考
• WebGPU 规范草案 - W3C 官方规范
• WGSL 规范 - WebGPU 着色器语言规范
• WebGPU 实现状态 - 各浏览器实现进度

官方示例

• WebGPU Samples - Google 维护的官方示例集合
• WebGPU Fundamentals - 系统性教程网站

📚 推荐教程

入门教程（英文）

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 学习指南

   • 完整的学习路径建议
   • 从线性代数到图形学再到 WebGPU API

2. WebGL3D 中文网 WebGPU 教程

   • 详细的 API 讲解
   • 完整的代码示例
   • 从三角形到复杂渲染

3. CSDN WebGPU 入门系列

   • WebGPU 快速入门教程
   • WGSL 着色器语言详解
   • 顶点缓冲区、渲染管线配置

4. WebGPU 引擎开发

   • C++ 和 TypeScript 双版本
   • 引擎开发过程详解

💻 开发环境

浏览器支持

开发工具

• VSCode 插件

  • WGSL - WGSL 语法高亮
  • WGSL Literal - 模板字符串中的 WGSL 语法支持

• Chrome DevTools

  • 支持 WGSL 着色器调试
  • 可以设置断点、查看变量
  • 性能分析面板

🎯 核心概念

架构层次

物理 GPU → 原生 GPU API (Metal/Vulkan/D3D12) → WebGPU 适配器 → GPU 设备

关键对象

两种管线

1. Render Pipeline - 图形渲染

   • Vertex Stage（顶点着色器）
   • Fragment Stage（片元着色器）

2. Compute Pipeline - 通用计算

   • Compute Stage（计算着色器）

📝 WGSL 着色器语言

基础类型

向量类型

• vec2<f32>, vec3<f32>, vec4<f32> - 2D/3D/4D 向量
• 常用：vec4<f32> 表示位置或颜色 (RGBA)

简单示例

// 顶点着色器
@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); // 红色
}

🚀 快速开始代码

基础渲染示例

// 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 库

原生实现

🎮 示例项目与演示

有趣的项目

• compute.toys - 计算着色器游乐场（类似 Shadertoy）
• Shadeup - 简化 WebGPU 实验的语言
• Web Stable Diffusion - 浏览器中运行 Stable Diffusion
• WebLLM - 浏览器中运行大语言模型

游戏引擎

• 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 - 精选资源列表
• webgpu-samples - 官方示例代码
• LearningWebGPU - 中文教程

社区

• Matrix: #WebGPU:matrix.org
• Reddit: r/WebGPU
• W3C GPU for the Web 工作组

🎯 适合谁学？

收集整理：小凯 | 时间：2026-03-07
标签：#WebGPU #GPU #图形学 #前端 #教程 #小凯