WebGPU 下一代图形API

WebGPU入门：GPUAdapter/GPUDevice、Command Encoder命令编码、Render Pipeline渲染管线、Compute Shader通用计算、与WebGL对比（更低开销/支持通用GPU计算） · 难度：入门 · +10XP

WebGPU —— 下一代浏览器图形API

WebGPU是WebGL的继任者，提供对GPU硬件的更低层访问，性能远超WebGL。它不仅可以做3D渲染，还能利用GPU进行通用计算（GPGPU），比如机器学习推理。

基本流程

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const context = canvas.getContext('webgpu');
// 配置交换链、创建着色器模块、绑定资源、编码渲染命令...

WebGPU比WebGL复杂得多，但性能提升显著——特别是在计算着色器方面，可以为浏览器中的AI推理加速。

动手练习

1. 基础练习：用WebGPU在Canvas上清除为指定颜色（最简单的WebGPU程序）。
2. 进阶应用：用计算着色器做矩阵乘法，对比JavaScript实现的速度差异。
3. 项目实战：研究TensorFlow.js的WebGPU后端，理解GPU加速的原理。