Web GPU

1. 概述

WebGPU 是新一代 Web 图形与计算 API，用于在浏览器中高效访问 GPU（图形处理单元）。相较于传统的 WebGL，WebGPU 提供了更接近底层硬件的能力，同时支持通用计算（GPGPU），可显著提升图形渲染与数据处理性能。

WebGPU 的设计参考了现代图形 API，如 Vulkan、Metal 和 Direct3D 12，具备更高性能、更低开销以及更好的可控性。

2. 核心特性

2.1 高性能

• 更低的驱动开销
• 更少的隐式状态管理
• 更高效的资源调度

2.2 显式控制

• 显式管理 GPU 资源（Buffer、Texture 等）
• 显式提交命令（Command Buffer）
• 更可预测的性能表现

2.3 支持通用计算

• 支持 Compute Shader
• 可用于 AI、物理模拟、数据处理等场景

2.4 现代图形管线

• 支持可编程渲染管线
• 使用 WGSL（WebGPU Shading Language）编写 Shader

3. 核心概念

WebGPU 的设计围绕一组核心对象展开：

Adapter（适配器） 表示物理 GPU 设备的抽象，用于查询设备能力。

Device（设备） 用于创建资源和提交 GPU 命令，是 WebGPU 的核心入口。

Queue（队列） 用于提交命令缓冲区（Command Buffer）到 GPU 执行。

Buffer（缓冲区） 用于存储顶点数据、索引数据或通用数据。

Texture（纹理） 用于表示图像数据，可用于采样或渲染目标。

Shader（着色器） 使用 WGSL 编写，运行在 GPU 上的程序。

Pipeline（管线） 定义渲染或计算流程，包括 Shader、状态配置等。

4. 工作流程

WebGPU 的基本执行流程如下：

1. 请求 Adapter
2. 获取 Device
3. 创建资源（Buffer / Texture）
4. 创建 Pipeline
5. 编码命令（Command Encoder）
6. 提交命令到 Queue
7. GPU 执行

5. 渲染管线

WebGPU 使用显式的渲染管线（Render Pipeline）：

• Vertex Shader：处理顶点数据
• Fragment Shader：处理像素颜色
• Pipeline State：定义混合、深度测试等状态

6. 与 WebGL 对比

特性	WebGL	WebGPU
API 层级	较高（封装较多）	较低（更接近硬件）
性能	中等	更高
控制能力	较弱	强
计算能力	有限（通过 hack 实现）	原生支持 Compute
Shader 语言	GLSL	WGSL

7. 应用场景

WebGPU 适用于多种高性能场景：

• 3D 游戏（如基于 Cocos、Unity Web）
• 可视化（数据图表、科学计算）
• AI 推理（浏览器端）
• 图像处理（滤镜、视频处理）

8. 浏览器支持情况

截至目前，WebGPU 已在主流浏览器中逐步支持：

• Chrome（默认支持）
• Edge（基于 Chromium）
• Safari（部分支持）
• Firefox（实验性支持）

9. 总结

WebGPU 是 Web 图形与计算领域的重要升级方向，其优势包括：

• 更高性能
• 更强控制能力
• 原生计算支持

对于高性能 Web 应用（尤其是游戏与可视化），WebGPU 将逐步取代 WebGL，成为主流解决方案。