GPUDevice: createRenderBundleEncoder() Methode

descriptor

Ein Objekt, das die folgenden Eigenschaften enthält:

colorFormats

Ein Array von Aufzählungswerten, das die erwarteten Farbformate für Renderziele angibt. Mögliche Werte finden Sie in der GPUTextureFormat-Definition in der Spezifikation.

depthReadOnly Optional

Ein Boolean. Wenn true, wird angegeben, dass das Ausführen eines von dem GPURenderBundleEncoder erstellten GPURenderBundle die Tiefenkomponente des depthStencilFormat beim Ausführen nicht ändern wird. Wenn weggelassen, wird depthReadOnly standardmäßig auf false gesetzt.

depthStencilFormat Optional

Ein Aufzählungswert, der das erwartete Tiefen- oder Stencil-Format für Renderziele angibt. Mögliche Werte finden Sie im Abschnitt Tiefen-Stencil-Formate der Spezifikation.

label Optional

Eine Zeichenkette, die ein Label angibt, das zum Identifizieren des Objekts verwendet werden kann, zum Beispiel in GPUError-Meldungen oder Konsolenwarnungen.

sampleCount Optional

Eine Zahl, die die erwartete Stichprobenanzahl für Renderziele darstellt.

stencilReadOnly Optional

Ein Boolean. Wenn true, wird angegeben, dass das Ausführen eines von dem GPURenderBundleEncoder erstellten GPURenderBundle die Stencil-Komponente des depthStencilFormat beim Ausführen nicht ändern wird. Wenn weggelassen, wird stencilReadOnly standardmäßig auf false gesetzt.

Eine GPURenderBundleEncoder-Objektinstanz.

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

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 ein GPURenderBundle mit GPURenderBundleEncoder.finish() aufgezeichnet:

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

GPURenderPassEncoder.executeBundles() wird dann verwendet, um die Arbeit über mehrere Render-Pässe hinweg wiederzuverwenden, um die Leistung zu verbessern. Untersuchen Sie die Beispielcode-Auflistung für den vollständigen Kontext.

// …

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