GPUDevice: Methode createRenderBundleEncoder()

descriptor

Ein Objekt mit den folgenden Eigenschaften:

colorFormats

Ein Array von enumerierten Werten, die die erwarteten Farbformate für Render-Ziele angeben. Mögliche Werte finden Sie in der GPUTextureFormat-Definition in der Spezifikation.

depthReadOnly Optional

Ein Boolean. Wenn true, bedeutet dies, dass das Ausführen eines vom GPURenderBundleEncoder erstellten GPURenderBundle die Tiefenkomponente des depthStencilFormat bei der Ausführung nicht modifizieren wird. Wenn weggelassen, wird depthReadOnly standardmäßig auf false gesetzt.

depthStencilFormat Optional

Ein enumerierter Wert, der das erwartete Format für Tiefe- oder Stencil-Ziele angibt. Mögliche Werte finden Sie im Abschnitt Depth-stencil formats der Spezifikation.

label Optional

Ein String, der eine Bezeichnung bereitstellt, die verwendet werden kann, um das Objekt zu identifizieren, z.B. in GPUError-Meldungen oder Konsolenwarnungen.

sampleCount Optional

Eine Zahl, die die erwartete Anzahl von Samples für Render-Ziele darstellt.

stencilReadOnly Optional

Ein Boolean. Wenn true, bedeutet dies, dass das Ausführen eines vom GPURenderBundleEncoder erstellten GPURenderBundle die Stencil-Komponente des depthStencilFormat bei der Ausführung nicht modifizieren wird. Wenn weggelassen, wird stencilReadOnly standardmäßig auf false gesetzt.

Eine GPURenderBundleEncoder-Objektinstanz.

Im WebGPU-Samples Animometer-Beispiel werden zahlreiche ähnliche Operationen an vielen verschiedenen Objekten gleichzeitig durchgeführt. Ein Bündel von Befehlen wird mit der folgenden Funktion kodiert:

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

Später wird ein GPURenderBundleEncoder mit createRenderBundleEncoder() erstellt, die Funktion wird aufgerufen, und das Befehlsbündel wird in einem GPURenderBundle mit GPURenderBundleEncoder.finish() aufgenommen:

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

Anschließend wird GPURenderPassEncoder.executeBundles() verwendet, um die Arbeit über mehrere Render-Durchläufe hinweg zu wiederholen und die Leistung zu verbessern. Studieren Sie das Beispiel zur vollständigen Kontextualisierung.

// ...

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()]);
};

// ...

• Die WebGPU API