{"record":{"id":"7ba71ec01c24f8d3","repo":"remotion-dev/remotion","slug":"failed-to-create-webgl-shader-7ba71e","errorCode":null,"errorMessage":"Failed to create WebGL shader","messagePattern":"Failed to create WebGL shader","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"critical","filePath":"packages/effects/src/flannel.ts","lineNumber":194,"sourceCode":"\tvec3 sourceRgb = source.rgb / source.a;\n\tfloat luminance = dot(sourceRgb, vec3(0.2126, 0.7152, 0.0722));\n\tvec3 plaidColor = mix(uBaseColor.rgb, uStripeColor.rgb, bands * uStripeColor.a);\n\tplaidColor = mix(plaidColor, uStripeColor.rgb * 0.72, crossing * uStripeColor.a);\n\tplaidColor *= mix(0.58, 1.18, luminance) + weave;\n\tvec3 result = mix(sourceRgb, clamp(plaidColor, 0.0, 1.0), uAmount);\n\n\tfragColor = vec4(result * source.a, source.a);\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(`Flannel shader compile failed: ${log ?? '(no log)'}`);\n\t}\n\n\treturn shader;\n};\n\nconst setupFlannel = (target: HTMLCanvasElement): FlannelState => {\n\tconst gl = target.getContext('webgl2', {\n\t\tpremultipliedAlpha: true,\n\t\talpha: true,\n\t\tpreserveDrawingBuffer: true,","sourceCodeStart":176,"sourceCodeEnd":212,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/effects/src/flannel.ts#L176-L212","documentation":"Thrown by compileShader in flannel when gl.createShader() returns null. WebGL2 returns null from createShader only when the context is lost, the type is invalid, or the implementation has run out of GPU resources. This is a GPU/driver-level failure, not a shader source problem (source errors surface as 605).","triggerScenarios":"Calling flannel() when the WebGL2 context was just lost (tab backgrounded, GPU crash, too many contexts); hardware/driver that fails to allocate shader objects; running in a headless browser with software GL and exhausted resources.","commonSituations":"Rendering many concurrent flannel layers in Lambda/serverless where GPU memory is tight; testing in older virtualized GL implementations; switching tabs during render and resuming.","solutions":["Reduce the number of simultaneous WebGL effects on screen.","Retry the render on a fresh Chrome instance or different worker.","Update GPU drivers / use a Chromium build with working GL (Remotion's bundled Chrome)."],"exampleFix":null,"handlingStrategy":"retry","validationCode":null,"typeGuard":null,"tryCatchPattern":"let effect;\nfor (let attempt = 0; attempt < 3; attempt++) {\n  try {\n    effect = flannel(params);\n    break;\n  } catch (err) {\n    if (attempt === 2 || !/WebGL|GPU/i.test(String(err))) throw err;\n    await new Promise((r) => setTimeout(r, 200 * (attempt + 1)));\n  }\n}","preventionTips":["Limit the number of WebGL effects active in a single composition.","Ensure Chrome is launched with a working GL backend (Remotion's bundled Chrome).","Render in an environment with a healthy GPU; upgrade drivers if running locally."],"tags":["webgl","flannel","gpu","runtime","shader"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}