WebGPU 深度解析：当 Chrome 正式发布 WebGPU 实现，Web 图形与通用计算的新纪元已至

作者按： 2026年4月14日，Chrome 团队正式发布 WebGPU 首个生产级实现，在 Chrome 113 Beta 中默认启用，并将于4月26日发布稳定版。这是 Web 图形历史上最重要的一次技术跨越——它不仅是 WebGL 的替代品，更是一套为现代 GPU 通用计算而生的全新标准。本文从工程视角出发，深入解析 WebGPU 的架构设计、WGSL 着色器语言、Compute Shader 机器学习推理实战，以及它与 WebGL 的本质差异。

一、背景：为什么我们需要 WebGPU

1.1 WebGL 的历史功绩与局限性

WebGL（Web Graphics Library）诞生于2011年，基于 OpenGL ES 2.0 设计，在过去十五年里支撑了 Web 上绝大多数的 3D 可视化、在线游戏和数据图形化场景。它的核心贡献是：将 OpenGL 的能力以 JavaScript API 的形式引入浏览器，让开发者无需插件即可在网页中渲染硬件加速图形。

然而，WebGL 的设计包袱也是显而易见的：

（1）API 模型与现代 GPU 架构脱节

WebGL 基于固定管线（Fixed Function Pipeline）的理念设计，虽然后续通过扩展支持了一些现代特性，但整体架构无法充分利用 DirectX 12、Vulkan、Metal 等现代图形 API 的能力。具体来说：

• WebGL 的状态管理是全局式的，每次 draw call 都要经历大量的状态检查和上下文同步，开销巨大
• 缺乏显式的资源布局控制和显式同步机制，导致驱动层不得不做大量隐式优化
• 着色器编译和管线状态构建在运行时完成，无法预分析和预优化

（2）无法利用现代 GPU 通用计算能力

现代 GPU 的核心能力早已不限于图形渲染。GPGPU（General Purpose computing on Graphics Processing Units）允许用 GPU 的并行计算单元处理通用计算任务——机器学习推理、科学计算、物理模拟、图像处理等场景都依赖这一能力。

WebGL 虽然可以通过渲染到纹理（GPGPU 模式）来实现通用计算，但极其笨拙：

• 数据必须编码为纹理格式
• 计算结果必须从帧缓冲区读取
• 缺乏原子操作、共享内存等现代并行计算基础设施

（3）移动端性能天花板

在 iOS 上，WebGL 通过 WKWebView 和 Safari 实现，但 Safari 对 WebGL 扩展的支持一直落后于 Chrome，加上 Metal 和 WebGL 之间的转换层损耗，使得移动端 WebGL 性能表现参差不齐。

1.2 WebGPU 的诞生：从 W3C 规范到 Chrome 实现

WebGPU 是 W3C GPU for the Web 社区组于 2017 年开始制定的标准，旨在提供一套现代化的 GPU 编程接口，让 Web 平台能够充分利用最新 GPU 硬件的能力。

WebGPU 的设计充分借鉴了三代成熟桌面图形 API 的最佳实践：

Chrome 的 WebGPU 实现基于 Mozilla 开发的 Dawn 项目——一个跨平台的 WebGPU 实现层，将 WebGPU 调用转换为底层图形 API（Vulkan/Metal/Direct3D 12）。这也解释了为什么 CVE-2026-5281 漏洞出现在 Dawn 中。

1.3 2026年4月：Chrome 正式版发布的意义

Chrome 113 Beta 于2026年4月14日默认启用 WebGPU，稳定版将于4月26日发布。这意味着：

• WebGPU 从「实验性功能」正式进入「生产就绪」阶段
• Chrome 113 将是第一个在 Windows、macOS、ChromeOS 上均可使用 WebGPU 的稳定版本
• Linux 及其他平台的支持将在年内陆续推出

对于 Web 开发者而言，这意味着：现在开始学习 WebGPU，不是追逐热点，而是为未来五到十年的 Web 图形技术做好储备。

二、核心架构：Adapter、Device、Queue 三层模型

2.1 三层对象模型的设计哲学

WebGPU 的核心对象模型只有三个：Adapter（适配器）、Device（设备）、Queue（队列）。这个设计看似简单，实则蕴含了现代 GPU 编程的核心思想——分离关注点。

Adapter（适配器）
    ↓ 请求
Device（设备）
    ↓ 创建命令
Queue（队列）
    ↓ 提交执行
GPU 硬件

Adapter（GPU适配器）

Adapter 代表物理 GPU 设备或软件渲染器。在浏览器中，通常有两个 Adapter 可选：

• Discrete GPU（独立显卡）：如 NVIDIA RTX 系列、AMD Radeon 系列，性能强，功耗高
• Integrated GPU（集成显卡）：如 Intel UHD、AMD APU，性能较弱，功耗低，适合移动端

通过 navigator.gpu.requestAdapter() 请求 Adapter 时，可以指定 powerPreference 参数：

const adapter = await navigator.gpu.requestAdapter({
  powerPreference: 'high-performance' // 'low-power' | 'default'
});

if (!adapter) {
  console.error('WebGPU not supported');
  return;
}

这一步的本质是让应用程序表达对 GPU 类型的偏好，同时让浏览器在安全和性能之间做出平衡——即使请求高性能 GPU，浏览器也可能因为驱动不兼容等原因返回一个低功耗 Adapter。

Device（逻辑设备）

Device 是 WebGPU 中最核心的对象，代表一个逻辑 GPU 设备。所有 WebGPU 资源的创建（Buffer、Texture、ShaderModule、Sampler、Pipeline 等）都通过 Device 完成。

const device = await adapter.requestDevice({
  requiredLimits: {
    maxStorageBufferBindingSize: adapter.limits.maxStorageBufferBindingSize,
  },
  requiredFeatures: ['depth32float-stencil8'], // 可选特性
});

// 监听设备丢失事件
device.lost.then((info) => {
  console.error(`Device lost: ${info.message}`);
});

Device 的 lost 事件是 WebGPU 架构中一个重要的设计——与 WebGL 的上下文丢失类似，但更优雅。应用可以通过监听这个事件来恢复状态，而不是崩溃。

Queue（命令队列）

