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/