WebGPU 入门

概述

WebGPU 是新一代 Web 图形和计算 API，由 W3C 的 GPU for the Web 工作组制定。它旨在取代 WebGL 系列，为浏览器带来更现代、更高效的 GPU 访问能力。与 WebGL 基于 OpenGL ES 的架构不同，WebGPU 的设计借鉴了 Vulkan、Metal 和 DirectX 12 等现代图形 API 的核心理念，提供了更底层的硬件控制、更高效的 CPU 到 GPU 通信、以及强大的通用计算（GPGPU）能力。

WebGPU 的出现标志着 Web 图形技术进入了一个新的时代。它不仅解决了 WebGL 多年来积累的设计局限，还为 Web 平台上运行复杂的 3D 游戏、高性能数据可视化、机器学习推理、视频处理等场景开辟了全新的可能性。

WebGPU 核心概念

WebGPU 的 API 设计围绕几个核心概念展开，理解这些概念是掌握 WebGPU 的关键。

Adapter（适配器）

Adapter 代表物理 GPU 设备。通过 navigator.gpu.requestAdapter() 获取，它可以返回集成显卡或独立显卡对应的适配器。Adapter 提供了关于 GPU 设备的基本信息，如设备名称、特性支持列表、内存大小等。在拥有多 GPU 的系统上，开发者可以根据需要选择合适的 Adapter，例如优先选择独立显卡以获得更高性能。

const adapter = await navigator.gpu.requestAdapter()
console.log(adapter.name) // 如 "Intel(R) UHD Graphics"

Device（设备）

Device 是 Adapter 的逻辑实例化，代表一个 GPU 设备的连接。通过 adapter.requestDevice() 创建，它是实际提交命令、创建资源的对象。Device 是 WebGPU 中最核心的交互对象，管理着所有的 GPU 资源和命令提交。每个 Device 内部维护着命令队列（Queue），用于提交 GPU 指令。

const device = await adapter.requestDevice()

Queue（队列）

Queue 是向 GPU 提交命令的通道。所有 GPU 指令（渲染、计算、数据拷贝）都需要通过 Queue 提交。这种设计保证了命令执行的顺序性和线程安全性。在 WebGPU 中，每个 Device 默认包含一个主队列，开发者通过该队列提交命令缓冲区（Command Buffer）执行。

const commandEncoder = device.createCommandEncoder()
// ... 编码命令
const commandBuffer = commandEncoder.finish()
device.queue.submit([commandBuffer])

Pipeline（管线）

Pipeline 是 WebGPU 中最重要的概念之一。它定义了 GPU 处理数据的完整流程。WebGPU 主要有两种管线类型：

计算管线（Compute Pipeline）：专为通用计算设计，不涉及图形渲染。它包含一个计算着色器（Compute Shader），可以对大量数据进行并行处理。计算管线非常适合物理模拟、图像处理、粒子系统等密集型计算任务。

渲染管线（Render Pipeline）：用于图形渲染，包含多个阶段的着色器程序。最基础的渲染管线包含顶点着色器（Vertex Shader）和片元着色器（Fragment Shader），此外还包括深度测试、模板测试、多重采样等固定功能阶段的配置。

// 创建渲染管线示例
const pipeline = device.createRenderPipeline({
  layout: 'auto',
  vertex: {
    module: vertexShaderModule,
    entryPoint: 'main',
    buffers: [{ attributes, arrayStride: 20 }]
  },
  fragment: {
    module: fragmentShaderModule,
    entryPoint: 'main',
    targets: [{ format: 'bgra8unorm' }]
  }
})

着色器语言 WGSL

WebGPU 使用 WGSL（WebGPU Shading Language）作为着色器语言。WGSL 专为 Web 设计，语法类似于 Rust，强调类型安全、内存安全和可移植性。与 WebGL 使用的 GLSL 相比，WGSL 提供了更严格的类型系统和更清晰的资源绑定模型。

// 一个简单的计算着色器示例
@group(0) @binding(0) var<storage, read> input : array<f32>;
@group(0) @binding(1) var<storage, read_write> output : array<f32>;

@compute @workgroup_size(256)
fn main(@builtin(global_invocation_id) id : vec3<u32>) {
  output[id.x] = input[id.x] * 2.0;
}

计算着色器：并行计算的利器

计算着色器是 WebGPU 相较于 WebGL 最大的能力提升之一。它允许开发者直接在 GPU 上运行通用的并行计算程序，无需经过图形渲染管线。

工作过程

计算着色器通过工作组（Workgroup）的概念组织并行线程。每个工作组包含多个调用（Invocation），这些调用在 GPU 的并行计算单元上同时执行。开发者通过 @workgroup_size 属性指定每个工作组的线程数量，然后通过分发（Dispatch）命令启动计算。

GPU 线程组织方式：
  计算分派 (Dispatch)
    └─ 工作组 (Workgroup) N 个
         └─ 调用 (Invocation) M 个，由 @workgroup_size 定义

典型应用场景

粒子系统模拟：数千颗粒子的位置、速度、颜色更新操作完全独立，可以天然地映射到 GPU 的并行计算模型上。CPU 仅需每帧提交一次计算命令，然后直接读取计算结果进行渲染。