Queue 代表 GPU 命令的提交队列。在现代 GPU 架构中，所有渲染和计算命令都通过队列提交，GPU 硬件按序或并行执行队列中的命令。

const queue = device.queue;

// Queue 的一次操作是原子的——要么全部成功，要么全部失败
// 这与 WebGL 的即时模式（immediate mode）形成鲜明对比

2.2 命令缓冲区：延迟提交架构

WebGPU 采用了**命令缓冲区（Command Buffer）**模式，这是它与 WebGL 最核心的架构差异之一。

WebGL 是即时模式（Immediate Mode）——每次调用 gl.drawArrays() 或 gl.drawElements() 时，JavaScript 直接将命令发送给 GPU，立即执行。这种模式简单直观，但有两个致命问题：

1. CPU 端开销大：每次 draw call 都需要 JavaScript 和 GPU 驱动之间的大量交互
2. 无法批量优化：GPU 无法预知下一帧的渲染内容，无法做预取和并行化

WebGPU 的**延迟模式（Deferred Mode）**工作流程：

// 1. 获取命令编码器
const commandEncoder = device.createCommandEncoder();

// 2. 用编码器记录一系列命令（这些命令存储在命令缓冲区中，不会立即发送到 GPU）
const renderPass = commandEncoder.beginRenderPass({
  colorAttachments: [{
    view: texture.createView(),
    clearValue: { r: 0, g: 0, b: 0, a: 1 },
    loadOp: 'clear',
    storeOp: 'store',
  }],
});

// 在 render pass 中记录渲染命令
renderPass.setPipeline(renderPipeline);
renderPass.setVertexBuffer(0, vertexBuffer);
renderPass.draw(3);

renderPass.end();

// 3. 提交命令缓冲区——所有命令一次性发送给 GPU
const commandBuffer = commandEncoder.finish();
queue.submit([commandBuffer]);

为什么要这样做？

现代 GPU 有数十到数百个计算/渲染核心，最好的性能来自批量处理——一次性提交大量工作，让 GPU 的调度器能够全局优化执行顺序。这正是命令缓冲区模式的核心价值。

2.3 资源模型：Buffer 与 Texture

GPU Buffer

Buffer 是 WebGPU 中最基础的线性内存区域，用于存储顶点数据、索引数据、uniform 数据、存储数据等。

// 创建一个用于存储顶点数据的 GPU Buffer
const vertexBuffer = device.createBuffer({
  size: 1024,                    // 缓冲区大小（字节）
  usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
  mappedAtCreation: true,        // 创建时即映射，方便写入初始数据
});

const vertices = new Float32Array([
  0.0,  0.5, 0.0,  // 顶点 0
 -0.5, -0.5, 0.0,  // 顶点 1
  0.5, -0.5, 0.0,  // 顶点 2
]);

new Float32Array(vertexBuffer.getMappedRange()).set(vertices);
vertexBuffer.unmap(); // 写入完成后取消映射

// 从 CPU 内存复制数据到 GPU Buffer（通过 Queue）
const stagingBuffer = device.createBuffer({
  size: 1024,
  usage: GPUBufferUsage.COPY_SRC | GPUBufferUsage.MAP_WRITE,
  mappedAtCreation: true,
});
new Float32Array(stagingBuffer.getMappedRange()).set(newVertices);
stagingBuffer.unmap();

commandEncoder.copyBufferToBuffer(
  stagingBuffer, 0,   // 源 Buffer 及偏移
  vertexBuffer, 0,     // 目标 Buffer 及偏移
  1024                 // 复制字节数
);

Buffer 的 Usage 标志是 WebGPU 显式资源模型的核心——你必须预先声明 Buffer 的使用方式（只读、只写、可读写，作为顶点、索引、uniform、存储等），GPU 驱动可以据此进行优化。WebGL 中这个信息是隐式的，驱动只能靠运行时猜测。

GPU Texture

Texture 是二维或三维图像数据，支持多种像素格式和采样模式。

const texture = device.createTexture({
  size: [width, height, 1],      // [宽, 高, 深度/层数]
  format: 'rgba8unorm',           // 像素格式
  usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC,
  dimension: '2d',
  mipLevelCount: Math.floor(Math.log2(Math.max(width, height))) + 1,
  sampleCount: 4,                 // 多重采样抗锯齿
});

// 创建 TextureView——描述如何解读 Texture 数据
const textureView = texture.createView({
  format: 'rgba8unorm',
  dimension: '2d',
  baseMipLevel: 0,
  mipLevelCount: 1,
  baseArrayLayer: 0,
  arrayLayerCount: 1,
});

三、WGSL：专为 WebGPU 设计的着色器语言

3.1 为什么需要 WGSL

WebGPU 使用 WGSL（WebGPU Shading Language）作为其原生着色器语言。这是一个重大决定——WebGL 使用的是 GLSL（OpenGL Shading Language），而 WebGPU 选择从头设计一门新语言，背后有深思熟虑的技术原因：

（1）安全优先

GLSL 在 WebGL 中的执行方式存在严重安全隐患。着色器代码以字符串形式传递给 WebGL API，在驱动层编译执行，恶意网页可以构造特殊格式的 GLSL 代码触发驱动漏洞。历史上大量 WebGL 零日漏洞都源于此。

WGSL 从设计上就是「安全第一」：

• 所有着色器必须通过 device.createShaderModule() 加载，编译器内置于浏览器进程中
• 语法严格，不允许隐式类型转换、指针运算等危险特性
• 数组越界、未初始化变量等行为有明确定义，不会触发 UB（未定义行为）

（2）适配现代 GPU 并行模型

WGSL 的设计借鉴了 Rust 的类型系统和安全理念，同时也从 HLSL（DirectX）和 SPIR-V（Vulkan）中汲取了成熟的并行编程范式。它天然支持：

• 工作组（workgroup）并行计算
• 显式的内存同步和屏障
• 统一的标量类型系统

3.2 WGSL 核心语法

变量与类型

// 标量类型：i32（有符号32位整数）、u32（无符号32位整数）
// f32（32位浮点）、f16（16位浮点，半精度）
// bool

var<private> count: i32 = 0;          // private（着色器内持久）变量
var<function> temp: f32 = 0.0;       // function（函数内临时）变量
var<uniform> resolution: vec2f;       // uniform（全局只读）变量
var<storage, read> data: array<f32>;  // storage（可读写缓冲区）变量

