The setVertexBuffer() method of the GPURenderPassEncoder interface sets or unsets the current GPUBuffer for the given slot that will provide vertex data for subsequent drawing commands.

slot

A number referencing the vertex buffer slot to set the vertex buffer for.

buffer

A GPUBuffer representing the buffer containing the vertex data to use for subsequent drawing commands, or null, in which case any previously-set buffer in the given slot is unset.

offset Optional

A number representing the offset, in bytes, into buffer where the vertex data begins. If omitted, offset defaults to 0.

size Optional

A number representing the size, in bytes, of the vertex data contained in buffer. If omitted, size defaults to the buffer's GPUBuffer.size - offset.

None (Undefined).

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

• buffer's GPUBuffer.usage contains the GPUBufferUsage.VERTEX flag.
• slot is less than the GPUDevice's maxVertexBuffers limit.
• offset + size is less than or equal to the buffer's GPUBuffer.size.
• offset is a multiple of 4.

In our basic render demo, several commands are recorded via a GPUCommandEncoder. Most of these commands originate from the GPURenderPassEncoder created via GPUCommandEncoder.beginRenderPass(). setVertexBuffer() is used as appropriate to set the source of vertex data.

// ...

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()]);

// ...

• The WebGPU API