GPURenderPassEncoder: draw() method
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
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);
const commandEncoder = device.createCommandEncoder();
const renderPassDescriptor = {
colorAttachments: [
{
clearValue: clearColor,
loadOp: "clear",
storeOp: "store",
view: context.getCurrentTexture().createView(),
},
],
};
const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
passEncoder.setPipeline(renderPipeline);
passEncoder.setVertexBuffer(0, vertexBuffer);
passEncoder.draw(3);
passEncoder.end();
device.queue.submit([commandEncoder.finish()]);
Specifications
Browser compatibility
|
Desktop |
Mobile |
|
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
WebView Android |
Chrome Android |
Firefox for Android |
Opera Android |
Safari on IOS |
Samsung Internet |
draw |
113Currently supported on ChromeOS, macOS, and Windows only.
|
113Currently supported on ChromeOS, macOS, and Windows only.
|
previewCurrently supported on Linux and Windows only.
|
No |
99Currently supported on ChromeOS, macOS, and Windows only.
|
No |
No |
No |
No |
No |
No |
No |
See also