BabylonJS/Babylon.js · error · Error

FRAGMENT SHADER ${log}

Error message

FRAGMENT SHADER ${log}

What it means

Babylon.js throws this when the WebGL fragment shader failed to compile. The engine calls gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS) in _finalizePipelineContext after compiling a shader program; on failure it stores the driver's info log in pipelineContext.fragmentCompilationError and rethrows it prefixed with 'FRAGMENT SHADER '. The appended log contains the GLSL compiler's diagnostic (line number and reason).

Source

Thrown at packages/dev/core/src/Engines/thinEngine.functions.ts:238

    const linked = context.getProgramParameter(program, context.LINK_STATUS);
    if (!linked) {
        // Get more info
        // Vertex
        if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
            const log = gl.getShaderInfoLog(vertexShader);
            if (log) {
                pipelineContext.vertexCompilationError = log;
                throw new Error("VERTEX SHADER " + log);
            }
        }

        // Fragment
        if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
            const log = gl.getShaderInfoLog(fragmentShader);
            if (log) {
                pipelineContext.fragmentCompilationError = log;
                throw new Error("FRAGMENT SHADER " + log);
            }
        }

        const error = context.getProgramInfoLog(program);
        if (error) {
            pipelineContext.programLinkError = error;
            throw new Error(error);
        }
    }

    if (/*this.*/ validateShaderPrograms) {
        context.validateProgram(program);
        const validated = context.getProgramParameter(program, context.VALIDATE_STATUS);

        if (!validated) {
            const error = context.getProgramInfoLog(program);
            if (error) {
                pipelineContext.programValidationError = error;

View on GitHub (pinned to 0592b347b8)

Solutions

1. Read the log appended to the message — it names the exact GLSL line and problem, and fix that line in the fragment shader code
2. Check that fragment GLSL is valid for the running context (WebGL1 vs WebGL2 syntax, precision qualifiers declared)
3. Reduce uniforms/varyings/texture lookups if the log indicates resource limits were exceeded
4. Catch the error and inspect pipelineContext.fragmentCompilationError to get the stored log programmatically

Example fix

// before
fragmentShader = `varying vec3 vColor; gl_FragColor = vec4(colr, 1.0);`; // typo
// after
fragmentShader = `varying vec3 vColor; void main() { gl_FragColor = vec4(vColor, 1.0); }`;

function validateFragmentShaderSource(src: string, isWebGL2: boolean): string | null {
  if (isWebGL2 && !/#version 300 es/.test(src) && !/#version 100/.test(src)) return 'missing version directive';
  if (!/precision\s+(highp|mediump|lowp)\s+float/.test(src)) return 'missing precision qualifier';
  return null;
}

function hasFragmentCompilationError(ctx: unknown): ctx is { fragmentCompilationError: string } {
  return typeof ctx === 'object' && ctx !== null && 'fragmentCompilationError' in ctx && typeof (ctx as any).fragmentCompilationError === 'string';
}

try {
  const effect = engine.createEffect(...);
} catch (e) {
  if ((e as Error).message.startsWith('FRAGMENT SHADER')) {
    console.error('GLSL fragment compile failed:', (e as Error).message.slice('FRAGMENT SHADER'.length));
  } else throw e;
}

When it happens

Trigger: Creating any effect/material whose GLSL fragment code is invalid: syntax errors, unsupported GLSL version directives, using reserved keywords, texture sampler type mismatches (e.g. sampler2D vs samplerCube), or too many varyings/uniforms for the GPU's limits.

Common situations: Custom ShaderMaterial with a typo in fragment GLSL; shader written for WebGL1 running on a WebGL2 context without '#version 300 es' adjustments; node-material/custom shader with wrong varying declarations; mobile GPUs rejecting shader complexity (register/uniform limits) that desktop accepts.

Related errors

• VERTEX SHADER ${log}
• ${error}
• Atmosphere is not supported on WebGL ${engine.version}.
• Instanced arrays are required for MSDF text rendering.
• Unable to create multi sampled framebuffer

AI-assisted analysis of BabylonJS/Babylon.js@0592b347b8 (2026-08-30). Data as JSON: /api/errors/91f42e849bbf4ccf. Report an issue: GitHub.