Shader
Quick answer
Shader is one compiled stage, created with device.createShader({stage, source}). Vertex and fragment stages are separate objects that RenderPipeline links later. Check compilationStatus or await asyncCompilationStatus, and read the info log to diagnose GLSL or WGSL errors, and each stage keeps its own handle and compilation log.
device. createShader ({ stage: 'vertex' , source: glsl }) → Shader
Key points
- stage is 'vertex', 'fragment' or 'compute'.
- compilationStatus reports 'pending', 'success' or 'error'.
- ShaderModule sources are assembled before createShader is called.
Example
const vs = device.createShader({
stage: 'vertex',
source: [
'#version 300 es',
'in vec3 positions;',
'in vec3 colors;',
'out vec3 vColor;',
'void main() {',
' vColor = colors;',
' gl_Position = vec4(positions, 1.0);',
'}'
].join('\n')
});
const fs = device.createShader({
stage: 'fragment',
source: [
'#version 300 es',
'precision highp float;',
'in vec3 vColor;',
'out vec4 fragColor;',
'void main() {',
' fragColor = vec4(vColor, 1.0);',
'}'
].join('\n')
});
const pipeline = device.createRenderPipeline({
vs: vs,
fs: fs,
topology: 'triangle-list',
bufferLayout: [
{ name: 'positions', stepMode: 'vertex', format: 'float32x3' },
{ name: 'colors', stepMode: 'vertex', format: 'float32x3' }
]
});const vs = device.createShader({ stage: 'vertex', source: vsSource });
if (vs.compilationStatus === 'error') {
const log = vs.getCompilationInfoSync();
console.error(log);
vs.debugShader();
}Notes
- Ignoring an 'error' status pushes failure to pipeline creation with a vaguer message.
- Passing a fragment source to the 'vertex' stage compiles too late to help debugging.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Shader. https://www.jingweizhi.com/en/lumagl/api/shader.html (accessed 2026-11-03).