GPURenderPassEncoder: draw() Methode

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 draw()-Methode des GPURenderPassEncoder-Interfaces zeichnet Primitive basierend auf den von 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 den Vertex-Puffern in Vertices definiert, von dem aus mit dem Zeichnen begonnen wird. 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

Siehe auch