WebGPU是什么？

WebGPU 是下一代 Web 端底层图形与通用计算 API，由 W3C GPU for the Web 工作组（包括 Apple、Google、Mozilla、Microsoft 等）联合制定。它的目标并非简单升级 WebGL，而是彻底重塑 Web 端与现代 GPU 硬件交互的范式。

一、为什么需要 WebGPU（对比 WebGL）

WebGL 基于 2000 年左右的 OpenGL ES 设计，其架构与现代 GPU 存在显著脱节：

全局状态机与 CPU 开销：WebGL 依赖全局状态机，频繁切换状态会导致大量的驱动层验证和 CPU 瓶颈。
缺乏原生通用计算（GPGPU）：WebGL 缺乏计算着色器，若要进行矩阵乘法等并行运算，只能把数据强行塞进纹理贴图，伪装成像素在片段着色器中计算。
无法发挥现代底层 API 优势：现代系统（Vulkan、DirectX 12、Metal）均转向显式控制、无状态或多线程记录命令的架构，WebGL 无法利用这些特性。

核心维度	WebGL (WebGL 2.0)	WebGPU
对齐的底层 API	OpenGL ES 2.0 / 3.0	Vulkan / Metal / DirectX 12
编程模型	隐式全局状态机（State Machine）	显式管线（Pipelines）与不可变对象
通用计算（GPGPU）	不支持，需通过渲染像素折衷模拟	原生支持计算管线（Compute Shader）
着色器语言	GLSL ES	WGSL (WebGPU Shading Language)
CPU 驱动开销	高（每次 Draw Call 需动态状态校验）	低（对象提前预编译与预烘焙验证）
适用核心场景	轻量 3D 展示、简单动画	大型 3D 游戏、端侧 AI 推理、科学可视化

二、WebGPU 核心设计与架构

WebGPU 借鉴了现代显卡驱动的思想，核心概念主要包括：

1. 适配器（Adapter）与设备（Device）

GPUAdapter：表示物理显卡设备（如集成显卡或独立显卡）及其硬件能力、限制。
GPUDevice：逻辑设备连接句柄，所有资源（纹理、缓冲区、管线）均由其实例化创建。

2. 预编译管线（Pipelines）与无状态命令记录

WebGPU 摒弃了动态状态机，将着色器阶段、缓冲区布局、混合模式等打包封装为不可变管线状态对象：

渲染管线（GPURenderPipeline）：包含顶点着色阶段、图元装配、光栅化及片元着色阶段。
计算管线（GPUComputePipeline）：专为非图形通用数据并行设计，仅需单一计算着色阶段。

3. 命令缓冲区与编码器（Command Encoding）

渲染和计算指令并非即时向 GPU 发送，而是通过编码器离线记录：

先通过 GPUCommandEncoder 生成渲染通道（RenderPass）或计算通道（ComputePass），将 BindGroups 与绘制指令录制进 GPUCommandBuffer。
最终通过 device.queue.submit([commandBuffer]) 一次性提交给 GPU 队列执行。这极大降低了 CPU 调度损耗，并为多线程录制命令铺平了道路。

4. 专属着色器语言：WGSL

WebGPU 没有直接复用 GLSL 或 SPIR-V，而是推出了专属的 WGSL（WebGPU Shading Language）：

语法现代清晰（类似 Rust/TypeScript 风格的数据类型与声明结构）。
针对 Web 安全沙箱严格设计，避免内存越界、死循环等 GPU 挂起漏洞。
浏览器会在底层将 WGSL 极速转译为目标系统的原生着色语言（MSL、HLSL 或 SPIR-V）。

三、主要应用场景

端侧 AI 与大模型推理（Local LLM / Vision）
WebGPU 原生支持 Compute Shader、Storage Buffer、Workgroup 同步机制与低精度浮点（如 FP16），配合 Transformers.js、ONNX Runtime Web 等框架，可以在浏览器本地直接运行量化小型 LLM（如 0.5B-4B 参数模型）、Stable Diffusion、Whisper 语音识别等任务。
优势在于零服务器算力成本 、数据不出设备（隐私保护） 与离线可用。
次世代 Web 3D 游戏与元宇宙
配合 Babylon.js、Three.js、PlayCanvas 或 Unreal/Unity 的 Web 导出器，WebGPU 能够支撑百万级多边形、动态全局光照（SSGI、光线追踪探针）、GPU 粒子系统等主机级视效。
复杂科学计算与工程可视化
CAD 渲染、BIM 建筑模型解析、生物分子流体力学仿真、地理信息系统（GIS 亿级点云渲染）等对数据吞吐要求极高的场景。

四、基础代码运作示例（计算着色器）

以下为调用 WebGPU 计算管线执行向量加法的标准生命周期：

复制

复制代码

// 1. 初始化设备
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

// 2. 编写 WGSL 计算着色器代码
const shaderCode = `
@group(0) @binding(0) var<storage, read> inputA : array<f32>;
@group(0) @binding(1) var<storage, read> inputB : array<f32>;
@group(0) @binding(2) var<storage, read_write> output : array<f32>;

@compute @workgroup_size(64)
fn main(@builtin(global_invocation_id) global_id : vec3<u32>) {
  let index = global_id.x;
  output[index] = inputA[index] + inputB[index];
}
`;

// 3. 构建不可变计算管线
const shaderModule = device.createShaderModule({ code: shaderCode });
const computePipeline = device.createComputePipeline({
  layout: 'auto',
  compute: { module: shaderModule, entryPoint: 'main' }
});

// 4. 录制并提交命令
const commandEncoder = device.createCommandEncoder();
const passEncoder = commandEncoder.beginComputePass();
passEncoder.setPipeline(computePipeline);
// passEncoder.setBindGroup(...) 绑定输入输出缓冲区
passEncoder.dispatchWorkgroups(Math.ceil(1024 / 64)); // 启动并行调度
passEncoder.end();

// 5. 提交执行
device.queue.submit([commandEncoder.finish()]);

五、生态与现状

浏览器支持：主流桌面端浏览器（Chrome、Edge、Safari、Firefox）及主流移动端系统均已正式默认支持 WebGPU。
主流引擎集成：Three.js（全面推广 WebGPURenderer）、Babylon.js、Orillusion 等引擎均已将 WebGPU 作为核心演进方向。
互补技术 ：在 Web 硬件加速体系中，WebGPU 负责通用可编程 GPU 计算与图形绘制 ，而 WebNN 则专注于调用专用硬件（NPU/DSP）的机器学习算子，二者相辅相成。