{"record":{"id":"67d56afcdb3b4ebb","repo":"remotion-dev/remotion","slug":"failed-to-compile-shader-log","errorCode":null,"errorMessage":"Failed to compile shader: ${log}","messagePattern":"Failed to compile shader: (.+?)","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/transitions/src/presentations/blur-slide.tsx","lineNumber":113,"sourceCode":"\toutColor = color / float(SAMPLES);\n}`;\n\nconst compileShader = (\n\tgl: WebGL2RenderingContext,\n\tsource: string,\n\ttype: number,\n): WebGLShader => {\n\tconst shader = gl.createShader(type);\n\tif (!shader) {\n\t\tthrow new Error('Failed to create shader');\n\t}\n\n\tgl.shaderSource(shader, source);\n\tgl.compileShader(shader);\n\tif (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n\t\tconst log = gl.getShaderInfoLog(shader);\n\t\tgl.deleteShader(shader);\n\t\tthrow new Error(`Failed to compile shader: ${log}`);\n\t}\n\n\treturn shader;\n};\n\nconst createProgram = (\n\tgl: WebGL2RenderingContext,\n\tfragmentShader: string,\n): WebGLProgram => {\n\tconst program = gl.createProgram();\n\tif (!program) {\n\t\tthrow new Error('Failed to create WebGL program');\n\t}\n\n\tconst vs = compileShader(gl, VERTEX_SHADER, gl.VERTEX_SHADER);\n\tconst fs = compileShader(gl, fragmentShader, gl.FRAGMENT_SHADER);\n\tgl.attachShader(program, vs);\n\tgl.attachShader(program, fs);","sourceCodeStart":95,"sourceCodeEnd":131,"githubUrl":"https://github.com/remotion-dev/remotion/blob/b2f4e34732f3c6c222ea029413e22dc402218cd7/packages/transitions/src/presentations/blur-slide.tsx#L95-L131","documentation":"After compiling a shader, compileShader checks gl.COMPILE_STATUS. If the GLSL source failed to compile, the shader is deleted and the WebGL info log is thrown as 'Failed to compile shader: <log>'. The log identifies the GLSL syntax/semantic problem.","triggerScenarios":"BlurSlide transition shader source contains GLSL errors (bad syntax, unsupported GLSL ES 3.0 features, wrong precision qualifiers) causing gl.compileShader to fail.","commonSituations":"GPU driver-specific GLSL compiler strictness, modified/custom shader code with typos, running on hardware whose GLSL compiler rejects a construct accepted elsewhere.","solutions":["Read the attached log in the message — it names the GLSL line and error; fix the shader source accordingly.","Update GPU drivers or try another browser, since GLSL compilers differ between vendors.","If you customized the blur-slide shader, revert to the stock @remotion/transitions source.","Verify the shader uses valid GLSL ES 3.00 syntax (#version 300 es) matching the WebGL2 pipeline."],"exampleFix":null,"handlingStrategy":"fallback","validationCode":"const vs = compileShader(gl, vertexSrc, gl.VERTEX_SHADER); // throws with GLSL log\n// pre-validate sources are non-empty and contain '#version 300 es':\nif (!vertexSrc.trim().startsWith('#version 300 es')) throw new Error('shader missing GLSL ES 3.00 header');","typeGuard":null,"tryCatchPattern":"try {\n  program = createProgram(gl, vertexSrc, fragmentSrc);\n} catch (e) {\n  if (e.message.startsWith('Failed to compile shader:')) {\n    console.error('GLSL log:', e.message);\n    program = useStockBlurSlideShader(gl); // revert to bundled source\n  } else throw e;\n}","preventionTips":["Never hand-edit GLSL without validating syntax; keep stock shader sources.","Read the info log appended to the error message for line numbers.","Target GLSL ES 3.00 (WebGL2) constructs only.","Test transitions across browsers/GPU vendors since GLSL compilers differ."],"tags":["webgl","shader","glsl"],"backgroundTag":"shader-compilation-failed","analyzedSha":"b2f4e34732f3c6c222ea029413e22dc402218cd7","analyzedAt":"2026-09-09T13:27:51.281Z","contentChangedAt":"2026-09-09T13:27:51.281Z","schemaVersion":2},"datasetVersion":"2026-09-14T05:17:10.506Z"}