WebGPU 计算着色器：ComputePipeline 与 StorageBuffer

概述WebGPU 除渲染外还支持计算着色器，适合并行数据处理、图像滤波与物理模拟。通过 `ComputePipeline` 与 `StorageBuffer` 将数据送入 GPU 执行并读回。示例（简化）const adapter = await navigator.gpu.requestAdapter()

const device = await adapter.requestDevice()

const code = `

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

@compute @workgroup_size(64)

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

let i = gid.x;

if (i < arrayLength(&buf)) { buf[i] = buf[i] + 1u }

}`

const module = device.createShaderModule({ code })

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

const data = new Uint32Array(1024)

const buffer = device.createBuffer({ size: data.byteLength, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST | GPUBufferUsage.COPY_SRC })

device.queue.writeBuffer(buffer, 0, data)

const bind = device.createBindGroup({ layout: pipeline.getBindGroupLayout(0), entries: [{ binding: 0, resource: { buffer } }] })

const encoder = device.createCommandEncoder()

const pass = encoder.beginComputePass(); pass.setPipeline(pipeline); pass.setBindGroup(0, bind); pass.dispatchWorkgroups(Math.ceil(data.length / 64)); pass.end()

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

工程建议资源与同步：控制缓冲大小与同步；避免频繁读回导致性能瓶颈。功耗与平台：移动端注意功耗与温度；必要时降级到 CPU。兼容：不支持时回退到 WebGL2/CPU；检测设备与特性。参考与验证W3C WebGPU 规范：https://www.w3.org/TR/webgpu/MDN WebGPU 文档：https://developer.mozilla.org/docs/Web/API/WebGPU_APIweb.dev WebGPU 文章：https://web.dev/articles/webgpu