GPURenderPassEncoder

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.

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

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

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

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

Instanz-Eigenschaften

label Experimentell: Ein String, der ein Label bereitstellt, das verwendet werden kann, um das Objekt zu identifizieren, beispielsweise in GPUError-Meldungen oder Konsolenwarnungen.

Instanz-Methoden

beginOcclusionQuery() Experimentell: Beginnt eine Okklusionsabfrage an dem angegebenen Index des relevanten GPUQuerySet (bereitgestellt als Wert der occlusionQuerySet Deskriptoreigenschaft beim Aufruf von GPUCommandEncoder.beginRenderPass(), um den Render-Vorgang auszuführen).
draw() Experimentell: Zeichnet Primitiven basierend auf den von setVertexBuffer() bereitgestellten Vertex-Puffern.
drawIndexed() Experimentell: Zeichnet indizierte Primitiven basierend auf den von setVertexBuffer() und setIndexBuffer() bereitgestellten Vertex- und Index-Puffern.
drawIndirect() Experimentell: Zeichnet Primitiven unter Verwendung von aus einem GPUBuffer gelesenen Parametern.
drawIndexedIndirect() Experimentell: Zeichnet indizierte Primitiven unter Verwendung von aus einem GPUBuffer gelesenen Parametern.
end() Experimentell: Beendet die Aufzeichnung der aktuellen Render-Pass-Befehlsfolge.
endOcclusionQuery() Experimentell: Beendet eine aktive Okklusionsabfrage, die zuvor mit beginOcclusionQuery() gestartet wurde.
executeBundles() Experimentell: Führt Befehle aus, die zuvor in die referenzierten GPURenderBundles aufgenommen wurden, als Teil dieses Render-Passes.
insertDebugMarker() Experimentell: Markiert einen bestimmten Punkt in einer Reihe von kodierten Befehlen mit einem Label.
popDebugGroup() Experimentell: Beendet eine Debug-Gruppe, die mit einem pushDebugGroup()-Aufruf begonnen wurde.
pushDebugGroup() Experimentell: Beginnt eine Debug-Gruppe, die mit einem angegebenen Label markiert wird und alle nachfolgenden kodierten Befehle enthält, bis eine popDebugGroup()-Methode aufgerufen wird.
setBindGroup() Experimentell: Setzt die GPUBindGroup, die für nachfolgende Render-Befehle bei einem gegebenen Index verwendet werden soll.
setBlendConstant() Experimentell: Setzt die konstanten Mischfarben- und Alphawerte, die mit den "constant" und "one-minus-constant" Mischfaktoren verwendet werden (wie in der Deskriptor des GPUDevice.createRenderPipeline()-Methodes im blend-Eigenschaft festgelegt).
setIndexBuffer() Experimentell: Setzt den aktuellen GPUBuffer, der die Index-Daten für nachfolgende Zeichnungsbefehle bereitstellt.
setPipeline() Experimentell: Setzt die GPURenderPipeline, die für diesen Render-Pass verwendet werden soll.
setScissorRect() Experimentell: Setzt das Scheren-Rechteck, das während der Rasterisierungsstufe verwendet wird. Nach der Transformation in Viewport-Koordinaten werden alle Fragmente, die außerhalb des Scheren-Rechtecks fallen, verworfen.
setStencilReference() Experimentell: Setzt den Stencil-Referenzwert, der während der Stencil-Tests mit der "replace" Stencil-Operation (wie im Deskriptor des GPUDevice.createRenderPipeline()-Methodes in den Eigenschaften, die die verschiedenen Stencil-Operationen definieren, festgelegt) verwendet wird.
setVertexBuffer() Experimentell: Setzt oder entfernt den aktuellen GPUBuffer, der die Vertex-Daten für nachfolgende Zeichnungsbefehle bereitstellt.
setViewport() Experimentell: Setzt den Viewport, der während der Rasterisierungsphase verwendet wird, um linear von normalisierten Gerätekoordinaten zu Viewport-Koordinaten zuzuordnen.

Beispiele

In unserem Basis-Render-Demo werden mehrere Befehle über einen GPUCommandEncoder aufgezeichnet. Die meisten dieser Befehle stammen vom GPURenderPassEncoder, der ü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