ShaderLayout
Quick answer
ShaderLayout is a type describing the shader interface: attribute names with locations and types, plus binding declarations for uniforms, textures and samplers. VertexArray and Model use it to map JavaScript resources onto GPU slots. Supply it manually when reflection cannot infer the layout.
type ShaderLayout = { attributes, bindings, uniforms?, varyings? }
Key points
- Top-level fields are attributes, bindings, uniforms and varyings.
- Bindings declare group, location and a type such as 'sampler' or 'uniform'.
- Groups may be sparse; omitted locations are simply skipped.
Example
const shaderLayout = {
attributes: [
{ name: 'positions', location: 0, type: 'vec3<f32>' },
{ name: 'instanceOffsets', location: 1, type: 'vec2<f32>', stepMode: 'instance' }
],
bindings: [
{ name: 'frameUniforms', type: 'uniform', group: 0, location: 0 },
{ name: 'materialUniforms', type: 'uniform', group: 3, location: 0 },
{ name: 'baseColorTexture', type: 'texture', group: 3, location: 1,
viewDimension: '2d', sampleType: 'float' },
{ name: 'baseColorSampler', type: 'sampler', group: 3, location: 2,
samplerType: 'filtering' }
]
};
const pipeline = device.createRenderPipeline({
vs: vs,
fs: fs,
shaderLayout: shaderLayout,
bufferLayout: [
{ name: 'positions', stepMode: 'vertex', format: 'float32x3' },
{ name: 'instanceOffsets', stepMode: 'instance', format: 'float32x2' }
]
});Notes
- Duplicate attribute locations cause binding collisions at draw time.
- A layout that disagrees with the compiled shader fails during pipeline linking.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). ShaderLayout. https://www.jingweizhi.com/en/lumagl/api/shader-layout.html (accessed 2026-11-03).