GPURenderPassEncoder: draw() method
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The draw()
method of the
GPURenderPassEncoder
interface draws primitives based on the vertex buffers provided by setVertexBuffer()
.
Syntax
draw(vertexCount)
draw(vertexCount, instanceCount)
draw(vertexCount, instanceCount, firstVertex)
draw(vertexCount, instanceCount, firstVertex, firstInstance)
Parameters
vertexCount
-
A number defining the number of vertices to draw.
instanceCount
Optional-
A number defining the number of instances to draw. If omitted,
instanceCount
defaults to 1. firstVertex
Optional-
A number defining the offset into the vertex buffers, in vertices, to begin drawing from. If omitted,
firstVertex
defaults to 0. firstInstance
Optional-
A number defining the first instance to draw. If omitted,
firstInstance
defaults to 0.
Return value
None (Undefined
).
Examples
In our basic render demo, several commands are recorded via a GPUCommandEncoder
. Most of these commands originate from the GPURenderPassEncoder
created via GPUCommandEncoder.beginRenderPass()
. draw()
is used to specify that three vertices should be drawn to create our triangle.
// ...
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()]);
// ...
Specifications
Specification |
---|
WebGPU # dom-gpurendercommandsmixin-draw |
Browser compatibility
BCD tables only load in the browser
See also
- The WebGPU API