GPURenderPassEncoder

Limited availability

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

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.

Die GPURenderPassEncoder Schnittstelle der WebGPU API kodiert Befehle, die sich auf die Steuerung der Vertex- und Fragment-Shader-Stufen beziehen, wie sie von einem GPURenderPipeline ausgegeben werden. Sie bildet einen Teil der gesamten Kodierungsaktivität eines GPUCommandEncoder.

Eine Render-Pipeline rendert Grafiken zu GPUTexture-Anhängseln, die typischerweise zur Darstellung in einem <canvas>-Element gedacht sind, aber auch zu Texturen rendern können, die für andere Zwecke verwendet werden und nie auf dem Bildschirm erscheinen. Sie hat zwei Hauptphasen:

Eine Vertex-Stufe, in der ein Vertex-Shader Positionsdaten, die in die GPU eingespeist werden, verwendet, um eine Reihe von Vertices im 3D-Raum zu positionieren, indem spezifizierte Effekte wie Rotation, Translation oder Perspektive angewendet werden. Die Vertices werden dann zu Primitiven wie Dreiecken (dem grundlegenden Baustein gerenderter Grafiken) zusammengesetzt und von der GPU rasterisiert, um herauszufinden, welche Pixel jedes abdecken sollte, auf der Zeichenfläche.
Eine Fragment-Stufe, in der ein Fragment-Shader die Farbe für jedes vom Vertex-Shader erzeugte Primitive abgedeckte Pixel berechnet. Diese Berechnungen verwenden häufig Eingaben wie Bilder (in Form von Texturen), die Oberflächendetails sowie die Position und Farbe virtueller Lichter liefern.

Ein GPURenderPassEncoder Objekt wird über die GPUCommandEncoder.beginRenderPass() Methode erstellt.

Instanz-Eigenschaften

label: Ein String, der ein Etikett bietet, das verwendet werden kann, um das Objekt zu identifizieren, zum Beispiel in GPUError-Meldungen oder Konsolenwarnungen.

Instanz-Methoden

beginOcclusionQuery(): Beginnt eine Okklusionsabfrage am angegebenen Index des relevanten GPUQuerySet (bereitgestellt als Wert der occlusionQuerySet Deskriptoreigenschaft beim Aufrufen von GPUCommandEncoder.beginRenderPass() für den Ausführungsdurchgang).
draw(): Zeichnet Primitiven basierend auf den von setVertexBuffer() bereitgestellten Vertex-Puffern.
drawIndexed(): Zeichnet indizierte Primitiven basierend auf den von setVertexBuffer() und setIndexBuffer() bereitgestellten Vertex- und Index-Puffern.
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.
end(): Beendet die Aufzeichnung der aktuellen Render-Pass-Befehlssequenz.
endOcclusionQuery(): Beendet eine aktive Okklusionsabfrage, die zuvor mit beginOcclusionQuery() gestartet wurde.
executeBundles(): Führt Befehle aus, die zuvor in die referenzierten GPURenderBundles aufgenommen wurden, als Teil dieses Render-Passes.
insertDebugMarker(): Markiert einen bestimmten Punkt in einer Serie von kodierten Befehlen mit einem Etikett.
popDebugGroup(): Beendet eine Debug-Gruppe, die mit einem Aufruf von pushDebugGroup() begonnen wurde.
pushDebugGroup(): Beginnt eine Debug-Gruppe, die mit einem angegebenen Etikett markiert wird und alle nachfolgenden kodierten Befehle bis zu einer Methode popDebugGroup() enthält.
setBindGroup(): Setzt die GPUBindGroup, die für nachfolgende Render-Befehle verwendet werden soll, für einen bestimmten Index.
setBlendConstant(): Setzt die konstanten Mischfarb- und Alphawerte, die mit "constant" und "one-minus-constant" Mischfaktoren verwendet werden (wie im Deskriptor der Methode GPUDevice.createRenderPipeline() im blend-Eigenschaftensatz festgelegt).
setIndexBuffer(): Setzt den aktuellen GPUBuffer, der Indiz-Daten für nachfolgende Zeichnungsbefehle bereitstellen wird.
setPipeline(): Setzt die GPURenderPipeline, die für diesen Render-Pass verwendet werden soll.
setScissorRect(): Setzt das Scherrechteck, das während der Rasterisierungsstufe verwendet wird. Nach der Transformation in Ansichtsport-Koordinaten werden alle Fragmente, die außerhalb des Scherrechtecks liegen, verworfen.
setStencilReference(): Setzt den Stencil-Referenzwert, der bei Stencil-Tests mit der "replace" Stencil-Operation verwendet wird (wie im Deskriptor der GPUDevice.createRenderPipeline() Methode festgelegt, in den Eigenschaften, die die verschiedenen Stencil-Operationen definieren).
setVertexBuffer(): Setzt oder hebt den aktuellen GPUBuffer auf, der Vertex-Daten für nachfolgende Zeichnungsbefehle bereitstellen wird.
setViewport(): Setzt den Ansichtsport, der während der Rasterisierungsstufe verwendet wird, um von normalisierten Gerätekoordinaten zu Ansichtsport-Koordinaten linear zu transformieren.

Beispiele

In unserem Grundlegenden Render-Demo werden mehrere Befehle über einen GPUCommandEncoder aufgezeichnet. Die meisten dieser Befehle stammen von dem GPURenderPassEncoder, der über GPUCommandEncoder.beginRenderPass() erstellt wird.

// …

const renderPipeline = device.createRenderPipeline(pipelineDescriptor);

// Create GPUCommandEncoder to issue commands to the GPU
// Note: render pass descriptor, command encoder, etc. are destroyed after use, fresh one needed for each frame.
const commandEncoder = device.createCommandEncoder();

// Create GPURenderPassDescriptor to tell WebGPU which texture to draw into, then initiate render pass
const renderPassDescriptor = {
  colorAttachments: [
    {
      clearValue: clearColor,
      loadOp: "clear",
      storeOp: "store",
      view: context.getCurrentTexture().createView(),
    },
  ],
};

const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);

// Draw the triangle
passEncoder.setPipeline(renderPipeline);
passEncoder.setVertexBuffer(0, vertexBuffer);
passEncoder.draw(3);

// End the render pass
passEncoder.end();

// End frame by passing array of command buffers to command queue for execution
device.queue.submit([commandEncoder.finish()]);

// …

Spezifikationen

Specification
WebGPU # gpurenderpassencoder

Browser-Kompatibilität

Siehe auch

Die WebGPU API