BufferLayout
Quick answer
BufferLayout is a TypeScript type alias, not a class, describing how buffer bytes map to shader attributes. Each entry names an attribute plus its format, byteStride and stepMode of vertex or instance. VertexArray consumes the layout, and its names must match the ShaderLayout used by the pipeline.
type BufferLayout = { name, format?, byteStride?, stepMode?, attributes? }
Key points
- One entry per attribute carries name, format, byteStride and stepMode.
- stepMode 'instance' feeds per-instance data during instanced draws.
- Interleaved buffers declare the same byteStride on every attribute entry.
Example
const bufferLayout = [
{ name: 'positions', stepMode: 'vertex', format: 'float32x3' },
{ name: 'colors', stepMode: 'vertex', format: 'float32x3' }
];/* 每条记录 32 字节：位置 12 + 法线 12 + 颜色 8 */
const bufferLayout = [
{
name: 'vertexData',
stepMode: 'vertex',
byteStride: 32,
attributes: [
{ attribute: 'positions', format: 'float32x3', byteOffset: 0 },
{ attribute: 'normals', format: 'float32x3', byteOffset: 12 },
{ attribute: 'colors', format: 'float32x2', byteOffset: 24 }
]
}
];Notes
- There is no constructor, so writing new BufferLayout() fails at runtime.
- Names that differ from ShaderLayout leave attributes unbound and draw nothing.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). BufferLayout. https://www.jingweizhi.com/en/lumagl/api/buffer-layout.html (accessed 2026-11-03).