GPURenderBundleEncoder

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Das GPURenderBundleEncoder-Interface der WebGPU API wird verwendet, um Bündel von Kommandos voraufzuzeichnen.

Die Befehlsbündel werden durch Aufrufen der Methoden von GPURenderBundleEncoder kodiert; sobald die gewünschten Befehle kodiert wurden, werden sie mit der Methode GPURenderBundleEncoder.finish() in eine GPURenderBundle-Objektinstanz aufgezeichnet. Diese Render-Bundles können dann in mehreren Render-Pässen wiederverwendet werden, indem die GPURenderBundle-Objekte in Aufrufen von GPURenderPassEncoder.executeBundles() übergeben werden.

Effektiv ist dies wie ein teilweiser Render-Pass — GPURenderBundleEncoders verfügen über alle dieselben Funktionen wie GPURenderPassEncoder-Objekte, außer dass sie keine Occlusion Queries beginnen und beenden können und nicht in der Lage sind, das Scherrechteck, die Viewport-Einstellungen, die Mischkonstante und die Stencil-Referenz festzulegen. Das GPURenderBundle erbt alle diese Werte von dem GPURenderPassEncoder, der es ausführt.

Hinweis: Aktuell werden vor dem Ausführen eines Render-Bundles und nachdem das Render-Bundle ausgeführt wurde alle gesetzten Vertex-Buffer, Index-Buffer, Bind-Gruppen und Pipelines gelöscht.

Das Wiederverwenden vorcodierter Befehle kann die Leistung einer Anwendung erheblich verbessern, insbesondere in Situationen, in denen der JavaScript-Zeichenaufruf-Overhead ein Engpass ist. Render-Bundles sind am effektivsten in Situationen, in denen eine Gruppe von Objekten auf dieselbe Weise über mehrere Ansichten oder Frames hinweg gezeichnet wird, wobei der einzige Unterschied der verwendete Buffer-Inhalt ist (z. B. aktualisierte Matrix-Uniformen). Ein gutes Beispiel ist das VR-Rendering. Das Aufzeichnen des Renderings als Render-Bundle und dann die Anpassung der View-Matrix und deren Wiedergabe für jedes Auge ist eine effizientere Möglichkeit, Zeichenaufrufe für beide Renderings der Szene auszugeben.

Ein GPURenderBundleEncoder-Objekt wird über die GPUDevice.createRenderBundleEncoder()-Eigenschaft erstellt.

Hinweis: Die Methoden von GPURenderBundleEncoder sind funktional identisch mit ihren Entsprechungen, die bei GPURenderPassEncoder verfügbar sind, außer für GPURenderBundleEncoder.finish(), das in Zweck ähnlich zu GPUCommandEncoder.finish() ist.

Instanz-Eigenschaften

label

Ein String, der ein Label bereitstellt, das zur Identifizierung des Objekts verwendet werden kann, beispielsweise in GPUError-Nachrichten oder Konsolenwarnungen.

Instanz-Methoden

draw()

Zeichnet Primitiven basierend auf den von setVertexBuffer() bereitgestellten Vertex-Buffer.

drawIndexed()

Zeichnet indizierte Primitiven basierend auf den von setVertexBuffer() und setIndexBuffer() bereitgestellten Vertex- und Index-Buffer.

drawIndirect()

Zeichnet Primitiven unter Verwendung von Parametern, die aus einem GPUBuffer gelesen werden.

drawIndexedIndirect()

Zeichnet indizierte Primitiven unter Verwendung von Parametern, die aus einem GPUBuffer gelesen werden.

finish()

Vervollständigt die Aufzeichnung der aktuellen Render-Pass-Befehlssequenz.

insertDebugMarker()

Markiert einen bestimmten Punkt in einer Reihe von kodierten Befehlen mit einem Label.

popDebugGroup()

Beendet eine Debug-Gruppe, die mit einem pushDebugGroup()-Aufruf begonnen wurde.

pushDebugGroup()

Beginnt eine Debug-Gruppe, die mit einem spezifischen Label markiert wird und alle nachfolgenden kodierten Befehle bis zum Aufruf einer popDebugGroup()-Methode enthalten wird.

setBindGroup()

Legt die GPUBindGroup fest, die für nachfolgende Render-Bundle-Befehle für einen bestimmten Index verwendet werden soll.

setIndexBuffer()

Setzt den aktuellen GPUBuffer, der Indexdaten für nachfolgende Zeichenbefehle bereitstellen wird.

setPipeline()

Legt die GPURenderPipeline fest, die für dieses Render-Bundle verwendet werden soll.

setVertexBuffer()

Setzt oder entfernt den aktuellen GPUBuffer, der Vertex-Daten für nachfolgende Zeichenbefehle bereitstellen wird.

Beispiele

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

js
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 erstellt, die Funktion wird aufgerufen und das Befehlsbündel wird mit GPURenderBundleEncoder.finish() in ein GPURenderBundle aufgezeichnet:

js
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 zur Verbesserung der Leistung wiederzuverwenden. Studieren Sie das Beispiel-Codeverzeichnis für den vollständigen Kontext.

js
// ...

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

// ...

Spezifikationen

Specification
WebGPU
# gpurenderbundle

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch