VertexArray
Quick answer
VertexArray binds buffers to shader attribute slots so one pipeline can draw different geometry. Create it with device.createVertexArray({shaderLayout, bufferLayout}), then bind slots with setBuffer and setIndexBuffer for indexed draws. It also reports draw-readiness through getDrawValidationError, and swapping vertex arrays between draws is cheap.
device. createVertexArray ({ shaderLayout, bufferLayout }) → VertexArray
Key points
- Constructor props are shaderLayout, bufferLayout and an optional id.
- setBuffer(slot, buffer) rebinds one attribute without recreating the array.
- setIndexBuffer(buffer) enables indexed draws through RenderPass.
Example
const positions = device.createBuffer({
data: new Float32Array([
-0.5, -0.5,
0.5, -0.5,
0.0, 0.5
]),
usage: Buffer.VERTEX
});
const vertexArray = device.createVertexArray({
shaderLayout: pipeline.shaderLayout,
bufferLayout: pipeline.bufferLayout
});
const slot = vertexArray.getBufferSlot('positions');
if (slot !== null) {
vertexArray.setBuffer(slot, positions);
}
console.log(vertexArray.getDrawValidationError()); // null 表示可以绘制const indices = device.createBuffer({
data: new Uint32Array([0, 1, 2]),
usage: Buffer.INDEX,
indexType: 'uint32'
});
vertexArray.setIndexBuffer(indices);
pass.setPipeline(pipeline);
pass.setVertexArray(vertexArray);
pass.draw({ indexCount: 3 });Notes
- A buffer format that disagrees with bufferLayout fails validation at draw time.
- Exceeding device.limits.maxVertexAttributes leaves later slots unbound.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). VertexArray. https://www.jingweizhi.com/en/lumagl/api/vertex-array.html (accessed 2026-11-03).