WebGPU：浏览器中的 GPU 渲染与计算

一句话： WebGPU 让网页能够通过 navigator.gpu、一个 adapter/device 模型，以及它自己的着色语言 WGSL，使用底层系统的 GPU 进行高性能渲染与通用计算——MDN 将其定位为 WebGL 的继任者。

Adapter/Device 模型

WebGPU 的访问从 navigator.gpu 开始——在窗口上下文中它是 Navigator.gpu，在 worker 上下文中则是 WorkerNavigator.gpu。得到可用的 GPU 需要两个异步步骤：

navigator.gpu.requestAdapter() 会解析为一个 GPUAdapter，代表用户代理可以使用的一块物理或软件 GPU；若找不到合适的 adapter，则解析为 null。
adapter.requestDevice() 返回一个 GPUDevice，你真正用它来创建缓冲区、纹理、管线和命令编码器。

渲染与计算管线使用 WGSL（WebGPU Shading Language）描述，这是一门独立于 WebGL 的 GLSL 的着色语言。

浏览器与生态支持

引擎	支持情况
Chrome（桌面端）	自 Chrome 113 起为部分支持（仅 ChromeOS、macOS、Windows）；自 Chrome 144 起不再带有 `partial_implementation` 标记（新增 Linux，但在 Linux 上仍仅限 Intel Gen12+ GPU）
Chrome（Android）	自 Chrome 121 起
Firefox（桌面端）	自 Firefox 141 起为部分支持——Windows 自 141 起，Apple silicon macOS Tahoe 自 145 起，较旧版本的 Apple silicon macOS 自 147 起；不支持 Intel Mac、不支持 Linux、不支持 service worker
Firefox（Android）	不支持
Safari	自 Safari 26 起

数据来自 MDN browser-compat-data 中 GPU 接口的条目，其中 Chrome 113–143 与 Firefox 141+ 被标记为 partial_implementation，并附有上述操作系统/CPU 限定条件； Chrome 144+ 的记录则不带此部分实现标记。每个引擎都要求安全上下文才能使用该特性。

最小示例

async function initWebGPU(canvas) {
  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) throw new Error("No WebGPU adapter available");
  const device = await adapter.requestDevice();
  const context = canvas.getContext("webgpu");
  context.configure({
    device,
    format: navigator.gpu.getPreferredCanvasFormat(),
  });
  return { device, context };
}

特性检测与回退

async function getGpuDevice(canvas) {
  if (!("gpu" in navigator)) {
    // 此环境不支持 WebGPU——回退到 WebGL2（或 Canvas2D）渲染路径。
    return null;
  }
  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    // 即便 navigator.gpu 存在，也可能拿不到兼容的 GPU/adapter。
    return null;
  }
  return adapter.requestDevice();
}

实用清单

在调用 navigator.gpu 上的任何方法之前，先用 "gpu" in navigator 做特性检测—— 根据上表，在较旧的引擎版本以及 Android、Linux、Intel Mac 上的 Firefox 中它并不支持。
即便 navigator.gpu 存在，requestAdapter() 也可能返回 null；调用 requestDevice() 前务必先检查 adapter。
为不支持 WebGPU 的引擎/平台保留 WebGL2（或 Canvas2D）回退路径——根据上方的兼容数据，这仍包括 Android、Linux、Intel Mac 上的 Firefox，以及 144 之前版本在 Linux 上的 Chrome。
所有已发布引擎都要求 WebGPU 运行在安全上下文（HTTPS 或 localhost）中。
WGSL 与 GLSL 是不同的着色语言——已有的 WebGL 着色器无法直接迁移到 WebGPU，需要重写或使用跨编译工具。