// 向量和矩阵
var<uniform> transform: mat4x4<f32>;  // 4x4 矩阵
var<uniform> normalMatrix: mat3x3<f32>;
var<uniform> color: vec4<f32>;

函数与入口点

// 顶点着色器入口
@vertex
fn vertexMain(
  @location(0) position: vec3f,
  @location(1) color: vec3f,
) -> @builtin(position) vec4f {
  return vec4f(position, 1.0);
}

// 片元着色器入口
@fragment
fn fragmentMain(
  @location(0) color: vec3f,
) -> @location(0) vec4f {
  return vec4f(color, 1.0);
}

// 计算着色器入口
// @workgroup_size 指定工作组大小
// num_workgroups 由 CPU 端通过 dispatchWorkgroups() 指定
@compute
@workgroup_size(64, 1, 1)  // 每个工作组 64 个工作项
fn computeMain(
  @builtin(global_invocation_id) globalId: vec3u,
  @builtin(workgroup_id) groupId: vec3u,
) {
  let index = globalId.x;
  // 计算逻辑...
}

内置函数

WGSL 提供了丰富的内置函数，覆盖数学运算、向量操作、纹理采样等场景：

// 数学函数
let x = abs(-3.14f);           // 绝对值
let y = clamp(0.5, 0.0, 1.0);  // 限制在 [0, 1]
let z = mix(a, b, 0.5);        // 线性插值
let w = smoothstep(0.0, 1.0, t); // 平滑阶梯

// 三角函数
let sinValue = sin(angle);
let cosValue = cos(angle);
let tanValue = tan(angle);

// 矩阵运算
let determinant = determinant(mat);
let inverse = inverse(mat);
let transformed = mat * vec4f(position, 1.0);

3.3 WGSL 的内存同步机制

WGSL 的内存同步是它比 GLSL 更严谨的核心体现之一。在并行计算中，不同工作项同时读写共享内存时，如果没有正确的同步机制，会产生数据竞争（data race）。

var<workgroup> sharedData: array<f32, 256>;  // 工作组内共享内存

@compute
@workgroup_size(256)
fn parallelReduce(
  @builtin(global_invocation_id) globalId: vec3u,
  @builtin(local_invocation_index) localIndex: u32,
) {
  // 1. 将数据加载到共享内存
  sharedData[localIndex] = loadFromGlobalBuffer(globalId.x);
  
  // 2. 工作组内的内存屏障——确保所有工作项都完成共享内存写入
  workgroupBarrier();
  
  // 3. 归约计算（树形归约）
  var step = 128u;
  for (; step > 0u; step = step / 2u) {
    if (localIndex < step) {
      sharedData[localIndex] = sharedData[localIndex] + sharedData[localIndex + step];
    }
    workgroupBarrier();  // 每次迭代后同步
  }
}

四、Compute Shader 实战：浏览器端机器学习推理

4.1 为什么 WebGPU 的 Compute Shader 是游戏改变者

WebGPU 最激动人心的能力之一是计算着色器（Compute Shader）。这是 WebGL 完全缺失的能力——在 WebGL 中，如果你想在浏览器里运行机器学习模型，只有两条路：

1. 使用 WebGL 的 GPGPU 模式：将矩阵运算编码为纹理操作，通过渲染管线执行。TensorFlow.js 就是这样做的——但代码极其复杂，性能也有上限。
2. 使用 WebAssembly + SIMD：受限于 CPU 算力，无法利用 GPU 的并行优势。

WebGPU 的 Compute Shader 提供了一条真正的第三条路：用接近原生的性能，在浏览器中运行 GPU 加速的通用计算。

根据 Chrome 团队公布的数据，WebGPU 的机器学习推理性能比 WebGL 提升超过 3 倍，部分场景甚至达到 10 倍以上。

4.2 矩阵乘法：理解 Compute Shader 的工作原理

矩阵乘法是机器学习推理的核心运算。GPU 的并行计算优势在这里体现得淋漓尽致——对于两个 512×512 的矩阵乘法，CPU 需要做 512³ ≈ 1.34 亿次乘加操作，GPU 可以同时调度数万个计算单元并行处理。

下面是一个完整的矩阵乘法 WebGPU 实现：

JavaScript 端：

// 矩阵 A: M×K, 矩阵 B: K×N, 结果 C: M×N
async function matrixMultiply(device, aBuffer, bBuffer, cBuffer, M, N, K) {
  // 1. 创建计算管道
  const computeShader = `
    @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> c : array<f32>;
    
    @compute @workgroup_size(8, 8)
    fn main(
      @builtin(global_invocation_id) globalId : vec3u,
    ) {
      let row = globalId.x;
      let col = globalId.y;
      
      if (row >= ${M}u || col >= ${N}u {
        return;
      }
      
      var sum = 0.0f;
      for (var k = 0u; k < ${K}u; k = k + 1u) {
        let aIndex = row * ${K}u + k;
        let bIndex = k * ${N}u + col;
        sum = sum + a[aIndex] * b[bIndex];
      }
      
      let cIndex = row * ${N}u + col;
      c[cIndex] = sum;
    }
  `;

  const shaderModule = device.createShaderModule({ code: computeShader });
  
  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 bindGroup = device.createBindGroup({
    layout: bindGroupLayout,
    entries: [
      { binding: 0, resource: { buffer: aBuffer } },
      { binding: 1, resource: { buffer: bBuffer } },
      { binding: 2, resource: { buffer: cBuffer } },
    ],
  });

  const pipelineLayout = device.createPipelineLayout({
    bindGroupLayouts: [bindGroupLayout],
  });

  const computePipeline = device.createComputePipeline({
    layout: pipelineLayout,
    compute: { module: shaderModule, entryPoint: 'main' },
  });

  // 2. 编码并提交计算命令
  const commandEncoder = device.createCommandEncoder();
  const computePass = commandEncoder.beginComputePass();
  computePass.setPipeline(computePipeline);
  computePass.setBindGroup(0, bindGroup);
  
  // 3. 分发工作组——每个工作组处理 8×8 的输出矩阵块
  const dispatchX = Math.ceil(M / 8);
  const dispatchY = Math.ceil(N / 8);
  computePass.dispatchWorkgroups(dispatchX, dispatchY);
  
  computePass.end();
  
  const commandBuffer = commandEncoder.finish();
  device.queue.submit([commandBuffer]);
  
  // 4. 等待计算完成并读取结果
  await device.queue.onSubmittedWorkDone();
  const resultBuffer = device.createBuffer({
    size: M * N * 4,
    usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ,
  });
  
  const readEncoder = device.createCommandEncoder();
  readEncoder.copyBufferToBuffer(cBuffer, 0, resultBuffer, 0, M * N * 4);
  device.queue.submit([readEncoder.finish()]);
  
  await resultBuffer.mapAsync(GPUMapMode.READ);
  const result = new Float32Array(resultBuffer.getMappedRange());
  
  return result;
}

