WebGPU入门演示 - GPU渲染基础三角形

// 1. 检查 WebGPU 支持
if (!navigator.gpu) {
    console.error('WebGPU 不受支持');
}

// 2. 请求 GPU 适配器与设备
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

// 3. 配置 Canvas Context
const ctx = canvas.getContext('webgpu');
ctx.configure({ device, format: navigator.gpu.getPreferredCanvasFormat() });

// 4. 创建顶点缓冲区 (3个顶点, RGB渐变)
const vertices = new Float32Array([
    0.0,  0.6,  1,0,0,1,  // 顶部 - 红色
   -0.5, -0.4,  0,1,0,1,  // 左下 - 绿色
    0.5, -0.4,  0,0,1,1,  // 右下 - 蓝色
]);
const vBuf = device.createBuffer({
    size: vertices.byteLength,
    usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
});
device.queue.writeBuffer(vBuf, 0, vertices);

// 5. 创建渲染管线
const pipeline = device.createRenderPipeline({ ... });

// 6. 渲染循环
function render() {
    const cmd = device.createCommandEncoder();
    const pass = cmd.beginRenderPass({ ... });
    pass.setPipeline(pipeline);
    pass.draw(3);
    pass.end();
    device.queue.submit([cmd.finish()]);
    requestAnimationFrame(render);
}

┌──────────────────────────────────────┐
│  ① 检查浏览器 WebGPU 支持           │
│     navigator.gpu ?                 │
└────────────┬─────────────────────────┘
             │ ✅
┌────────────▼─────────────────────────┐
│  ② 请求 GPU 适配器 & 设备           │
│     adapter.requestDevice()         │
└────────────┬─────────────────────────┘
             │
┌────────────▼─────────────────────────┐
│  ③ 配置 Canvas 与 Swap Chain        │
│     ctx.configure({device, format})  │
└────────────┬─────────────────────────┘
             │
┌────────────▼─────────────────────────┐
│  ④ 创建顶点缓冲区 + Uniform缓冲区   │
│     上传三角形顶点数据到 GPU        │
└────────────┬─────────────────────────┘
             │
┌────────────▼─────────────────────────┐
│  ⑤ 编译 WGSL 着色器 → ShaderModule │
│     顶点着色器 + 片元着色器         │
└────────────┬─────────────────────────┘
             │
┌────────────▼─────────────────────────┐
│  ⑥ 构建渲染管线 (Pipeline)          │
│     绑定着色器、顶点布局、混合模式  │
└────────────┬─────────────────────────┘
             │
┌────────────▼─────────────────────────┐
│  ⑦ 每帧: 命令编码器 → 渲染通道     │
│     cmd.beginRenderPass()           │
│     → setPipeline → draw(3) → end   │
│     → queue.submit()                │
└──────────────────────────────────────┘