{"record":{"id":"c6d9d602409dbc2c","repo":"remotion-dev/remotion","slug":"failed-to-create-webgl-program-c6d9d6","errorCode":null,"errorMessage":"Failed to create WebGL program","messagePattern":"Failed to create WebGL program","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/effects/src/zigzag.ts","lineNumber":370,"sourceCode":"\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(`Zigzag 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 => {\n\tconst program = gl.createProgram();\n\tif (!program) {\n\t\tthrow new Error('Failed to create WebGL program');\n\t}\n\n\tgl.attachShader(program, vs);\n\tgl.attachShader(program, fs);\n\tgl.linkProgram(program);\n\tif (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n\t\tconst log = gl.getProgramInfoLog(program);\n\t\tgl.deleteProgram(program);\n\t\tthrow new Error(`Zigzag program link failed: ${log ?? '(no log)'}`);\n\t}\n\n\treturn program;\n};\n\nconst createProgram = (\n\tgl: WebGL2RenderingContext,\n\tvertexSource: string,\n\tfragmentSource: string,","sourceCodeStart":352,"sourceCodeEnd":388,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/effects/src/zigzag.ts#L352-L388","documentation":"Zigzag links its compiled shaders into a program via gl.createProgram; a null return means the GL context would not allocate the program object, so the effect throws before linking. Both shaders already compiled, so this is a context/resource allocation failure (lost context, program-object limit, software renderer), independent of parameters.","triggerScenarios":"linkProgram in zigzag.ts: gl.createProgram() returns null after the vertex and fragment shaders compiled successfully.","commonSituations":"Context lost between compile and program create; too many programs alive across many concurrent effects; headless renderer with incomplete WebGL2 program allocation; GPU memory pressure.","solutions":["Verify WebGL2 context health (non-null getContext('webgl2'), isContextLost() false) before rendering.","Use Remotion's bundled Chrome for headless rendering; avoid disabling the software GPU.","Reduce simultaneously-active WebGL effects to free program-object slots.","Recreate the composition on webglcontextlost so setup re-runs cleanly.","Update GPU drivers or move to a host with a fully conformant WebGL2 implementation."],"exampleFix":null,"handlingStrategy":"try-catch","validationCode":"const gl = document.createElement('canvas').getContext('webgl2');\nconst webglOk = gl != null && gl.createProgram() != null && !gl.isContextLost();","typeGuard":"const canCreateProgram = (): boolean => {\n  const gl = document.createElement('canvas').getContext('webgl2');\n  return gl != null && !gl.isContextLost() && gl.createProgram() != null;\n};","tryCatchPattern":"try {\n  return <VideoEffects effects={[zigzag({colors: ['#ff0000', '#00ff00']})]} />;\n} catch (err) {\n  if (err instanceof Error && err.message === 'Failed to create WebGL program') {\n    return <Video />;\n  }\n  throw err;\n}","preventionTips":["Probe program-object allocation before mounting zigzag().","Render with Remotion's bundled Chromium; avoid disabling the GPU.","Reduce concurrent WebGL effects to free program slots.","Re-mount on webglcontextlost."],"tags":["webgl","gpu","shader","rendering","context-loss"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}