WebGPU

WebGPU 是 Web 平台上的下一代图形 API，是 WebGL 的继任者。为什么不是 WebGL3.0 而是 WebGPU？

WebGL 是从 OpenGL 的阉割版 OpenGL ES 借鉴过来的，存在如下问题

1. WebGL 太老了：
   • WebGL 2.0 发布于 2017 年，对应的标准为 Open ES 3.0
   • Open ES 3.0 发布于 2012 年，对应标准为 Open GL 3.2
   • Open GL 3.2，发布于 2009 年。无法利用当前计算机的优势
2. WebGL 太慢了：
   • OpenGL ES 原是用于移动端的，性能相对于其他图形 API 性能较低
   • 无法高效的利用 GPU

即 WebGPU 干脆不从 OpenGL 考虑，而是在每个平台兼容不同的图形 API，例如 Windows 底层使用 Direct3D，MacOS 使用 Metal，Linux 底层使用 Vulkan，对上层抛出统一的 API，具备如下特点

1. 高性能
2. 跨平台
3. 更优雅的 API，Promise 的 API，面向对象的 API

坐标系

WebGPU 坐标系为左手螺旋坐标系，且为裁剪坐标系。原点位于屏幕中间，视为$(0,0)$

• X 轴：水平方向，向右为正，向左为负，范围为$[-1,1]$
• Y 轴：垂直方向，向上为正，向下为负，范围为$[-1,1]$
• Z 轴：屏幕方向，向屏幕内为正，向屏幕外为负，范围为$[0,1]$

API

GPUAdapter（适配器）

// 用户可以指定选择适配器（高性能还是低功率）
const adapter = await navigator.gpu.requestAdapter();
if (!adapter) {
  return null;
}

GPUDevice（设备）

GPUDevice 是和 GPU 想连接的对象

// 该设备可以用于指定你想要逻辑设备具有的确切特性和限制，可以使用默认规则
const device = await adapter.requestDevice();

Canvas 上下文绑定

/**@type {HTMLCanvasElement} */
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("webgpu");

ctx.configure({
  device,
  format: navigator.gpu.getPreferredCanvasFormat(),
});