WebGPU中GPUCommandBuffer是否可复用？如何更新调用间输入缓冲区

WebGPU规范明确规定GPUCommandBuffer是一次性提交对象，一旦被queue.submit()调用提交过，就会进入已执行状态，不支持重复提交。你尝试复用旧命令缓冲区的操作本身就违反API基础设计约束，出现计算内核读旧数据、任务不触发的表现完全符合规范定义的行为，和缓冲区类型（uniform/storage/read-only-storage）没有关联。
你可以开启浏览器的WebGPU开发者功能，控制台会直接抛出Command buffer has already been submitted的验证错误——重复提交已使用过的命令缓冲区属于无效调用，会被浏览器直接丢弃，不会被GPU执行。哪怕没有触发显式报错，已编码完成的命令缓冲区记录的也是第一次提交时的资源绑定逻辑与执行时序，后续修改staging缓冲区的内容，不会对已经编码固化的指令序列产生任何影响。

• 所有GPU指令（缓冲区拷贝、计算调度、渲染绘制等）必须通过GPUCommandEncoder完成编码，编码结束后调用finish()生成GPUCommandBuffer，该对象的生命周期仅对应一次队列提交。
• 禁止复用已经提交过的GPUCommandBuffer，哪怕指令逻辑和之前完全一致，每次需要执行指令序列时，都必须重新走「创建命令编码器 → 编码所需指令 → 调用finish生成新的命令缓冲区 → 提交到GPU队列」的流程。
• 命令缓冲区编码阶段仅记录资源的绑定关系，不会固化资源内存储的内存数据；只有提交新生成的命令缓冲区时，GPU队列才会在执行对应指令的节点，读取绑定缓冲区的最新数据。
• 命令编码的开销极低，远低于资源创建、数据拷贝、内核执行的耗时，每次执行重新编码是官方推荐的标准用法，不会造成可感知的性能损失，不需要为了省性能刻意缓存命令缓冲区。

初始化阶段可以一次性创建所有长期复用的资源，不需要每次计算都重建：包括计算管线、绑定组、CPU可写的staging上传缓冲区、GPU侧的输入/输出存储缓冲区、结果读回用staging缓冲区，这些资源可以跨任意多轮计算重复使用。
每一轮需要传入新输入运行计算时，按以下流程执行即可：

1. 给上传用staging缓冲区发起映射，写入新的输入数据后执行unmap
2. 创建全新的GPUCommandEncoder实例
3. 编码copyBufferToBuffer指令，把staging缓冲区的新数据拷贝到GPU侧输入缓冲区
4. 开启计算通道，绑定对应管线、绑定组，调度对应数量的计算工作组
5. 如果需要读回计算结果，追加编码结果存储缓冲区到读回staging缓冲区的拷贝指令
6. 调用编码器的finish()方法生成全新的命令缓冲区
7. 将新生成的命令缓冲区传入queue.submit()提交执行

最小可参考实现代码：

// 初始化阶段：一次性创建可跨轮次复用的资源
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
// 省略计算管线、绑定组的初始化逻辑，假设已创建好computePipeline、inputBindGroup
const INPUT_SIZE = 1024; // 输入数据字节长度
const WORKGROUP_COUNT = 16; // 计算工作组数量
// CPU侧可写的上传staging缓冲区
const inputStagingBuf = device.createBuffer({
  size: INPUT_SIZE,
  usage: GPUBufferUsage.MAP_WRITE | GPUBufferUsage.COPY_SRC
});
// GPU侧设备端输入缓冲区
const inputDeviceBuf = device.createBuffer({
  size: INPUT_SIZE,
  usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.STORAGE | GPUBufferUsage.UNIFORM
});

// 多轮计算可重复调用该函数，传入新的输入数据
async function runCompute(newInputData) {
  // 写入新数据到staging缓冲区
  await inputStagingBuf.mapAsync(GPUMapMode.WRITE);
  new Float32Array(inputStagingBuf.getMappedRange()).set(newInputData);
  inputStagingBuf.unmap();

  // 每次执行重新编码指令
  const encoder = device.createCommandEncoder();
  // 拷贝新输入到GPU侧缓冲区
  encoder.copyBufferToBuffer(inputStagingBuf, 0, inputDeviceBuf, 0, INPUT_SIZE);
  // 编码计算调度逻辑
  const computePass = encoder.beginComputePass();
  computePass.setPipeline(computePipeline);
  computePass.setBindGroup(0, inputBindGroup);
  computePass.dispatchWorkgroups(WORKGROUP_COUNT);
  computePass.end();
  // 此处可追加结果拷贝逻辑用于读回计算输出

  // 生成新的命令缓冲区并提交
  const commandBuffer = encoder.finish();
  device.queue.submit([commandBuffer]);

  // 此处可添加结果读回逻辑
}

补充优化提示：如果多轮计算之间没有CPU/GPU的同步等待需求，还可以通过queue.writeBuffer()直接向GPU侧缓冲区写入数据，省去手动管理staging缓冲区、编码拷贝指令的步骤，代码会更简洁，小数据量更新场景下性能表现一致。

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