WebGPU: Vertex range requires buffer size larger than bound buffer size

Question

I just tried sending an array of vertex positions to the vertex shader.

This is my JS code snippet:

const vertices = new Float32Array([0, 0.5, 0, 1, -0.5, -0.5, 0, 2, 0.5, -0.5, 0, 1]);
const vertexBuffer = device.createBuffer({
    // equal to 48
    size: vertices.byteLength,
    usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
});
device.queue.writeBuffer(vertexBuffer, 0, vertices);

const vertexBuffers = [
    {
        attributes: [
            {
                shaderLocation: 0,
                offset: 0,
                format: "float32x4",
            },
        ],
        arrayStride: 16,
        stepMode: "vertex",
    },
];

Float32Array has length 12, so 48 bytes. However, I get this error message stating that I need 192 bytes:

Vertex range (first: 0, count: 12) requires a larger buffer (192) than the bound buffer size (48) of the vertex buffer at slot 0, with a stride of 16. - Encoding [RenderPassEncoder].Draw(12, 1, 0, 0).

This may not be relevant to the question, but for context, this is my shader program:

@vertex
fn vMain(@location(0) vertexPosition: vec4<f32>, @builtin(vertex_index) vertexIndex: u32) -> @builtin(position) vec4<f32>  {
    var positions = array<vec4<f32>, 3>(
        vec4<f32>(0, 0.5, 0, 1),
        vec4<f32>(-0.5, -0.5, 0, 2),
        vec4<f32>(0.5, -0.5, 0, 1),
    );

    return positions[vertexIndex];
}

@fragment
fn fMain() -> @location(0) vec4<f32> {
    return vec4<f32>(1, 1, 1, 1);
}

It doesn't use a vertex array, but I only use it to show if everything runs without errors. When I change the buffer size on line 3 of the snippet from vertices.byteLength to 368 it works fine and renders a triangle. Any value below 368 will cause failure.

After further testing, I found that doubling the size of the Float32Array by adding 4 floats per vertex and changing the stride to 32 would cause WebGPU to state that I needed 768 bytes.

Answer 1

You set the arrayStride to 32, which means each vertex will take up 32 bytes (https://developer.mozilla.org/en-US/docs/Web/ API/WebGPU_API#define_and_create_the_render_pipeline).

From your vertex layout, this should be 16, since you only defined one format float32x4 = 16 bytes.

From the error message (Draw(12, 1, 0, 0)) it appears that you are trying to draw 12 vertices. This means the expected total buffer size is: 12*32 = 368. Depending on your format, this should probably be Draw(3, 1, 0, 0) . In this way, your vertexBuffer can be divided into 3 vertices, and the position value of each vertex is vec4<f32>