性能分析：

这个实现的计算复杂度是 O(M×N×K)。对于两个 1024×1024 的矩阵：

• 总运算量：1024³ = 约 10.7 亿次乘加运算
• GPU 并行度：1024×1024 = 1048576 个并行工作项
• 理论加速比：相比单核 CPU 约 500-1000 倍

4.3 实战：Transformer 注意力机制的 WebGPU 实现

现代大语言模型的核心运算是 Self-Attention（自注意力）机制，包含以下步骤：

1. QKV 投影：输入矩阵 X 通过三个权重矩阵 Wq、Wk、Wv 投影为 Q、K、V
2. 注意力分数：S = softmax(Q × K^T / √d)
3. 加权求和：O = S × V

每个步骤都是矩阵乘法，WebGPU 的 Compute Shader 可以高效地处理所有这些运算：

// 完整的 Self-Attention 前向传播（简化版）
async function selfAttention(device, inputBuffer, outputBuffer, 
                              wq, wk, wv, wo, batchSize, seqLen, hiddenDim) {
  const scratchSize = batchSize * seqLen * seqLen;
  
  const scratchBuffer = device.createBuffer({
    size: scratchSize * 4,  // f32
    usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC,
  });

  // 第一步：QKV 投影（三个独立的矩阵乘法）
  await matrixMultiply(device, inputBuffer, wq, qBuffer, batchSize * seqLen, hiddenDim, hiddenDim);
  await matrixMultiply(device, inputBuffer, wk, kBuffer, batchSize * seqLen, hiddenDim, hiddenDim);
  await matrixMultiply(device, inputBuffer, wv, vBuffer, batchSize * seqLen, hiddenDim, hiddenDim);

  // 第二步：注意力分数计算（Q × K^T）
  await batchMatmul(device, qBuffer, kBuffer, attentionScores, 
                    batchSize, seqLen, seqLen, hiddenDim);
  
  // 第三步：Softmax（在计算着色器中实现）
  await softmax(device, attentionScores, attentionProbs, batchSize, seqLen);
  
  // 第四步：注意力加权（Probs × V）
  await matrixMultiply(device, attentionProbs, vBuffer, hiddenStates, 
                    batchSize * seqLen, hiddenDim, seqLen);
  
  // 第五步：输出投影（O = HS × Wo）
  await matrixMultiply(device, hiddenStates, wo, outputBuffer, 
                    batchSize * seqLen, hiddenDim, hiddenDim);
}

4.4 实际应用：Transformers.js WebGPU 支持

Hugging Face 的 Transformers.js 是目前最流行的浏览器端机器学习库。2026年4月，其 v3 版本正式引入 WebGPU 支持，这意味着：

• 无需服务器：大模型可以直接在用户浏览器中运行，数据不离开本地
• 隐私保护：用户输入完全不经过任何第三方服务器
• 离线可用：模型缓存后可以在无网络环境下运行
• 性能大幅提升：相比 WebAssembly SIMD 版本，WebGPU 推理速度提升 3-10 倍

安装 Transformers.js v3 并启用 WebGPU：

import { pipeline, env } from '@huggingface/transformers';

// 启用 WebGPU 后端
env.allowLocalModels = false;
env.useBrowserCache = true;
env.backends.onnx.wasm.numThreads = 1;  // 禁用 WASM，让 WebGPU 全权负责

// 创建一个文本生成 pipeline
const generator = await pipeline('text-generation', 'Xenova/gpt2');

// 使用 WebGPU 加速的模型进行推理
const result = await generator('WebGPU is transforming web development by', {
  max_new_tokens: 100,
  temperature: 0.7,
  do_sample: true,
});

console.log(result[0].generated_text);

五、性能对比：WebGPU vs WebGL vs CPU

5.1 理论性能分析

5.2 实测：粒子系统性能对比

北京朝夕科技在 2026年4月14日的测试显示，在粒子系统渲染场景中，WebGPU 相比 WebGL 的性能优势达到 10 倍以上：

测试环境：NVIDIA GTX 1030（入门级显卡），5万粒子实时渲染

• WebGL 模式：约 15 FPS
• WebGPU 模式：约 60 FPS
• GPU 利用率：WebGPU 仅 5%，WebGL 达 40%（大部分开销在 JS 和驱动层）

这说明 WebGPU 的性能优势不仅来自 GPU 计算能力本身，更来自大幅降低的 JavaScript 和驱动层开销。

5.3 为什么 WebGPU 更快

（1）显式资源管理减少驱动猜测

WebGL 的隐式资源模型迫使 GPU 驱动在运行时做大量推测性优化——这个 Buffer 之后怎么用？这个纹理会不会被用作渲染目标？这些问题 WebGL 无法回答，驱动只能保守处理。

WebGPU 的 Usage 标志让应用程序明确告诉驱动资源的用途，驱动可以进行针对性的内存布局优化和指令预取。

（2）命令批量提交减少 IPC 开销

WebGL 的即时模式意味着每次 draw call 都是一次 JavaScript → 驱动 → GPU 的 IPC 调用。对于复杂的粒子系统，每帧可能有数万个 draw call，IPC 开销成为主要瓶颈。

WebGPU 的命令缓冲区模式将所有命令打包为一次 IPC 提交，GPU 可以在内部并行处理这些命令，开销从 N 次 IPC 降为 1 次。

（3）更细粒度的并行控制

WebGPU 的 @workgroup_size 允许开发者精确控制工作组大小，让 GPU 的 SIMD（单指令多数据）执行单元得到充分利用。相比之下，WebGL 无法控制 GPU 的并行执行粒度。

六、渲染管线与渲染实战

6.1 完整的渲染管线

WebGPU 的渲染管线比 WebGL 更加显式和可配置：

// 创建渲染管线
const renderPipeline = device.createRenderPipeline({
  layout: 'auto',  // 'auto' 让 WebGPU 自动推断布局，或显式指定
  
  vertex: {
    module: shaderModule,
    entryPoint: 'vertexMain',
    buffers: [
      // 顶点缓冲区布局
      {
        arrayStride: 12,  // 每个顶点 12 字节（3 × f32）
        attributes: [{
          shaderLocation: 0,    // 顶点着色器中 @location(0)
          offset: 0,
          format: 'float32x3', // vec3f
        }],
      },
      // 颜色缓冲区布局
      {
        arrayStride: 12,
        attributes: [{
          shaderLocation: 1,    // 顶点着色器中 @location(1)
          offset: 0,
          format: 'float32x3',
        }],
      },
    ],
  },
  
  fragment: {
    module: shaderModule,
    entryPoint: 'fragmentMain',
    targets: [{
      format: navigator.gpu.getPreferredCanvasFormat(), // 画布格式
      blend: {
        color: {
          srcFactor: 'src-alpha',
          dstFactor: 'one-minus-src-alpha',
          operation: 'add',
        },
        alpha: { operation: 'add' },
      },
    }],
  },
  
  primitive: {
    topology: 'triangle-list',  // 三角形图元
    cullMode: 'back',          // 背面剔除
    frontFace: 'ccw',          // 逆时针为正面
  },
  
  depthStencil: {
    format: 'depth24plus-stencil8',
    depthWriteEnabled: true,
    depthCompare: 'less',
    stencilFront: {
      compare: 'always',
      passOp: 'keep',
    },
    stencilBack: { compare: 'always' },
  },
});

6.2 完整渲染循环

const canvas = document.querySelector('canvas');
const context = canvas.getContext('webgpu');

const device = await navigator.gpu.requestAdapter().then(a => a.requestDevice());

// 配置画布格式
const format = navigator.gpu.getPreferredCanvasFormat();
context.configure({
  device,
  format,
  alphaMode: 'opaque',
});

// 渲染循环
function frame() {
  const commandEncoder = device.createCommandEncoder();
  
  // 渲染通道
  const renderPass = commandEncoder.beginRenderPass({
    colorAttachments: [{
      view: context.getCurrentTexture().createView(),
      clearValue: { r: 0.05, g: 0.05, b: 0.1, a: 1.0 },
      loadOp: 'clear',
      storeOp: 'store',
    }],
  });
  
  renderPass.setPipeline(renderPipeline);
  renderPass.setVertexBuffer(0, vertexBuffer);
  renderPass.setVertexBuffer(1, colorBuffer);
  renderPass.setIndexBuffer(indexBuffer, 'uint32');
  renderPass.drawIndexed(indexCount);  // 索引绘制
  // 或 renderPass.draw(vertexCount);   // 顶点绘制
  
  renderPass.end();
  
  device.queue.submit([commandEncoder.finish()]);
  
  requestAnimationFrame(frame);
}

requestAnimationFrame(frame);

七、安全模型：WebGPU 如何保护用户

7.1 GPU 进程隔离

WebGPU 的安全设计借鉴了现代浏览器的进程隔离模型：

渲染进程（JavaScript 执行）
    ↓ 通过 IPC 发送命令
GPU 进程（Dawn 实现）
    ↓ 调用图形 API
内核驱动
    ↓
GPU 硬件

WebGPU 命令不会直接发送到 GPU，而是经过 GPU 进程的 Dawn 实现层验证后才执行。这意味着：

• 恶意网页无法构造超范围内存访问
• 着色器代码在沙箱中编译，无法访问系统资源
• 资源绑定超出管线布局时会被拒绝

7.2 验证层（Validation Layer）

在开发环境下，WebGPU 可以启用验证层，在命令执行前进行全面的合法性检查：

// 开发环境启用调试标记
const device = await adapter.requestDevice({
  label: 'My WebGPU Device',
});

// 在 DevTools 中可以看到详细的 WebGPU 警告和错误信息

7.3 已知的 CVE-2026-5281 漏洞

值得注意的是，2026年4月初 Chrome Dawn 中发现了一个 Use-After-Free 零日漏洞（CVE-2026-5281），允许通过特制 HTML 页面在渲染器进程中执行代码。Google 已于2026年4月1日紧急发布补丁：

受影响版本：
- Windows/macOS: < 146.0.7680.178
- Linux: < 146.0.7680.177

修复措施：升级到 Chrome 146.0.7680.178 及以上版本

这提醒我们：即使是经过精心设计的安全系统，在复杂的图形驱动程序栈中仍然可能存在漏洞。WebGPU 的安全优势是架构层面的，但并不等于免疫所有安全威胁。

八、浏览器支持与渐进式迁移

8.1 浏览器支持现状（2026年4月）

8.2 特性检测与降级策略

async function initGraphics() {
  // 特性检测
  if (!navigator.gpu) {
    console.warn('WebGPU 不可用，降级到 WebGL2');
    return initWebGL();
  }
  
  try {
    const adapter = await navigator.gpu.requestAdapter();
    if (!adapter) {
      console.warn('无法获取 GPU 适配器，降级到 WebGL2');
      return initWebGL();
    }
    
    const device = await adapter.requestDevice();
    
    // 检查是否支持所需特性
    const requiredFeatures = ['float32-filterable'];
    for (const feature of requiredFeatures) {
      if (!device.features.has(feature)) {
        console.warn(`特性 ${feature} 不可用，使用降级方案`);
        return initWebGL();
      }
    }
    
    return initWebGPU(device);
  } catch (e) {
    console.error('WebGPU 初始化失败:', e);
    return initWebGL();
  }
}

8.3 WebGL → WebGPU 迁移策略

对于已有 WebGL 应用的团队，建议采用以下渐进式迁移策略：

第一阶段：共存期

• 将新功能使用 WebGPU 开发
• 保留现有 WebGL 功能
• 通过特性检测决定使用哪个渲染器

第二阶段：核心迁移

