WebGPU 是什么、和 WebGL 什么关系

WebGPU 是浏览器新一代的 GPU 接口，设计上对齐现代图形 API（Vulkan、Metal、DirectX 12）。相比 WebGL 只擅长图形渲染，WebGPU 还能做通用计算（GPGPU），而且更贴近底层、性能更好、异步更安全。它不是 WebGL 的小升级，而是一套全新的、更现代的 GPU 编程模型。

本文核心知识点
  • navigator.gpu入口对象，先判断支持。
  • device逻辑设备，所有资源从它创建。
  • pipeline把着色器与状态编成管线。
  • compute除画图外还能跑通用计算。
WebGPU 配图：蓝色渐变背景发光 GPU 芯片上方悬浮网格线框立方体与三角面片，芯片到场景有发光数据管线，扁平科技插画
芯片到三维场景的发光管线，正是 GPU 驱动图形渲染的意象。

先判断：浏览器是否支持

WebGPU 较新，部分浏览器还没开。第一步永远是检测 navigator.gpu 是否存在、requestAdapter 是否成功，拿到设备再继续。不支持就降级到 WebGL 或提示用户。

if (!navigator.gpu) {
  alert('当前浏览器不支持 WebGPU');
} else {
  const adapter = await navigator.gpu.requestAdapter();
  const device = await adapter.requestDevice();
}

请求设备与画布

requestAdapter 拿到物理显卡适配，再 requestDevice 拿到逻辑设备。画布要配置成 WebGPU 上下文：canvas.getContext('webgpu')，configure 绑定 device 和格式。之后所有绘图命令都通过 commandEncoder 录制、提交到队列。

着色器与渲染管线

WebGPU 用 WGSL 写着色器（类似 GLSL 但更现代）。把顶点着色器、片元着色器和状态（顶点布局、混合格式）组装成一个 RenderPipeline，之后就用它来绘制。这一步比 WebGL 的散落状态设置更清晰、也更容易被驱动优化。

画一个三角形的完整流程

最小流程：准备顶点数据写进 buffer、创建 pipeline、每帧用 commandEncoder 开一个 renderPass（绑定画布视图和 pipeline）、设置顶点 buffer、draw(3)、提交命令队列。一帧三角形就出来了。

const pass = encoder.beginRenderPass({
  colorAttachments: [{ view, loadOp: 'clear', clearValue: { r: 0.1, g: 0.2, b: 0.5, a: 1 } }]
});
pass.setPipeline(pipeline);
pass.setVertexBuffer(0, vertexBuffer);
pass.draw(3);
pass.end();