GPURenderPassEncoder: drawIndirect() method

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The drawIndirect() method of the GPURenderPassEncoder interface draws primitives using parameters read from a GPUBuffer.

Syntax

js

drawIndirect(indirectBuffer, indirectOffset)

Parameters

indirectBuffer

A GPUBuffer containing the vertexCount, instanceCount, firstVertex, and firstInstance values needed to carry out the drawing operation. The buffer must contain a tightly packed block of four 32-bit unsigned integer values representing the values (16 bytes total), given in the same order as the arguments for GPURenderPassEncoder.draw(). So for example:

js

const uint32 = new Uint32Array(4);
uint32[0] = 3; // The vertexCount value
uint32[1] = 1; // The instanceCount value
uint32[2] = 0; // The firstVertex value
uint32[3] = 0; // The firstInstance value

// Write values into a GPUBuffer
device.queue.writeBuffer(buffer, 0, uint32, 0, uint32.length);
indirectOffset

The offset, in bytes, into indirectBuffer where the value data begins.

Return value

None (Undefined).

Validation

The following criteria must be met when calling drawIndirect(), otherwise a GPUValidationError is generated and the GPURenderPassEncoder becomes invalid:

  • indirectBuffer's GPUBuffer.usage contains the GPUBufferUsage.INDIRECT flag.
  • indirectOffset + the total size specified by the value parameters in the indirectBuffer is less than or equal to the indirectBuffer's GPUBuffer.size.
  • indirectOffset is a multiple of 4.

Examples

js

// ...

// Create GPURenderPassEncoder
const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);

// Set pipeline and vertex buffer
passEncoder.setPipeline(renderPipeline);
passEncoder.setVertexBuffer(0, vertexBuffer);

// Create drawIndirect values
const uint32 = new Uint32Array(4);
uint32[0] = 3;
uint32[1] = 1;
uint32[2] = 0;
uint32[3] = 0;

// Create a GPUBuffer and write the draw values into it
const drawValues = device.createBuffer({
  size: 16,
  usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.INDIRECT,
});
device.queue.writeBuffer(drawValues, 0, uint32, 0, uint32.length);

// Draw the vertices
passEncoder.drawIndirect(drawValues, 0);

// End the render pass
passEncoder.end();

// End frame by passing array of GPUCommandBuffers to command queue for execution
device.queue.submit([commandEncoder.finish()]);

// ...

Specifications

Specification
WebGPU
# dom-gpurendercommandsmixin-drawindirect

Browser compatibility

BCD tables only load in the browser

See also