GPURenderPassEncoder: draw()-Methode

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 draw()-Methode der GPURenderPassEncoder-Schnittstelle zeichnet Primitive basierend auf den durch setVertexBuffer() bereitgestellten Vertex-Puffern.

Syntax

js
draw(vertexCount)
draw(vertexCount, instanceCount)
draw(vertexCount, instanceCount, firstVertex)
draw(vertexCount, instanceCount, firstVertex, firstInstance)

Parameter

vertexCount

Eine Zahl, die die Anzahl der zu zeichnenden Vertices definiert.

instanceCount Optional

Eine Zahl, die die Anzahl der zu zeichnenden Instanzen definiert. Wenn weggelassen, ist der Standardwert für instanceCount 1.

firstVertex Optional

Eine Zahl, die den Offset in die Vertex-Puffer in Vertices definiert, von dem aus begonnen wird zu zeichnen. Wenn weggelassen, ist der Standardwert für firstVertex 0.

firstInstance Optional

Eine Zahl, die die erste zu zeichnende Instanz definiert. Wenn weggelassen, ist der Standardwert für firstInstance 0.

Rückgabewert

Keiner (Undefined).

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. draw() wird verwendet, um anzugeben, dass drei Vertices gezeichnet werden sollen, um unser Dreieck zu erstellen.

js
// ...

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
# dom-gpurendercommandsmixin-draw

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch