"WebGPU 计算与图形实战：从 API 到性能验证"

概览WebGPU 为浏览器带来现代图形与通用计算能力。实战中需要重视设备能力检测（`adapter` 与 `device.limits`）、资源布局（Buffer/Texture）、着色器管线（Render/Compute）以及可重复的性能验证流程。能力检测与设备初始化async function init() { if (!('gpu' in navigator)) throw new Error('WebGPU 未支持') const adapter = await navigator.gpu.requestAdapter() if (!adapter) throw new Error('未获取到适配器') const device = await adapter.requestDevice() const limits = device.limits console.table({ maxBindGroups: limits.maxBindGroups, maxComputeWorkgroupSizeX: limits.maxComputeWorkgroupSizeX, maxComputeWorkgroupSizeY: limits.maxComputeWorkgroupSizeY, maxComputeWorkgroupSizeZ: limits.maxComputeWorkgroupSizeZ, }) return { device } } 计算管线示例（WGSL）@group(0) @binding(0) var<storage, read> input: array<f32> @group(0) @binding(1) var<storage, read_write> output: array<f32> @compute @workgroup_size(64) fn main(@builtin(global_invocation_id) gid: vec3u) { let i = gid.x; if (i < arrayLength(&input)) { output[i] = input[i] * 2.0; } } 提交与计时验证async function runCompute(device, inputData) { const size = inputData.length * 4 const input = device.createBuffer({ size, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST }) const output = device.createBuffer({ size, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC }) device.queue.writeBuffer(input, 0, new Float32Array(inputData)) const module = device.createShaderModule({ code: wgslSource }) const pipeline = device.createComputePipeline({ compute: { module, entryPoint: 'main' } }) const bindGroup = 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, bindGroup) const workgroups = Math.ceil(inputData.length / 64) pass.dispatchWorkgroups(workgroups) pass.end() const t0 = performance.now() device.queue.submit([encoder.finish()]) await device.queue.onSubmittedWorkDone() const t1 = performance.now() const readback = device.createBuffer({ size, usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST }) const copyEncoder = device.createCommandEncoder() copyEncoder.copyBufferToBuffer(output, 0, readback, 0, size) device.queue.submit([copyEncoder.finish()]) await readback.mapAsync(GPUMapMode.READ) const result = new Float32Array(readback.getMappedRange()).slice() readback.unmap() return { result, elapsedMs: t1 - t0 } } 性能与正确性要点以 `device.limits` 校验工作组与资源规模，避免越界与退化。使用 `performance.now()` 与帧内统计结合，构建可重复的测量。对输出进行断言或采样验证，确保计算正确性与稳定性。参考资料WebGPU Spec: https://www.w3.org/TR/webgpu/MDN WebGPU 指南: https://developer.mozilla.org/docs/Web/API/WebGPU_API