Shaders and modular assembly
Quick answer
This tutorial separates shader compilation from assembly in luma.gl v9. It creates vertex and fragment Shader objects with complete GLSL, checks compilationStatus and logs, then defines a ShaderModule as a plain object with name, fs code and inject hooks such as fs:#main-end, which Model merges automatically. It also shows manual assembly through ShaderAssembler.assembleGLSLShaderPair. Readers can reuse shader chunks and debug injection problems.
Key points
- Define modules as plain objects with a name, fs code and inject fragments.
- Inject at an existing hook such as fs:#main-end, otherwise nothing happens.
- Use ShaderAssembler.assembleGLSLShaderPair when building pipelines manually.
Example
const vs = device.createShader({
stage: 'vertex',
source: [
'#version 300 es',
'in vec3 positions;',
'in vec2 uvs;',
'out vec2 vUV;',
'void main() {',
' vUV = uvs;',
' gl_Position = vec4(positions, 1.0);',
'}'
].join('\n')
});
const fs = device.createShader({
stage: 'fragment',
source: [
'#version 300 es',
'precision highp float;',
'in vec2 vUV;',
'uniform sampler2D uTexture;',
'out vec4 fragColor;',
'void main() { fragColor = texture(uTexture, vUV); }'
].join('\n')
});
console.log(vs.compilationStatus); // 'success' 或 'error'
console.log(vs.getCompilationInfoSync());const waveModule = {
name: 'wave',
fs: [
'float wave(float x, float freq) {',
' return sin(x * freq) * 0.5 + 0.5;',
'}'
].join('\n'),
inject: {
'fs:#main-end': 'fragColor.rgb *= wave(vUV.x, 6.0);'
}
};
const model = new luma.Model(device, {
vs: vsSource,
fs: fsSource,
modules: [waveModule],
attributes: { positions: positions, uvs: uvs },
bufferLayout: [
{ name: 'positions', stepMode: 'vertex', format: 'float32x3' },
{ name: 'uvs', stepMode: 'vertex', format: 'float32x2' }
],
vertexCount: 6,
topology: 'triangle-list'
});
Notes
- luma.ShaderModule is undefined at runtime in v9, so new ShaderModule throws.
- Duplicate helper names across modules cause redefinition compile errors.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Shaders and modular assembly. https://www.jingweizhi.com/en/lumagl/tutorials/shaders-modules.html (accessed 2026-11-03).