WebGPU 入门指南：在浏览器中释放 GPU 计算能力

Author Avatar
via
发表：2026-07-19 09:01:22
修改：2026-07-19 09:01:21

引言

WebGPU 是新一代的 Web 图形和计算 API，旨在取代 WebGL，为浏览器带来更强大的 GPU 加速能力。与 WebGL 主要聚焦于图形渲染不同，WebGPU 原生支持通用计算（Compute Shader），这意味着你可以直接在浏览器中利用 GPU 进行大规模并行计算——从机器学习推理到物理模拟，再到图像处理，都不需要安装任何原生应用。

截至 2026 年，WebGPU 已在 Chrome、Edge 和 Safari 技术预览版中获得稳定支持，Firefox 也在逐步推进。本文将从零开始，带你理解 WebGPU 的核心概念，并手把手实现一个完整的 GPU 计算示例。

WebGPU vs WebGL：核心区别

要理解 WebGPU 的价值，先看看它和 WebGL 的关键差异：

  • 架构设计：WebGL 基于 OpenGL ES，状态机模型，大量全局状态容易出错。WebGPU 基于现代 GPU API（Vulkan/Metal/D3D12），采用显式资源管理，状态更清晰。
  • 计算能力：WebGL 没有原生计算着色器，需要用片段着色器"伪装"计算。WebGPU 原生支持 Compute Shader，可以直接用 GPU 做通用计算。
  • 性能：WebGPU 的命令录制模型减少了 CPU-GPU 之间的通信开销，支持命令缓冲复用。
  • 类型安全：WebGPU 使用 WGSL（WebGPU Shading Language），比 GLSL 更现代，内置类型检查更严格。

核心概念速览

在动手之前，需要理解 WebGPU 的几个核心抽象：

1. Adapter 和 Device

GPUAdapter 代表一个物理 GPU 设备的抽象，GPUDevice 则是逻辑设备句柄。所有资源都从 Device 创建。

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

2. Buffer 和 Texture

GPUBuffer 用于存储数据（顶点、矩阵、计算输入输出等），GPUTexture 用于存储图像数据。创建 Buffer 时需要指定用途标志（usage），比如 GPUBufferUsage.STORAGE 表示该 Buffer 可被着色器读写。

3. Pipeline

Pipeline 是预编译的 GPU 执行程序。计算管线（ComputePipeline）包含一个着色器入口函数；渲染管线（RenderPipeline）则包含顶点和片段着色器。Pipeline 一旦创建就不可变，这有利于驱动层优化。

4. Bind Group 和 Bind Group Layout

Bind Group 定义了着色器如何绑定资源（Buffer、Texture、Sampler）。Bind Group Layout 是其模板，定义了资源的槽位结构。这套机制让资源绑定变得显式且可预测。

5. Command Encoder 和 Command Buffer

所有 GPU 操作都通过 Command Encoder 录制，然后编码成 Command Buffer 提交给队列执行。这种"录制-提交"模型减少了同步开销。

实战：用 GPU 做大规模向量加法

理论够了，来写代码。我们用 WebGPU 实现一个经典的 GPU 入门示例：将两个长度为 N 的数组相加，结果存入第三个数组。虽然这个例子简单，但它完整展示了 WebGPU 计算管线的全流程。

步骤 1：初始化 Device

async function initGPU() {
  if (!navigator.gpu) {
    throw new Error('WebGPU 不被当前浏览器支持');
  }
  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    throw new Error('找不到合适的 GPU 适配器');
  }
  const device = await adapter.requestDevice();
  return device;
}

步骤 2：创建 Buffer

我们需要三个 Buffer：两个输入和一个输出。每个 Buffer 都需要映射到 CPU 可写的内存来填充初始数据。

function createBuffers(device, data1, data2) {
  const length = data1.length;
  const byteLength = length * 4; // Float32 = 4 bytes

  // 输入 Buffer A
  const bufferA = device.createBuffer({
    size: byteLength,
    usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC
  });

  // 输入 Buffer B
  const bufferB = device.createBuffer({
    size: byteLength,
    usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC
  });

  // 输出 Buffer
  const bufferResult = device.createBuffer({
    size: byteLength,
    usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC
  });

  // 写入数据
  device.queue.writeBuffer(bufferA, 0, data1);
  device.queue.writeBuffer(bufferB, 0, data2);

  return { bufferA, bufferB, bufferResult, length };
}

注意 device.queue.writeBuffer() 方法——它比传统的 mapAsync + memcpy 模式更简洁，适合一次性写入场景。

步骤 3：编写 WGSL 着色器

WGSL 是 WebGPU 的官方着色语言。它的语法融合了 Rust 和 TypeScript 的特点，对 Web 开发者比较友好。

const shaderCode = `
@group(0) @binding(0) var<storage, read> a: array<f32>;
@group(0) @binding(1) var<storage, read> b: array<f32>;
@group(0) @binding(2) var<storage, read_write> result: array<f32>;

@compute @workgroup_size(64)
fn main(@builtin(global_invocation_id) global_id: vec3<u32>) {
  let index = global_id.x;
  if (index >= arrayLength(&a)) {
    return;
  }
  result[index] = a[index] + b[index];
}
`;

