{"record":{"id":"117d718a9c0a2bb9","repo":"remotion-dev/remotion","slug":"failed-to-create-webgl-shader-117d71","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/lines.ts","lineNumber":307,"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(`Lines shader compile failed: ${log ?? '(no log)'}`);\n\t}\n\n\treturn shader;\n};\n\nconst linkProgram = (\n\tgl: WebGL2RenderingContext,\n\tvs: WebGLShader,\n\tfs: WebGLShader,\n): WebGLProgram => {","sourceCodeStart":289,"sourceCodeEnd":325,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/effects/src/lines.ts#L289-L325","documentation":"A plain Error thrown inside compileShader in the Lines effect when gl.createShader(type) returns null. The WebGL2 spec allows createShader to return null under severe resource exhaustion or after context loss, so the Lines effect aborts rather than dereferencing a null shader.","triggerScenarios":"The WebGL2 context exists (passed the earlier createWebGL2ContextError check) but cannot allocate a new shader object. Typical when the GPU context was lost, GPU memory is exhausted, too many contexts are alive, or running in a constrained/headless browser with broken WebGL drivers.","commonSituations":"Headless Chrome without proper GPU flags (swiftshader/software rendering misconfigured), many simultaneous Remotion renders on one machine, a page that leaked WebGL contexts, or a transient context-loss event during render.","solutions":["Reduce the number of concurrent renders / parallel browser contexts using the Lines effect.","Ensure the rendering environment has working WebGL2 (verify with a getContext('webgl2') smoke test).","For headless Chrome, pass --use-gl=angle or --enable-unsafe-swiftshader as appropriate and ensure enough GPU memory.","Listen for webglcontextlost on the canvas and re-instantiate the effect after webglcontextrestored."],"exampleFix":null,"handlingStrategy":"try-catch","validationCode":"function webgl2Ready(): boolean {\n  const c = document.createElement('canvas');\n  const gl = c.getContext('webgl2');\n  const ok = !!gl && !!gl.createShader(gl.VERTEX_SHADER);\n  gl?.getExtension?.('WEBGL_lose_context')?.loseContext?.();\n  return ok;\n}","typeGuard":null,"tryCatchPattern":"try {\n  lines(...);\n} catch (err) {\n  if (err instanceof Error && /WebGL shader/.test(err.message)) {\n    // fall back to a non-WebGL effect or surface a 'GPU unavailable' state\n  } else throw err;\n}","preventionTips":["Smoke-test gl.createShader in the target browser before rendering.","Cap concurrent render/browser-context count to keep GPU objects available.","For headless Chrome, use a GL backend known to work (ANGLE / swiftshader) with adequate memory."],"tags":["webgl2","lines-effect","gpu","resource-exhaustion","headless"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}