计算着色器入门

不画图的着色器

计算着色器（@compute）没有顶点和像素的概念，它只是“对一百万个元素各跑一次函数”。输入输出都是存储缓冲（storage buffer）：var<storage, read> 只读，var<storage, read_write> 可写。

工作组与调度

@workgroup_size(64) 表示一个工作组有 64 个线程；JS 端 dispatchWorkgroups(Math.ceil(n / 64)) 决定启动多少个工作组。100 万个元素就是 16384 个工作组。工作组大小一般取 32 或 64 的倍数，正好填满硬件的 warp。

线程编号：三种内置变量

每个线程要知道自己负责哪个元素。这个例子这样计算全局下标：

fn main(@builtin(workgroup_id) wg : vec3u,
        @builtin(local_invocation_index) lid : u32) {
  let i = wg.x * 64u + lid;
  if (i >= P.n) { return; }
  output[i] = sin(input[i] * P.freq + P.phase) * exp(-input[i] * P.decay);
}

• workgroup_id：第几个工作组；
• local_invocation_index：组内第几个线程（0…63）；
• global_invocation_id：两者合起来的全局编号，即 workgroup_id * workgroup_size + local_invocation_id。

所以 wg.x * 64u + lid 与 global_invocation_id.x 完全等价。这里把它拆开写，是为了看清三者的关系（也能绕开一些软件 GPU 的兼容问题）。最后一个工作组可能有多余线程，所以要做越界检查。

把结果读回来

GPU 内存不能被 JS 直接读取。流程是：计算结果拷贝到一个带 MAP_READ 用途的暂存缓冲，await staging.mapAsync(GPUMapMode.READ) 等 GPU 完成，再用 getMappedRange() 读取，最后 unmap()。读回会强制 CPU 等 GPU，开销不小，所以真实应用尽量让数据留在 GPU 上。

同一个缓冲，算完就画

渲染循环里，计算 pass 写 output，紧接着的渲染 pass 在顶点着色器里读它画柱状图，全程不经过 CPU。WebGPU 会自动保证两个 pass 的先后顺序；在途帧数用 onSubmittedWorkDone 限制在 2 帧以内。