解释几个关键点：

  • @workgroup_size(64) 表示每个工作组包含 64 个线程。GPU 会以工作组为单位调度执行。
  • global_invocation_id 是当前线程的全局 ID，用于确定要处理的数据索引。
  • var<storage, read> 表示只读存储缓冲区，read_write 表示可读写。
  • 边界检查 if (index >= arrayLength(&a)) 很重要，因为线程数可能超过数据量。

步骤 4：创建 Pipeline 和 Bind Group

function createPipeline(device, shaderCode, buffers) {
  const shaderModule = device.createShaderModule({ code: shaderCode });

  const bindGroupLayout = device.createBindGroupLayout({
    entries: [
      { binding: 0, visibility: GPUShaderStage.COMPUTE, buffer: { type: 'read-only-storage' } },
      { binding: 1, visibility: GPUShaderStage.COMPUTE, buffer: { type: 'read-only-storage' } },
      { binding: 2, visibility: GPUShaderStage.COMPUTE, buffer: { type: 'storage' } }
    ]
  });

  const pipeline = device.createComputePipeline({
    layout: device.createPipelineLayout({ bindGroupLayouts: [bindGroupLayout] }),
    compute: { module: shaderModule, entryPoint: 'main' }
  });

  const bindGroup = device.createBindGroup({
    layout: bindGroupLayout,
    entries: [
      { binding: 0, resource: { buffer: buffers.bufferA } },
      { binding: 1, resource: { buffer: buffers.bufferB } },
      { binding: 2, resource: { buffer: buffers.bufferResult } }
    ]
  });

  return { pipeline, bindGroup };
}

步骤 5：提交计算命令

async function runCompute(device, pipeline, bindGroup, length) {
  const encoder = device.createCommandEncoder();
  const pass = encoder.beginComputePass();
  pass.setPipeline(pipeline);
  pass.setBindGroup(0, bindGroup);

  // 计算需要多少个工作组（每组 64 线程）
  const workgroups = Math.ceil(length / 64);
  pass.dispatchWorkgroups(workgroups);
  pass.end();

  device.queue.submit([encoder.finish()]);
  await device.queue.onSubmittedWorkDone();
}

步骤 6：读取结果

async function readResult(device, buffer, length) {
  const resultBuffer = device.createBuffer({
    size: length * 4,
    usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST
  });

  const encoder = device.createCommandEncoder();
  encoder.copyBufferToBuffer(buffer, 0, resultBuffer, 0, length * 4);
  device.queue.submit([encoder.finish()]);

  await resultBuffer.mapAsync(GPUMapMode.READ);
  const array = new Float32Array(resultBuffer.getMappedRange());
  const result = Array.from(array);
  resultBuffer.unmap();
  return result;
}

这里有个重要的细节：Storage Buffer 不能直接 map 读取，需要先复制到一个 MAP_READ 类型的 Buffer 中。这是 WebGPU 显式资源管理的体现——不同用途的 Buffer 有不同的访问模式。

性能对比与思考

在我们的测试中（Chrome 126，RTX 3060），对 1000 万个元素的数组进行加法运算：

  • CPU（单线程）：约 45ms
  • WebGPU Compute：约 3ms（含数据传输开销）

对于简单加法，优势已经明显。对于更复杂的计算（矩阵乘法、卷积、FFT），GPU 的优势会呈指数级放大。但要注意，数据传输（CPU→GPU→CPU）本身有开销，数据量太小时 GPU 可能反而更慢。一般经验是数据量超过 10 万元素时，WebGPU 才开始有优势。

实际应用场景

WebGPU 的计算能力在以下场景中特别有价值：

  1. 机器学习推理：TensorFlow.js 和 ONNX Runtime Web 已经支持 WebGPU 后端，推理速度比 WASM 后端快 3-10 倍。
  2. 图像处理：实时滤镜、边缘检测、模糊等操作可以完全在 GPU 上完成，不阻塞主线程。
  3. 物理模拟：粒子系统、流体模拟等需要大规模并行计算的场景。
  4. 加密与哈希：GPU 的并行特性适合某些密码学计算。
  5. 数据可视化：对大规模数据集进行实时聚合和变换。

注意事项与最佳实践

浏览器兼容性

虽然 WebGPU 已在主流浏览器中逐步落地，但仍有用户使用不支持的浏览器。建议使用特性检测：

if (!navigator.gpu) {
  // 回退到 WebGL 或 CPU 方案
  console.warn('WebGPU 不可用，使用回退方案');
}

资源管理

GPU 资源有限，Buffer 和 Texture 创建后需要手动销毁。虽然 GC 最终会回收，但在长时间运行的应用中应及时调用 buffer.destroy() 避免内存泄漏。

错误处理

WebGPU 操作可能因设备丢失（比如系统休眠后 GPU 重置）而失败。建议监听 device.lost 事件并实现重连逻辑：

device.lost.then((info) => {
  console.error('GPU 设备丢失:', info.message);
  // 重新初始化
  initGPU().then(setupScene);
});

总结

WebGPU 标志着 Web 平台 GPU 编程的新时代。它不仅带来了更好的图形渲染性能，更重要的是通过 Compute Shader 打开了通用计算的大门。随着浏览器支持的普及和工具链的成熟，我们可以期待更多重度计算应用 running purely in the browser——无需安装、跨平台、利用本地 GPU 的强大算力。

如果你正在做需要大量计算的前端项目，现在就是开始探索 WebGPU 的好时机。从简单的 Compute Shader 开始，逐步迁移性能瓶颈代码到 GPU，你会发现浏览器的计算能力远比你想象的强大。

评论