图像处理：卷积操作、颜色变换、缩放滤镜等像素级操作，每个像素的处理逻辑相同且互不依赖，是计算着色器的理想应用场景。

物理模拟：基于网格的流体模拟、布料模拟、刚体碰撞检测等，可以利用计算着色器在 GPU 上高效执行。

渲染管线深度解析

WebGPU 的渲染管线是一个高度可配置的处理流程，相比 WebGL 提供了更精细的控制。

顶点着色器（Vertex Shader）

顶点着色器处理每个顶点的数据，负责将模型坐标转换为屏幕坐标。它接收顶点属性（位置、法线、UV 坐标等）作为输入，输出经过变换后的顶点数据。

struct VertexInput {
  @location(0) position : vec3<f32>;
  @location(1) color : vec3<f32>;
};

struct VertexOutput {
  @builtin(position) clip_position : vec4<f32>;
  @location(0) color : vec3<f32>;
};

@vertex
fn main(input: VertexInput) -> VertexOutput {
  var output: VertexOutput;
  output.clip_position = vec4<f32>(input.position, 1.0);
  output.color = input.color;
  return output;
}

片元着色器（Fragment Shader）

片元着色器处理每个像素（片元）的着色，决定最终显示在屏幕上的颜色。它在顶点着色器之后执行，接收插值后的顶点数据。

@fragment
fn main(input: VertexOutput) -> @location(0) vec4<f32> {
  return vec4<f32>(input.color, 1.0);
}

固定功能阶段

渲染管线中还包含多个固定功能阶段：

• 裁剪与剔除：控制哪些面被裁剪（正面、背面、都不裁剪）
• 深度/模板测试：控制像素的深度比较和模板操作
• 多重采样：MSAA（多重采样抗锯齿）配置
• 混合模式：控制新像素与帧缓冲区已有像素的混合方式

Pipeline 布局与资源绑定

WebGPU 使用绑定组（Bind Group）来管理着色器资源的绑定。资源（缓冲区、纹理、采样器）通过绑定组布局与管线关联，这种设计相比 WebGL 的全局状态管理更加清晰高效。

绑定模型：
  Pipeline Layout
    └─ Bind Group Layout 0
         ├─ Binding 0: 缓冲区（uniform）
         ├─ Binding 1: 纹理
         └─ Binding 2: 采样器
    └─ Bind Group Layout 1
         └─ Binding 0: 缓冲区（storage）

WebGPU vs WebGL 性能对比

对比维度	WebGPU	WebGL 2.0
API 设计	低开销、接近 Vulkan/Metal	基于 OpenGL ES 3.0
CPU 开销	极低，减少驱动层开销	较高，状态机模型
多线程	支持（通过计算着色器）	不支持
通用计算	原生支持计算着色器	需通过纹理/变通方式实现
资源管理	显式、可预测	隐式状态管理
着色器语言	WGSL（类型安全）	GLSL ES
验证层	内置严格验证	较弱的验证
加载时间	减少着色器编译卡顿	首次编译容易卡顿

在具体的性能测试中，WebGPU 在以下场景中表现显著优于 WebGL：

1. 大量 Draw Call 场景：WebGPU 的 CPU 命令编码开销仅为 WebGL 的 10%~30%
2. 计算密集型任务：原生计算着色器比 WebGL 通过纹理模拟计算快 3~10 倍
3. 资源创建和更新：显式的资源管理减少了不必要的状态变更和管线切换

浏览器兼容性现状

WebGPU 已经被所有主流浏览器支持和推进：

• Chrome/Edge：自 Chrome 113（2023 年 5 月）起默认支持
• Firefox：在 Nightly 版本中支持，标准版正在开发中
• Safari：在 Safari 16.4+ 中以实验性功能形式提供

截至 2025 年，WebGPU 的全球浏览器覆盖率约为 75% 以上，主流桌面浏览器已经全面支持。移动端的支持正在加速推进中，预计在未来 1-2 年内会达到可用水平。

特性矩阵

特性	Chrome	Edge	Firefox	Safari
Compute Shader	✅	✅	⚠️ 开发中	❌
Render Pipeline	✅	✅	⚠️ Nightly	✅ 实验
Storage Texture	✅	✅	⚠️ 开发中	❌
Timestamp Query	✅	✅	❌	❌

最佳实践

1. 渐进增强策略：优先检测 WebGPU 支持，不支持时降级到 WebGL 或 Canvas 2D
2. 资源复用：尽可能复用已创建的 Pipeline、Bind Group 和 Buffer 对象
3. 命令批处理：将多个渲染命令合并到同一个 Command Buffer 中提交
4. 内存管理：及时销毁不再使用的资源，避免内存泄漏
5. 利用计算着色器：将适合并行计算的任务从 CPU 卸载到 GPU

总结

WebGPU 代表了 Web 图形技术的未来方向，它提供了接近原生图形 API 的性能和灵活性。虽然目前浏览器支持还在完善中，但对于需要高性能图形渲染和通用计算能力的 Web 应用来说，WebGPU 已经是一个值得投入的技术方向。通过理解其核心概念——Adapter、Device、Queue、Pipeline 和 WGSL——开发者可以充分利用 GPU 的能力，构建出以前只能在原生应用中才能实现的体验。