BabylonJS/Babylon.js · error · Error

VERTEX SHADER ${log}

Error message

VERTEX SHADER ${log}

What it means

During pipeline finalization the engine checks gl.getShaderParameter(vertexShader, COMPILE_STATUS). If the vertex shader failed to compile, the engine stores the driver's info log in pipelineContext.vertexCompilationError and throws "VERTEX SHADER <log>". This is a shader source/feature error surfaced by the GLSL compiler, not a runtime state problem.

Source

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

/**
 * @internal
 */
export function _finalizePipelineContext(pipelineContext: WebGLPipelineContext, gl: WebGLContext, validateShaderPrograms?: boolean) {
    const context = pipelineContext.context!;
    const vertexShader = pipelineContext.vertexShader!;
    const fragmentShader = pipelineContext.fragmentShader!;
    const program = pipelineContext.program!;

    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);
        }
    }

View on GitHub (pinned to 0592b347b8)

Solutions

1. Read the driver log appended to the message and fix the reported GLSL line/syntax error.
2. Verify the shader's GLSL version matches the engine context (use ShaderStore with both .vertex/.fragment for GLSL ES 1.0 and WGSL/ES3 variants as needed).
3. Add required #extension directives or remove unsupported features for the target WebGL version.
4. Test with a minimal shader to isolate whether the error comes from custom code or the engine's injected defines.

Example fix

// before (WebGL1 context)
vertexShader: `in vec3 position; void main(){ gl_Position = vec4(position,1.0); }`
// after
vertexShader: `attribute vec3 position; void main(){ gl_Position = vec4(position,1.0); }`

function validateShaderSource(src) {
  if (!/#version|attribute|in\s/.test(src)) console.warn("shader may be missing declarations");
  // optionally compile in an offscreen context in CI to catch errors early
}

null

try {
  effect = new Effect(name, attrs, uniforms, engine);
} catch (e) {
  if (/VERTEX SHADER|FRAGMENT SHADER/.test(e.message)) {
    console.error(e.message); // driver log included
    effect = fallbackSimpleEffect;
  }
}

When it happens

Trigger: Creating any Effect/material whose vertex shader fails GLSL compilation: syntax errors, unsupported GLSL version/extension (WebGL1 vs GLSL ES 3.0 features), uniforms exceeding limits, invalid precision qualifiers.

Common situations: Custom ShaderMaterial with GLSL bugs, shader code written for WebGL2 (in/out, texture()) running on a WebGL1 context, driver-specific strictness, missing #extension directives.

Related errors

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

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