Atlaslog
Atlaslog / luma.gl / Tutorial / Shaders and modular assembly
luma.gl · Tutorial

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.

Last verified 2026-11-03 · luma.gl 9.4 · Cite this page
Key points
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
Runnable examplesChinese originalAll Tutorials
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Cite this page

Atlaslog (2026). Shaders and modular assembly. https://www.jingweizhi.com/en/lumagl/tutorials/shaders-modules.html (accessed 2026-11-03).