WebGPU每帧创建顶点缓冲区报错，求动态更新顶点数据方案

问题原因 #

你遇到的报错是因为：调用vertexBuffer.destroy()后，GPU可能还在处理之前提交的命令队列，缓冲区不会立即被回收。频繁创建带mappedAtCreation: true的缓冲区会快速耗尽GPU的暂存映射资源，触发实现层面的大小限制报错。

解决方案 #

方案一：固定最大缓冲区大小（优先推荐） #

如果能预估顶点数据的最大长度，创建一个固定大小的缓冲区，通过queue.writeBuffer每帧更新数据，避免频繁创建/销毁缓冲区，性能最优。

初始化阶段创建缓冲区

// 预估最大需要的顶点数据字节长度（示例：最多1000个vec2，每个vec2占8字节）
const maxVertexByteLength = 1000 * 2 * 4;
const vertexBuffer = device.createBuffer({
  size: maxVertexByteLength,
  usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
});

每帧更新并绘制

function frame () {
  const commandEncoder = device.createCommandEncoder();

  // 直接将数据写入已有的顶点缓冲区
  device.queue.writeBuffer(vertexBuffer, 0, data);

  const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
  passEncoder.setPipeline(pipeline);
  passEncoder.setVertexBuffer(0, vertexBuffer);
  // 只绘制当前数据包含的顶点数量
  passEncoder.draw(data.length / 2);
  passEncoder.end();

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

  requestAnimationFrame(frame);
}

方案二：动态调整缓冲区大小（仅当最大长度无法预估时使用） #

如果顶点数据长度变化范围极大，必须动态创建缓冲区，需改用**暂存缓冲区（staging buffer）**传递数据，并等待GPU处理完当前帧命令后再销毁资源，避免泄漏。

每帧流程代码

function frame () {
  const commandEncoder = device.createCommandEncoder();

  // 1. 创建CPU可映射的暂存缓冲区，写入顶点数据
  const stagingBuffer = device.createBuffer({
    size: data.byteLength,
    usage: GPUBufferUsage.MAP_WRITE | GPUBufferUsage.COPY_SRC,
    mappedAtCreation: true,
  });
  const dst = new data.constructor(stagingBuffer.getMappedRange());
  dst.set(data);
  stagingBuffer.unmap();

  // 2. 创建GPU侧的顶点缓冲区
  const vertexBuffer = device.createBuffer({
    size: data.byteLength,
    usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
  });

  // 3. 将暂存缓冲区的数据复制到顶点缓冲区
  commandEncoder.copyBufferToBuffer(
    stagingBuffer, 0,
    vertexBuffer, 0,
    data.byteLength
  );

  // 4. 执行绘制
  const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
  passEncoder.setPipeline(pipeline);
  passEncoder.setVertexBuffer(0, vertexBuffer);
  passEncoder.draw(data.length / 2);
  passEncoder.end();

  // 5. 提交命令，等待GPU处理完成后销毁缓冲区
  const commandBuffer = commandEncoder.finish();
  device.queue.submit([commandBuffer]);

  device.queue.onSubmittedWorkDone().then(() => {
    stagingBuffer.destroy();
    vertexBuffer.destroy();
  });

  requestAnimationFrame(frame);
}

关键注意事项 #

• 优先选择方案一，固定缓冲区的性能远高于频繁创建销毁缓冲区的模式。
• 使用device.queue.onSubmittedWorkDone()确保GPU彻底处理完当前帧命令后再销毁缓冲区，避免GPU仍在使用缓冲区时被销毁导致的资源泄漏。
• 避免在每帧直接创建带mappedAtCreation: true的顶点缓冲区，这类缓冲区会占用GPU的映射资源，频繁创建极易触发限制报错。

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