A GPUVertexBufferLayout declares the byte stride and attribute format of each vertex, linking buffer data to shader @location slots

Before WebGPU can interpret vertex buffer data, you declare its structure with a GPUVertexBufferLayout dictionary: arrayStride (bytes between consecutive vertices — 8 for two float32 values), and an attributes array. Each attribute specifies format (e.g. 'float32x2'), offset (bytes into the vertex where this attribute starts), and shaderLocation (integer 0–15 linking to @location(n) in the vertex shader). The layout is not used directly until passed in the vertex.buffers array of a render pipeline.

Examples

const vertexBufferLayout = {
  arrayStride: 8,          // 2 floats × 4 bytes
  attributes: [{
    format: 'float32x2',
    offset: 0,
    shaderLocation: 0,     // maps to @location(0) in WGSL
  }],
};

Assessment

A vertex has a 3D position (float32x3) followed by a 2D UV (float32x2). Write the GPUVertexBufferLayout: correct arrayStride, two attribute entries with their offset values.