• 将性能关键路径（粒子系统、复杂着色器）迁移到 WebGPU
• 使用 WebGPU 的 Compute Shader 替代 WebGL 的 GPGPU 模式

第三阶段：全面替换

• WebGL 作为完全降级方案（仅在极老设备上使用）
• 所有渲染和计算使用 WebGPU

九、实战：构建一个 WebGPU 粒子系统

9.1 需求分析

我们要构建一个可配置参数的 GPU 粒子系统：

• 粒子数量：5万+
• 帧率：60 FPS
• 可配置：粒子寿命、颜色、速度、重力、湍流
• 平台：Chrome 113（Windows/macOS/ChromeOS）

9.2 完整实现

index.html

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebGPU 粒子系统演示</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { 
      background: #0a0a0f; 
      overflow: hidden; 
      font-family: system-ui, sans-serif;
      color: #e0e0e0;
    }
    canvas { display: block; width: 100vw; height: 100vh; }
    #info {
      position: fixed;
      top: 20px;
      left: 20px;
      font-size: 14px;
      background: rgba(0,0,0,0.6);
      padding: 16px;
      border-radius: 8px;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.1);
    }
    #info h3 { margin-bottom: 8px; color: #60a5fa; }
    #info p { margin: 4px 0; opacity: 0.7; }
    #fps { color: #34d399; font-weight: bold; }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  <div id="info">
    <h3>WebGPU 粒子系统</h3>
    <p>粒子数量: <span id="count">50,000</span></p>
    <p>帧率: <span id="fps">--</span> FPS</p>
    <p>GPU 利用率: <span id="gpu">--</span>%</p>
    <p>WebGPU: <span id="wgpu-status">检测中...</span></p>
  </div>

  <script type="module" src="main.js"></script>
</body>
</html>

main.js

// WebGPU 粒子系统完整实现
const PARTICLE_COUNT = 50000;
const WORKGROUP_SIZE = 64;

const particleShader = `
  struct Particle {
    position: vec2f,
    velocity: vec2f,
    life: f32,
    maxLife: f32,
    size: f32,
  }
  
  struct SimParams {
    gravity: f32,
    turbulence: f32,
    deltaTime: f32,
    time: f32,
  }
  
  @group(0) @binding(0) var<uniform> params: SimParams;
  @group(0) @binding(1) var<storage, read_write> particles: array<Particle>;
  
  // 伪随机数生成
  fn hash(n: u32) -> f32 {
    return f32((n * 1103515245 + 12345) & 0x7fffffff) / 2147483647.0;
  }
  
  @compute
  @workgroup_size(${WORKGROUP_SIZE})
  fn updateParticles(
    @builtin(global_invocation_id) globalId: vec3u,
    @builtin(num_workgroups) numWorkgroups: vec3u,
  ) {
    let index = globalId.x;
    
    if (index >= ${PARTICLE_COUNT}u {
      return;
    }
    
    var p = particles[index];
    
    // 更新生命周期
    p.life = p.life - params.deltaTime;
    
    if (p.life <= 0.0) {
      // 重生粒子
      let seed = index + u32(params.time * 100.0);
      let angle = hash(seed) * 6.28318;
      let speed = 50.0 + hash(seed + 1u) * 150.0;
      
      p.position = vec2f(0.0, -1.0);  // 从屏幕底部发射
      p.velocity = vec2f(
        cos(angle) * speed,
        sin(angle) * speed * 0.5 + 100.0  // 向上为主
      );
      p.life = 2.0 + hash(seed + 2u) * 3.0;
      p.maxLife = p.life;
      p.size = 2.0 + hash(seed + 3u) * 4.0;
    } else {
      // 应用重力
      p.velocity.y = p.velocity.y - params.gravity * params.deltaTime;
      
      // 应用湍流
      let turbX = sin(p.position.y * 0.1 + params.time * 3.0) * params.turbulence;
      let turbY = cos(p.position.x * 0.1 + params.time * 2.5) * params.turbulence;
      p.velocity.x = p.velocity.x + turbX * params.deltaTime;
      p.velocity.y = p.velocity.y + turbY * params.deltaTime;
      
      // 更新位置
      p.position = p.position + p.velocity * params.deltaTime;
      
      // 边界处理：屏幕环绕
      if (p.position.x < -1.5) p.position.x = 1.5;
      if (p.position.x > 1.5) p.position.x = -1.5;
      if (p.position.y > 1.5) p.position.y = -1.5;
    }
    
    particles[index] = p;
  }
`;

const renderShader = `
  struct Particle {
    position: vec2f,
    velocity: vec2f,
    life: f32,
    maxLife: f32,
    size: f32,
  }
  
  @group(0) @binding(0) var<storage, read> particles: array<Particle>;
  
  struct VertexOutput {
    @builtin(position) position: vec4f,
    @location(0) life: f32,
    @location(1) size: f32,
  }
  
  @vertex
  fn vertexMain(
    @builtin(vertex_index) vertexIndex: u32,
  ) -> VertexOutput {
    var output: VertexOutput;
    
    // 每个粒子渲染为一个点精灵（两个三角形组成的正方形）
    let particleIndex = vertexIndex / 6u;  // 每个粒子 6 个顶点
    let vertexInQuad = vertexIndex % 6u;  // 粒子内的顶点序号
    
    let p = particles[particleIndex];
    
    // 计算粒子四角顶点位置（归一化坐标转屏幕坐标）
    let lifeRatio = p.life / p.maxLife;
    
    let offsets = array<vec2f, 6>(
      vec2f(-1.0, -1.0), vec2f( 1.0, -1.0), vec2f( 1.0,  1.0),  // 第一个三角形
      vec2f(-1.0, -1.0), vec2f( 1.0,  1.0), vec2f(-1.0,  1.0),  // 第二个三角形
    );
    
    let offset = offsets[vertexInQuad] * p.size * 0.01 * lifeRatio;
    
    output.position = vec4f(p.position + offset, 0.0, 1.0);
    output.life = lifeRatio;
    output.size = p.size;
    
    return output;
  }
  
  @fragment
  fn fragmentMain(input: VertexOutput) -> @location(0) vec4f {
    // 基于生命周期计算颜色：从蓝色到红色到黄色
    let t = 1.0 - input.life;
    let r = smoothstep(0.0, 0.5, t);
    let g = smoothstep(0.3, 0.8, t);
    let b = 1.0 - smoothstep(0.0, 0.5, t);
    
    let alpha = smoothstep(0.0, 0.1, input.life) * smoothstep(0.0, 0.2, input.life);
    
    return vec4f(r, g, b, alpha);
  }
`;

