WebGPU 计算管线：ComputePass 与 StorageBuffer

概述WebGPU 计算管线允许在 GPU 上执行通用计算任务。通过 `GPUBuffer` 作为存储缓冲并编写 WGSL compute 着色器，提交命令获得结果。用法/示例const adapter = await navigator.gpu.requestAdapter()

const device = await adapter.requestDevice()

const input = device.createBuffer({ size: 1024, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST })

const output = device.createBuffer({ size: 1024, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC })

const shader = `

@group(0) @binding(0) var<storage, read> inp : array<u32>;

@group(0) @binding(1) var<storage, read_write> outp : array<u32>;

@compute @workgroup_size(64)

fn main(@builtin(global_invocation_id) gid : vec3<u32>) {

let i = gid.x;

outp[i] = inp[i] + 1u;

}

`

const module = device.createShaderModule({ code: shader })

const pipeline = device.createComputePipeline({ layout: 'auto', compute: { module, entryPoint: 'main' } })

const bind = device.createBindGroup({ layout: pipeline.getBindGroupLayout(0), entries: [

{ binding: 0, resource: { buffer: input } },

{ binding: 1, resource: { buffer: output } }

] })

const encoder = device.createCommandEncoder()

const pass = encoder.beginComputePass()

pass.setPipeline(pipeline)

pass.setBindGroup(0, bind)

pass.dispatchWorkgroups(16)

pass.end()

device.queue.submit([encoder.finish()])

工程建议管理缓冲与队列生命周期，避免频繁创建带来的开销；复用资源。根据任务选择 `workgroup_size` 与分派维度；验证边界与对齐约束。在不支持环境回退到 WebGL/CPU 计算与离线处理。参考与验证MDN：WebGPU — https://developer.mozilla.org/docs/Web/API/WebGPU_APIweb.dev：WebGPU — https://web.dev/articles/webgpuW3C GPUWeb — https://www.w3.org/community/gpuweb/