GPURenderBundle

实验性： 这是一项实验性技术
在生产环境中使用此功能之前，请仔细查看浏览器兼容性表。

安全上下文： 此功能仅在安全上下文（HTTPS）中，在某些或所有支持的浏览器中可用。

GPURenderBundle 是 WebGPU API 中的一个接口，它表示用于预先录制的命令捆绑包的容器。

命令捆绑包使用 GPURenderBundleEncoder 进行编码；一旦所需的命令编码完毕，它们就会使用 GPURenderBundleEncoder.finish() 方法记录到 GPURenderBundle 对象实例中。

然后，这些命令捆绑包可以通过将 GPURenderBundle 对象传递到 GPURenderPassEncoder.executeBundles() 调用来在多个渲染传递中重复使用。在 JavaScript 绘制调用开销是瓶颈的情况下，重复使用预先录制的命令可以显著提高应用程序性能。渲染捆绑包在将一批对象以相同的方式绘制到多个视图或帧中时最有效，唯一的区别是使用的缓冲区内容（例如更新的矩阵一致性）。

VR 渲染就是一个很好的例子。将渲染记录为渲染捆绑包，然后调整视图矩阵并为每个眼睛回放，是发出场景渲染绘制调用的更有效方式。

实例属性

label 实验性: 一个字符串，提供一个标签，可以用来识别对象，例如在 GPUError 消息或控制台警告中。

示例

在 WebGPU 示例 Animometer 示例中，许多类似的操作同时在许多不同的对象上执行。使用以下函数编码渲染捆绑包

function recordRenderPass(
  passEncoder: GPURenderBundleEncoder | GPURenderPassEncoder
) {
  if (settings.dynamicOffsets) {
    passEncoder.setPipeline(dynamicPipeline);
  } else {
    passEncoder.setPipeline(pipeline);
  }
  passEncoder.setVertexBuffer(0, vertexBuffer);
  passEncoder.setBindGroup(0, timeBindGroup);
  const dynamicOffsets = [0];
  for (let i = 0; i < numTriangles; ++i) {
    if (settings.dynamicOffsets) {
      dynamicOffsets[0] = i * alignedUniformBytes;
      passEncoder.setBindGroup(1, dynamicBindGroup, dynamicOffsets);
    } else {
      passEncoder.setBindGroup(1, bindGroups[i]);
    }
    passEncoder.draw(3, 1, 0, 0);
  }
}

稍后，创建 GPURenderBundleEncoder，调用该函数，并使用 GPURenderBundleEncoder.finish() 记录渲染捆绑包

const renderBundleEncoder = device.createRenderBundleEncoder({
  colorFormats: [presentationFormat],
});
recordRenderPass(renderBundleEncoder);
const renderBundle = renderBundleEncoder.finish();

然后使用 GPURenderPassEncoder.executeBundles() 在多个渲染传递中重复使用工作，以提高性能。研究示例代码清单以获取完整上下文。

// ...

return function doDraw(timestamp) {
  if (startTime === undefined) {
    startTime = timestamp;
  }
  uniformTime[0] = (timestamp - startTime) / 1000;
  device.queue.writeBuffer(uniformBuffer, timeOffset, uniformTime.buffer);

  renderPassDescriptor.colorAttachments[0].view = context
    .getCurrentTexture()
    .createView();

  const commandEncoder = device.createCommandEncoder();
  const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);

  if (settings.renderBundles) {
    passEncoder.executeBundles([renderBundle]);
  } else {
    recordRenderPass(passEncoder);
  }

  passEncoder.end();
  device.queue.submit([commandEncoder.finish()]);
};

// ...

规范

规范
WebGPU # gpurenderbundle

浏览器兼容性

BCD 表仅在浏览器中加载

另请参阅

WebGPU API