Function setVertexBuffers

This function sets the buffers attribute of the vertex state in a render pipeline. In this function, the input argument formats is a GPU vertex-format array. It can be specified as 'float32', 'float32x2', 'float32x3', 'float32x4', etc., which correspond to the WGSL style in the shader f32, vec2<f32>, vec3<f32>, vec4<f32>, etc. If the vertex data is stored in a separate buffer for each attribute such as position, normal, and UV, you can simply provide only this input argument like ['float32x3', 'float32x3', 'float32x2'] and ignore all the other optional arguments. In this case, the setVertexBuffers function will automatically calculate the offset, arrayStride, and shaderLocation for each vertex attribute. Note that the shaderLocation is set with an array filled with consecutive numbers like [0, 1, 2], which must match the @location attribute specified in the vertex shader. Otherwise, you need to manually specify the shaderLocations array argument.

On the other hand, if you store the vertex data in a single buffer for all attributes (e.g., position, normal, and uv), you will need to provide not only the vertex formats array, but also the offsets array. Here is an example of a single buffer that stores the position (vec3<f32>), normal (vec3<f32>), and uv (vec2<f32>) data. The corresponding arrayStride will be 12, 12, and 8, and the offsets array will be [0, 12, 24]. In this case, you can set the buffers attribute by calling the function like this:

const bufs = setVertexBuffers(['float32x3', 'float32x3', 'float32x2'], [0, 12, 24]);

The above example assumes that all the vertex attributes (position, normal, and uv) stored in a single buffer are used in the pipeline and vertex shader. What happens if not all the attributes in the buffer are needed. For example, the pipeline and shader only need the position and uv data, but not the normal data. In this case, in addition to the formats and offsets arguments, you will also need to specify the totalArrayStride argument. The arrayStride for position, normal, and uv is 12, 12, and 8, respectively, so the totalArrayStride = 12 + 12 + 8 = 32. Thus, we can create the buffers attribute using the following code

const bufs = setVertexBuffers(['float32x3', 'float32x2'], [0, 24], 32);

Note that the offsets array is set to [0, 24] rather than [0, 12], because the uv data starts after position and normal data, while the normal data is still stored in the buffer even though it is not used in this example.

Returns

An array of GPU vertex buffer layout.