{"record":{"id":"63a9d23a52f0bae5","repo":"remotion-dev/remotion","slug":"failed-to-create-webgl-shader-63a9d2","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/color-key.ts","lineNumber":192,"sourceCode":"}\n\nvec3 cleanRgb = uSpillSuppression > 0.0\n? suppressSpill(rgb, uKeyColor, uSpillSuppression)\n: rgb;\n\nfloat keyedAlpha = alpha * keepMask;\nfragColor = vec4(cleanRgb * keyedAlpha, keyedAlpha);\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(`Color key 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":174,"sourceCodeEnd":210,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/effects/src/color-key.ts#L174-L210","documentation":"Thrown by compileShader in the color key effect when gl.createShader() returns null. The GL2 context exists but cannot allocate a shader object, indicating resource exhaustion or context loss. The color key effect cannot compile its shaders, so setup fails.","triggerScenarios":"Reached during createProgram() inside setupColorKey at color-key.ts:191 when gl.createShader() yields null for either the COLOR_KEY_VS or COLOR_KEY_FS. Caused by GL object/memory pressure or a lost context, not by colorKey() parameters.","commonSituations":"Many concurrent WebGL2 contexts in headless Chrome, software GL (SwiftShader) with low shader limits, GPU memory pressure, or a render that lost its context.","solutions":["Lower render concurrency to reduce simultaneous GL shader objects.","Render with GPU acceleration rather than software GL.","Update GPU drivers and Chrome; retry if context loss was transient.","Fewer WebGL effects active per frame reduces shader allocation."],"exampleFix":"// before\nremotion render main --concurrency=8\n\n// after\nremotion render main --concurrency=1","handlingStrategy":"retry","validationCode":"function webgl2ShaderAvailable(): boolean {\n  try {\n    const c = document.createElement('canvas');\n    const gl = c.getContext('webgl2');\n    if (!gl) return false;\n    const s = gl.createShader(gl.VERTEX_SHADER);\n    const ok = s !== null;\n    if (s) gl.deleteShader(s);\n    return ok;\n  } catch {\n    return false;\n  }\n}","typeGuard":null,"tryCatchPattern":"try {\n  await renderMedia({...});\n} catch (err) {\n  if (/Failed to create WebGL shader/i.test(String(err))) {\n    await renderMedia({...opts, concurrency: 1});\n  } else {\n    throw err;\n  }\n}","preventionTips":["Limit render concurrency so fewer GL shader objects are live.","Use GPU-accelerated render environments rather than software GL.","Keep GPU drivers and Chromium current.","Stack fewer WebGL effects per frame."],"tags":["webgl","gpu-resource-exhaustion","color-key","shader","rendering","environment"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}