// 主程序
class ParticleSystem {
  constructor(canvas) {
    this.canvas = canvas;
    this.particles = new Float32Array(PARTICLE_COUNT * 6);  // position(2) + velocity(2) + life(1) + maxLife(1)
    this.params = new Float32Array(4);  // gravity, turbulence, deltaTime, time
    this.lastTime = 0;
    this.frameCount = 0;
    this.fpsTime = 0;
    
    this.initWebGPU();
  }
  
  async initWebGPU() {
    if (!navigator.gpu) {
      document.getElementById('wgpu-status').textContent = '❌ 不支持';
      return;
    }
    
    const adapter = await navigator.gpu.requestAdapter({
      powerPreference: 'high-performance',
    });
    
    if (!adapter) {
      document.getElementById('wgpu-status').textContent = '❌ 无法获取适配器';
      return;
    }
    
    this.device = await adapter.requestDevice();
    this.context = this.canvas.getContext('webgpu');
    
    const format = navigator.gpu.getPreferredCanvasFormat();
    this.context.configure({
      device: this.device,
      format,
      alphaMode: 'opaque',
    });
    
    document.getElementById('wgpu-status').textContent = '✅ 已启用';
    
    this.initResources();
    this.initParticles();
    this.start();
  }
  
  initResources() {
    // 创建参数 Buffer
    this.paramsBuffer = this.device.createBuffer({
      size: 16,
      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
    });
    
    // 创建粒子数据 Buffer
    this.particleBuffer = this.device.createBuffer({
      size: PARTICLE_COUNT * 6 * 4,
      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
    });
    
    // 创建渲染顶点 Buffer（用于绘制点精灵）
    const quadVertices = new Float32Array(PARTICLE_COUNT * 6 * 2);
    for (let i = 0; i < PARTICLE_COUNT; i++) {
      // 每个粒子需要 6 个顶点
      // (x-1,y-1), (x+1,y-1), (x+1,y+1), (x-1,y-1), (x+1,y+1), (x-1,y+1)
      const base = i * 12;
      const vi = i * 6;
      // 顶点 0
      quadVertices[vi * 2 + 0] = -1; quadVertices[vi * 2 + 1] = -1;
      // 顶点 1
      quadVertices[vi * 2 + 2] =  1; quadVertices[vi * 2 + 3] = -1;
      // 顶点 2
      quadVertices[vi * 2 + 4] =  1; quadVertices[vi * 2 + 5] =  1;
      // 顶点 3
      quadVertices[vi * 2 + 6] = -1; quadVertices[vi * 2 + 7] = -1;
      // 顶点 4
      quadVertices[vi * 2 + 8] =  1; quadVertices[vi * 2 + 9] =  1;
      // 顶点 5
      quadVertices[vi * 2 + 10] = -1; quadVertices[vi * 2 + 11] = 1;
    }
    
    this.vertexBuffer = this.device.createBuffer({
      size: quadVertices.byteLength,
      usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
      mappedAtCreation: true,
    });
    new Float32Array(this.vertexBuffer.getMappedRange()).set(quadVertices);
    this.vertexBuffer.unmap();
    
    // 创建计算管线
    const computeShaderModule = this.device.createShaderModule({ code: particleShader });
    this.computePipeline = this.device.createComputePipeline({
      layout: 'auto',
      compute: { module: computeShaderModule, entryPoint: 'updateParticles' },
    });
    
    this.computeBindGroup = this.device.createBindGroup({
      layout: this.computePipeline.getBindGroupLayout(0),
      entries: [
        { binding: 0, resource: { buffer: this.paramsBuffer } },
        { binding: 1, resource: { buffer: this.particleBuffer } },
      ],
    });
    
    // 创建渲染管线
    const renderShaderModule = this.device.createShaderModule({ code: renderShader });
    this.renderPipeline = this.device.createRenderPipeline({
      layout: 'auto',
      vertex: {
        module: renderShaderModule,
        entryPoint: 'vertexMain',
        buffers: [{
          arrayStride: 8,  // vec2f = 2 * 4 字节
          stepMode: 'instance',  // 每实例一次
          attributes: [{ shaderLocation: 0, offset: 0, format: 'float32x2' }],
        }],
      },
      fragment: {
        module: renderShaderModule,
        entryPoint: 'fragmentMain',
        targets: [{
          format: navigator.gpu.getPreferredCanvasFormat(),
          blend: {
            color: { srcFactor: 'src-alpha', dstFactor: 'one', operation: 'add' },
            alpha: { operation: 'add' },
          },
        }],
      },
      primitive: { topology: 'triangle-list' },
      fragment: {
        module: renderShaderModule,
        entryPoint: 'fragmentMain',
        targets: [{ format: navigator.gpu.getPreferredCanvasFormat() }],
      },
    });
    
    this.renderBindGroup = this.device.createBindGroup({
      layout: this.renderPipeline.getBindGroupLayout(0),
      entries: [
        { binding: 0, resource: { buffer: this.particleBuffer } },
      ],
    });
  }
  
  initParticles() {
    for (let i = 0; i < PARTICLE_COUNT; i++) {
      const base = i * 6;
      // 随机初始位置
      this.particles[base + 0] = (Math.random() - 0.5) * 2;  // x
      this.particles[base + 1] = (Math.random() - 0.5) * 2;  // y
      // 随机初始速度
      this.particles[base + 2] = (Math.random() - 0.5) * 2;  // vx
      this.particles[base + 3] = (Math.random() - 0.5) * 2;  // vy
      // 随机生命周期
      this.particles[base + 4] = Math.random() * 5;  // life
      this.particles[base + 5] = this.particles[base + 4];  // maxLife
    }
    
    // 初始上传粒子数据
    const stagingBuffer = this.device.createBuffer({
      size: this.particles.byteLength,
      usage: GPUBufferUsage.COPY_SRC | GPUBufferUsage.MAP_WRITE,
      mappedAtCreation: true,
    });
    new Float32Array(stagingBuffer.getMappedRange()).set(this.particles);
    stagingBuffer.unmap();
    
    const commandEncoder = this.device.createCommandEncoder();
    commandEncoder.copyBufferToBuffer(stagingBuffer, 0, this.particleBuffer, 0, this.particles.byteLength);
    this.device.queue.submit([commandEncoder.finish()]);
  }
  
