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.

Das GPURenderPassEncoder Interface der WebGPU API kodiert Befehle, die sich auf die Steuerung der Vertex- und Fragment-Shader-Stufen beziehen, wie sie von einer GPURenderPipeline ausgeführt werden. Es ist Teil der gesamten Kodierungsaktivität eines GPUCommandEncoder.

Eine Render-Pipeline rendert Grafiken zu GPUTexture-Anhängen, die typischerweise zur Anzeige in einem <canvas>-Element vorgesehen sind, aber sie könnte auch Texturen rendern, die für andere Zwecke verwendet werden, die niemals auf dem Bildschirm erscheinen. Sie hat zwei Hauptstufen:

Eine Vertex-Stufe, bei der ein Vertex-Shader Positionsdaten nimmt, die in die GPU eingespeist werden, und diese 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 gerastert, um herauszufinden, welche Pixel jedes davon auf der Zeichenfläche abdecken sollten.
Eine Fragment-Stufe, bei der ein Fragment-Shader die Farbe für jedes von den Primitiven bedeckte Pixel berechnet, die vom Vertex-Shader produziert wurden. Diese Berechnungen verwenden häufig Eingaben wie Bilder (in Form von Texturen), die Oberflächendetails sowie die Position und Farbe virtueller Lichter liefern.

Eine Instanz eines GPURenderPassEncoder-Objekts wird über die GPUCommandEncoder.beginRenderPass() Methode erstellt.

Instanz-Eigenschaften

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

Instanz-Methoden

beginOcclusionQuery(): Beginnt eine Okklusionsabfrage an dem spezifizierten Index des relevanten GPUQuerySet (bereitgestellt als Wert der occlusionQuerySet-Deskriptoreigenschaft beim Aufruf von GPUCommandEncoder.beginRenderPass(), um den Render-Pass auszuführen).
draw(): Zeichnet Primitiven basierend auf den Vertex-Bufferen, die von setVertexBuffer() bereitgestellt werden.
drawIndexed(): Zeichnet indizierte Primitiven basierend auf den von setVertexBuffer() und setIndexBuffer() bereitgestellten Vertex- und Index-Bufferen.
drawIndirect(): Zeichnet Primitiven unter Verwendung von Parametern, die von einem GPUBuffer gelesen werden.
drawIndexedIndirect(): Zeichnet indizierte Primitiven unter Verwendung von Parametern, die von 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 den referenzierten GPURenderBundles als Teil dieses Render-Passes aufgezeichnet wurden.
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 spezifizierten Label markiert wird und alle folgenden kodierten Befehle enthält, bis eine popDebugGroup() Methode aufgerufen wird.
setBindGroup(): Setzt die GPUBindGroup, die für nachfolgende Render-Befehle bei einem bestimmten Index verwendet werden soll.
setBlendConstant(): Setzt die konstante Blend-Farbe und Alpha-Werte, die mit den "constant" und "one-minus-constant" Blend-Faktoren verwendet werden (wie im Deskriptor der GPUDevice.createRenderPipeline()-Methode in der blend-Eigenschaft festgelegt).
setIndexBuffer(): Setzt den aktuellen GPUBuffer, der Indexdaten für nachfolgende Zeichnungsbefehle bereitstellt.
setPipeline(): Setzt die GPURenderPipeline, die für diesen Render-Pass verwendet werden soll.
setScissorRect(): Setzt das Scherrechteck, das während der Rasterisierung verwendet wird. Nach der Transformation in Ansichtskoordinaten 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 in den Eigenschaften festgelegt, die die verschiedenen Stencil-Operationen definieren).
setVertexBuffer(): Setzt oder entfernt den aktuellen GPUBuffer, der Vertex-Daten für nachfolgende Zeichnungsbefehle bereitstellt.
setViewport(): Setzt die Ansichtsfläche, die während der Rasterisierung verwendet wird, um von normalisierten Gerätekoordinaten zu Ansichtskoordinaten zu mappen.

Beispiele

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

// …

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