{"record":{"id":"cfd4d7ef9eb3b8ce","repo":"remotion-dev/remotion","slug":"failed-to-create-webgl-shader-cfd4d7","errorCode":null,"errorMessage":"Failed to create WebGL shader","messagePattern":"Failed to create WebGL shader","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/effects/src/contour-lines.ts","lineNumber":353,"sourceCode":"\t\t);\n\t\treturn;\n\t}\n\n\tfragColor = vec4(\n\t\tpremultipliedLine + texColor.rgb * (1.0 - lineAlpha),\n\t\tlineAlpha + texColor.a * (1.0 - lineAlpha)\n\t);\n}\n`;\n\nconst compileShader = (\n\tgl: WebGL2RenderingContext,\n\ttype: number,\n\tsource: string,\n): WebGLShader => {\n\tconst shader = gl.createShader(type);\n\tif (!shader) {\n\t\tthrow new Error('Failed to create WebGL 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(\n\t\t\t`Contour lines shader compile failed: ${log ?? '(no log)'}`,\n\t\t);\n\t}\n\n\treturn shader;\n};\n\nconst linkProgram = (\n\tgl: WebGL2RenderingContext,\n\tvs: WebGLShader,","sourceCodeStart":335,"sourceCodeEnd":371,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/effects/src/contour-lines.ts#L335-L371","documentation":"Thrown by compileShader in contour-lines.ts when gl.createShader(type) returns null. This means the WebGL2 context could not allocate a new shader object. The context was already successfully acquired (a separate error covers context creation failure), so a null return typically indicates GPU resource exhaustion, a lost WebGL context, or driver instability.","triggerScenarios":"The contour-lines effect's setupContourLines runs, the WebGL2 context is obtained, but gl.createShader(gl.VERTEX_SHADER) or gl.createShader(gl.FRAGMENT_SHADER) returns null. This occurs during the first render frame that applies contourLines(), or when the effect is re-initialized after a context loss.","commonSituations":"Rendering many simultaneous WebGL-based effects exceeding GPU object limits; headless rendering environment with a software WebGL implementation that has low resource caps; WebGL context lost event fired mid-setup; running in a VM or CI runner with a limited GPU; browser tab backgrounded and GPU resources reclaimed.","solutions":["Reduce the number of simultaneously active WebGL-backend effects in the composition.","Ensure the rendering environment (headless Chrome for Remotion Lambda/CLI) has GPU acceleration enabled or a robust software WebGL fallback (SwiftShader).","Listen for webglcontextlost events on the canvas and handle context restoration gracefully.","Check that the WebGL2 context is not already lost before the effect runs — if isContextLost() returns true, defer or skip the effect."],"exampleFix":null,"handlingStrategy":"try-catch","validationCode":"// Check context health before applying the effect\nconst canvas = document.createElement('canvas');\nconst gl = canvas.getContext('webgl2');\nif (!gl || gl.isContextLost()) {\n  // skip or fall back\n}","typeGuard":null,"tryCatchPattern":"try {\n  contourLines({...})(source, target);\n} catch (e) {\n  if (e instanceof Error && e.message === 'Failed to create WebGL shader') {\n    // GPU resource issue — reduce active WebGL effects or use a different environment\n  }\n  throw e;\n}","preventionTips":["Limit the number of simultaneously active WebGL-backend effects.","Ensure headless Chrome has GPU acceleration or SwiftShader for rendering.","Monitor gl.isContextLost() and webglcontextlost events.","Use a GPU-capable CI/rendering environment."],"tags":["webgl","effects","contour-lines","gpu","resource-exhaustion"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}