  start() {
    this.lastTime = performance.now();
    this.fpsTime = this.lastTime;
    this.animate();
  }
  
  animate() {
    const now = performance.now();
    const deltaTime = Math.min((now - this.lastTime) / 1000, 0.05);  // 限制最大 deltaTime
    this.lastTime = now;
    
    this.frameCount++;
    if (now - this.fpsTime >= 1000) {
      document.getElementById('fps').textContent = this.frameCount;
      this.frameCount = 0;
      this.fpsTime = now;
    }
    
    const time = now / 1000;
    
    // 更新参数
    this.params[0] = 9.8;    // gravity
    this.params[1] = 15.0;   // turbulence
    this.params[2] = deltaTime;
    this.params[3] = time;
    
    // 上传参数
    this.device.queue.writeBuffer(this.paramsBuffer, 0, this.params);
    
    // 创建命令编码器
    const commandEncoder = this.device.createCommandEncoder();
    
    // 计算通道：更新粒子
    const computePass = commandEncoder.beginComputePass();
    computePass.setPipeline(this.computePipeline);
    computePass.setBindGroup(0, this.computeBindGroup);
    computePass.dispatchWorkgroups(Math.ceil(PARTICLE_COUNT / WORKGROUP_SIZE));
    computePass.end();
    
    // 渲染通道
    const renderPass = commandEncoder.beginRenderPass({
      colorAttachments: [{
        view: this.context.getCurrentTexture().createView(),
        clearValue: { r: 0.04, g: 0.04, b: 0.06, a: 1.0 },
        loadOp: 'clear',
        storeOp: 'store',
      }],
    });
    
    renderPass.setPipeline(this.renderPipeline);
    renderPass.setVertexBuffer(0, this.vertexBuffer);
    renderPass.setBindGroup(0, this.renderBindGroup);
    renderPass.draw(PARTICLE_COUNT * 6);  // 每个粒子 6 个顶点
    renderPass.end();
    
    this.device.queue.submit([commandEncoder.finish()]);
    
    requestAnimationFrame(() => this.animate());
  }
}

// 启动
const canvas = document.getElementById('canvas');
new ParticleSystem(canvas);

十、总结与展望

10.1 WebGPU 的核心价值

经过本文的深入分析，我们可以清晰地看到 WebGPU 的定位——它不是 WebGL 的简单升级，而是一次范式级别的重新设计：

1. 架构层面：命令缓冲区模式将 JavaScript 与 GPU 执行解耦，大幅降低 IPC 开销
2. 编程模型：WGSL 提供了更安全、更现代的着色器编程体验
3. 通用计算：Compute Shader 让浏览器第一次真正拥有了 GPU 并行计算能力
4. 跨平台抽象：一次开发，Windows/macOS/Linux/Android/ChromeOS 多平台运行

10.2 2026年的 WebGPU 生态

Chrome 113 的发布标志着 WebGPU 从「规范」到「产品」的转变。我们看到：

• 开发工具成熟：Chrome DevTools 已内置 WebGPU 调试器，可以逐帧分析命令缓冲区的执行
• 生态系统起步：Three.js、D3.js、Mapbox 等主流库正在集成 WebGPU 支持
• 机器学习框架跟进：Transformers.js v3、WebNN 等开始在浏览器端提供 WebGPU 加速
• 行业采用加速：游戏引擎（如 Babylon.js）、数据可视化（如 deck.gl）、科学计算（如 molecular dynamics）领域开始出现生产级 WebGPU 应用

10.3 未来值得关注的方向

（1）WebGPU + WebNN：浏览器端 AI 推理的完整方案

WebNN（Web Neural Network API）是 W3C 正在制定的另一个重要标准，它提供了高层神经网络操作 API（如 matmul、conv2d、softmax 等）。WebGPU + WebNN 的组合，将为浏览器提供一条完整的、生产级的 AI 推理栈。

（2）多线程命令编码

WebGPU 目前仅支持单线程命令编码（主线程），但规范中已经预留了多线程支持。未来可以期待 Worker 线程中并行生成多个命令缓冲区，进一步提升复杂场景的 CPU 端效率。

（3）光线追踪（Ray Tracing）扩展

Vulkan 和 DirectX 12 已经支持硬件加速光线追踪。WebGPU 的未来版本很可能引入类似扩展，为 Web 上的实时光线追踪游戏和可视化打开大门。

（4）WebGPU 作为跨平台游戏引擎后端

随着 WebGPU 的普及，我们预期会看到更多游戏引擎将 WebGPU 作为一等公民的后端目标。这意味着：用 Unity/Unreal 开发的游戏，可以几乎不做修改地运行在 Web 上，性能接近原生。

10.4 给开发者的话

WebGPU 的发布，是 Web 平台能力的又一次质变。但作为开发者，我们需要理性看待：

值得投入的场景：

• 需要大量并行计算的应用（粒子系统、流体模拟、机器学习推理）
• 对性能要求极高的 3D 可视化（科学计算、金融数据可视化）
• 需要跨平台一次开发的专业应用

保持谨慎的场景：

• 简单的 2D 图形和动画——Canvas 2D 和 WebGL 已经完全够用
• 对旧浏览器兼容要求高的项目——WebGPU 还需要时间普及
• 快速原型和小工具——不必为了技术而用技术

WebGPU 不是万能的，但它为 Web 平台打开了一扇之前从未有过的门。现在，是时候开始学习了。

参考资源

• WebGPU 官方规范
• WGSL 语言规范
• Chrome WebGPU 发布公告
• WebGPU 学习网站
• Transformers.js v3 文档
• Dawn 项目（Chrome WebGPU 实现）
• 北京朝夕科技粒子系统演示：https://drawsee.com
• CVE-2026-5281 漏洞详情：CSDN 安全情报报告

本文首发于程序员茄子（chenxutan.com），如需转载，请注明出处。