WebGPU中Compute Shader读取Storage Texture的正确方式及问题排查

核心原因 #

你遇到的错误是因为WebGPU禁止同一个纹理资源在同一个同步作用域（比如单个Compute Pass）内同时被用作可写Storage Binding和可读Texture Binding——哪怕你创建了两个不同的Texture View，底层指向的是同一个纹理内存，会触发数据竞争风险，违反WebGPU的内存一致性模型。

错误信息里的TextureUsage includes writable usage and another usage in the same synchronization scope直接点明了冲突：你的纹理同时启用了STORAGE_BINDING（可写）和TEXTURE_BINDING（可读），且在同一个Compute Pass里同时使用这两种绑定方式。

可行解决方案 #

方案1：双缓冲（Ping-Pong）纹理（推荐） #

创建两个完全相同的纹理，作为读源和写目标，每次Compute Pass完成后交换两者的角色。这是WebGPU中处理纹理原地读写的标准做法，性能最优。

修改后的JS代码

// 创建双缓冲纹理的复用函数
const createFramebuffer = () => this.device.createTexture({
  size: [Config.width, Config.height],
  label: 'Framebuffer Texture',
  format: 'rgba16float',
  usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.TEXTURE_BINDING
});

// 初始化读、写缓冲
let framebufferRead = createFramebuffer();
let framebufferWrite = createFramebuffer();

// 计算绑定组布局保持不变
const computeBindGroupLayout = this.device.createBindGroupLayout({
  label: 'Compute Bind Group Layout',
  entries: [{
    binding: 0,
    visibility: GPUShaderStage.COMPUTE,
    storageTexture: { format: 'rgba16float' }
  }, {
    binding: 1,
    texture: {},
    visibility: GPUShaderStage.COMPUTE
  }]
});

// 动态更新绑定组（缓冲交换后调用）
const updateComputeBindGroup = () => {
  this.computeBindGroup = this.device.createBindGroup({
    layout: computeBindGroupLayout,
    label: 'Compute Bind Group',
    entries: [{
      binding: 0,
      resource: framebufferWrite.createView() // 写目标绑定为storage texture
    }, {
      binding: 1,
      resource: framebufferRead.createView()  // 读源绑定为sampled texture
    }]
  });
};

// 初始化绑定组
updateComputeBindGroup();

计算Pass执行逻辑（关键：交换缓冲）

const commandEncoder = this.device.createCommandEncoder();
const computePass = commandEncoder.beginComputePass();
computePass.setPipeline(this.computePipeline);
computePass.setBindGroup(0, this.computeBindGroup);
computePass.dispatchWorkgroups(
  Math.ceil(Config.width / size),
  Math.ceil(Config.height / size)
);
computePass.end();

// 交换读/写缓冲，下一次Pass使用新的读写角色
[framebufferRead, framebufferWrite] = [framebufferWrite, framebufferRead];
updateComputeBindGroup();

// 将处理完成的读缓冲传给片段着色器用于采样
this.renderBindGroup = this.device.createBindGroup({
  layout: this.renderBindGroupLayout,
  entries: [{
    binding: 0,
    resource: framebufferRead.createView()
  }, {
    binding: 1,
    resource: this.sampler
  }]
});

this.device.queue.submit([commandEncoder.finish()]);

方案2：使用read_write类型Storage Texture（仅特定格式） #

WebGPU支持texture_storage_2d<format, read_write>类型，但仅限单通道的r32*格式（如r32float、r32uint），不支持rgba16float这类多通道格式，所以你的场景无法使用该方案。

方案3：通过Storage Buffer中转（性能较差） #

把纹理数据先拷贝到Storage Buffer中读取处理，再写回纹理。但这种方式需要额外的内存拷贝，性能远不如双缓冲，仅适用于小尺寸纹理或特殊场景。

原代码的其他注意点 #

• 你的片段着色器采样逻辑本身没问题，只要把最终的读缓冲（framebufferRead）作为采样纹理传入即可。
• 双缓冲的两个纹理需要保留所有三种Usage Flags，因为它们会交替承担读/写/渲染附件的角色；如果是固定用途的纹理，可以去掉不需要的Usage以优化资源占用。

内容的提问来源于stack exchange，提问作者Ustym Ukhman