GPUDevice: createRenderBundleEncoder() 方法

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

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

createRenderBundleEncoder() 方法是 GPUDevice 接口的一部分，它创建了一个 GPURenderBundleEncoder，可用于预先录制命令包。这些包可以通过 GPURenderPassEncoder 的 executeBundles() 方法重复使用，可根据需要使用多次。

语法

createRenderBundleEncoder(descriptor)

参数

descriptor

包含以下属性的对象

colorFormats: 一个枚举值数组，指定渲染目标的预期颜色格式。有关可能的取值，请参阅规范中的 GPUTextureFormat 定义。
depthReadOnly 可选: 一个布尔值。如果为 true，则指定由 GPURenderBundleEncoder 创建的任何 GPURenderBundle 在执行时不会修改 depthStencilFormat 的深度组件。如果省略，depthReadOnly 将默认为 false。
depthStencilFormat 可选: 一个枚举值，指定渲染目标的预期深度或模板格式。有关可能的取值，请参阅规范的深度或模板格式部分。
label 可选: 一个字符串，提供一个标签，可用于标识对象，例如在 GPUError 消息或控制台警告中。
sampleCount 可选: 一个表示渲染目标的预期样本数量的数字。
stencilReadOnly 可选: 一个布尔值。如果为 true，则指定由 GPURenderBundleEncoder 创建的任何 GPURenderBundle 在执行时不会修改 depthStencilFormat 的模板组件。如果省略，stencilReadOnly 将默认为 false。

返回值

一个 GPURenderBundleEncoder 对象实例。

示例

在 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);
  }
}

稍后，使用 createRenderBundleEncoder() 创建一个 GPURenderBundleEncoder，调用该函数，并将命令包录制到一个 GPURenderBundle 中，使用 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 # dom-gpudevice-createrenderbundleencoder

浏览器兼容性

BCD 表仅在浏览器中加载

另请参阅

WebGPU API