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 einem GPURenderPipeline ausgegeben werden. Sie ist Teil der gesamten Kodieraktivität eines GPUCommandEncoder.

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

Eine Vertex-Stufe, in der ein Vertex-Shader Positionsdaten, die in die GPU eingegeben werden, nutzt, um eine Serie von Vertices im 3D-Raum unter Anwendung festgelegter Effekte wie Rotation, Übersetzung oder Perspektive zu positionieren. Die Vertices werden dann zu Primitiven wie Dreiecken (dem grundlegenden Baustein gerenderter Grafiken) zusammengesetzt und von der GPU rasterisiert, um herauszufinden, welche Pixel jedes von ihnen auf der Zeichenfläche abdecken sollte.
Eine Fragment-Stufe, in der ein Fragment-Shader die Farbe für jedes Pixel berechnet, das von den vom Vertex-Shader erzeugten Primitiven abgedeckt wird. Diese Berechnungen verwenden häufig Eingaben wie Bilder (in Form von Texturen), die Oberflächendetails sowie die Position und Farbe virtueller Lichter bereitstellen.

Ein GPURenderPassEncoder-Objektinstanz wird über die GPUCommandEncoder.beginRenderPass()-Eigenschaft 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 am angegebenen Index des betreffenden GPUQuerySet (bereitgestellt als Wert der occlusionQuerySet-Descriptor-Eigenschaft bei der Aufrufung von GPUCommandEncoder.beginRenderPass(), um den Renderpass auszuführen).
draw() Experimentell: Zeichnet Primitive basierend auf den Vertex-Buffern, die von setVertexBuffer() bereitgestellt werden.
drawIndexed() Experimentell: Zeichnet indizierte Primitive basierend auf den Vertex- und Index-Buffern, die von setVertexBuffer() und setIndexBuffer() bereitgestellt werden.
drawIndirect() Experimentell: Zeichnet Primitive unter Verwendung von Parametern, die aus einem GPUBuffer gelesen werden.
drawIndexedIndirect() Experimentell: Zeichnet indizierte Primitive unter Verwendung von Parametern, die aus einem GPUBuffer gelesen werden.
end() Experimentell: Beendet die Aufzeichnung der aktuellen Renderpass-Befehlsequenz.
endOcclusionQuery() Experimentell: Beendet eine aktive Okklusionsabfrage, die zuvor mit beginOcclusionQuery() gestartet wurde.
executeBundles() Experimentell: Führt Befehle aus, die zuvor in die referenzierten GPURenderBundles aufgezeichnet wurden, als Teil dieses Renderpasses.
insertDebugMarker() Experimentell: Markiert einen spezifischen Punkt in einer Serie 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 gekennzeichnet ist und alle folgenden kodierten Befehle enthalten wird, bis eine popDebugGroup()-Methode aufgerufen wird.
setBindGroup() Experimentell: Setzt die GPUBindGroup, die für nachfolgende Renderbefehle verwendet werden soll, für einen gegebenen Index.
setBlendConstant() Experimentell: Legt die konstanten Farb- und Alphawerte für das Mischen fest, die mit den "constant" und "one-minus-constant" Mischfaktoren verwendet werden (wie im Descriptor der GPUDevice.createRenderPipeline()-Methode im blend-Eigentum festgelegt).
setIndexBuffer() Experimentell: Legt den aktuellen GPUBuffer fest, der Indexdaten für nachfolgende Zeichenbefehle bereitstellt.
setPipeline() Experimentell: Legt die GPURenderPipeline fest, die für diesen Renderpass verwendet werden soll.
setScissorRect() Experimentell: Legt das Scherrechteck fest, das während der Rasterisierungsstufe verwendet wird. Nach der Umwandlung in Ansichtsbereichskoordinaten werden alle Fragmente, die außerhalb des Scherrechtecks fallen, verworfen.
setStencilReference() Experimentell: Legt den Referenzwert für Schablonen fest, der bei Schablonentests mit der "replace" Schablonenoperation verwendet wird (wie im Descriptor der GPUDevice.createRenderPipeline()-Methode in den Eigenschaften der verschiedenen Schablonenoperationen festgelegt).
setVertexBuffer() Experimentell: Setzt oder hebt den aktuellen GPUBuffer auf, der Vertexdaten für nachfolgende Zeichenbefehle bereitstellt.
setViewport() Experimentell: Legt den Ansichtsbereich fest, der während der Rasterisierungsstufe verwendet wird, um von normalisierten Gerätekoordinaten zu Ansichtsbereichskoordinaten linear zu mappen.

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 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

BCD tables only load in the browser

Siehe auch

Die WebGPU API