{"record":{"id":"91f42e849bbf4ccf","repo":"BabylonJS/Babylon.js","slug":"fragment-shader-log","errorCode":null,"errorMessage":"FRAGMENT SHADER ${log}","messagePattern":"FRAGMENT SHADER (.+?)","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/dev/core/src/Engines/thinEngine.functions.ts","lineNumber":238,"sourceCode":"\r\n    const linked = context.getProgramParameter(program, context.LINK_STATUS);\r\n    if (!linked) {\r\n        // Get more info\r\n        // Vertex\r\n        if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {\r\n            const log = gl.getShaderInfoLog(vertexShader);\r\n            if (log) {\r\n                pipelineContext.vertexCompilationError = log;\r\n                throw new Error(\"VERTEX SHADER \" + log);\r\n            }\r\n        }\r\n\r\n        // Fragment\r\n        if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {\r\n            const log = gl.getShaderInfoLog(fragmentShader);\r\n            if (log) {\r\n                pipelineContext.fragmentCompilationError = log;\r\n                throw new Error(\"FRAGMENT SHADER \" + log);\r\n            }\r\n        }\r\n\r\n        const error = context.getProgramInfoLog(program);\r\n        if (error) {\r\n            pipelineContext.programLinkError = error;\r\n            throw new Error(error);\r\n        }\r\n    }\r\n\r\n    if (/*this.*/ validateShaderPrograms) {\r\n        context.validateProgram(program);\r\n        const validated = context.getProgramParameter(program, context.VALIDATE_STATUS);\r\n\r\n        if (!validated) {\r\n            const error = context.getProgramInfoLog(program);\r\n            if (error) {\r\n                pipelineContext.programValidationError = error;\r","sourceCodeStart":220,"sourceCodeEnd":256,"githubUrl":"https://github.com/BabylonJS/Babylon.js/blob/0592b347b8a4ee0236089ea86a749cacfdb266d8/packages/dev/core/src/Engines/thinEngine.functions.ts#L220-L256","documentation":"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).","triggerScenarios":"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.","commonSituations":"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.","solutions":["Read the log appended to the message — it names the exact GLSL line and problem, and fix that line in the fragment shader code","Check that fragment GLSL is valid for the running context (WebGL1 vs WebGL2 syntax, precision qualifiers declared)","Reduce uniforms/varyings/texture lookups if the log indicates resource limits were exceeded","Catch the error and inspect pipelineContext.fragmentCompilationError to get the stored log programmatically"],"exampleFix":"// before\nfragmentShader = `varying vec3 vColor; gl_FragColor = vec4(colr, 1.0);`; // typo\n// after\nfragmentShader = `varying vec3 vColor; void main() { gl_FragColor = vec4(vColor, 1.0); }`;","handlingStrategy":"try-catch","validationCode":"function validateFragmentShaderSource(src: string, isWebGL2: boolean): string | null {\n  if (isWebGL2 && !/#version 300 es/.test(src) && !/#version 100/.test(src)) return 'missing version directive';\n  if (!/precision\\s+(highp|mediump|lowp)\\s+float/.test(src)) return 'missing precision qualifier';\n  return null;\n}","typeGuard":"function hasFragmentCompilationError(ctx: unknown): ctx is { fragmentCompilationError: string } {\n  return typeof ctx === 'object' && ctx !== null && 'fragmentCompilationError' in ctx && typeof (ctx as any).fragmentCompilationError === 'string';\n}","tryCatchPattern":"try {\n  const effect = engine.createEffect(...);\n} catch (e) {\n  if ((e as Error).message.startsWith('FRAGMENT SHADER')) {\n    console.error('GLSL fragment compile failed:', (e as Error).message.slice('FRAGMENT SHADER'.length));\n  } else throw e;\n}","preventionTips":["Test shaders with glValidateProgram / a GLSL linter before shipping","Keep a unit test that compiles every shader in the app on a headless GL context","Declare precision qualifiers in every fragment shader","Match GLSL syntax to the target context version (WebGL1 vs WebGL2)"],"tags":["webgl","glsl","shader-compilation"],"backgroundTag":"shader-compile-error","analyzedSha":"0592b347b8a4ee0236089ea86a749cacfdb266d8","analyzedAt":"2026-08-30T15:11:20.442Z","schemaVersion":2},"datasetVersion":"2026-08-30T18:17:15.746Z"}