GPURenderPassEncoder: setVertexBuffer() method
==============================================

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

 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.

Syntax
------


```js
setVertexBuffer(slot, buffer, offset, size)
```

### Parameters

`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`.

### Return value

None (`Undefined`).

### Validation

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.
Examples
--------

### Set vertex buffer

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.


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

// ...
```

### Unset vertex buffer


```js
// Set vertex buffer in slot 0
passEncoder.setVertexBuffer(0, vertexBuffer);

// Later, unset vertex buffer in slot 0
passEncoder.setVertexBuffer(0, null);
```

Specifications
--------------

| Specification |
| --- |
| WebGPU # dom-gpurendercommandsmixin-setvertexbuffer |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The WebGPU API