{"record":{"id":"d8c25695b40832cd","repo":"remotion-dev/remotion","slug":"failed-to-create-webgl-shader-d8c256","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/outline.ts","lineNumber":229,"sourceCode":"\t\t) * uColor.a * uOpacity;\n\t\tfragColor = vec4(uColor.rgb * filledAlpha, filledAlpha);\n\t\treturn;\n\t}\n\n\tfloat outlineAlpha = outlineMaskAlpha * uColor.a * uOpacity * (1.0 - source.a);\n\tvec3 outlineRgb = uColor.rgb * outlineAlpha;\n\tfragColor = vec4(source.rgb + outlineRgb, source.a + outlineAlpha);\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(`Outline shader compile failed: ${log ?? '(no log)'}`);\n\t}\n\n\treturn shader;\n};\n\nconst createProgram = (gl: WebGL2RenderingContext): WebGLProgram => {\n\tconst vertexShader = compileShader(gl, gl.VERTEX_SHADER, OUTLINE_VS);\n\tconst fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, OUTLINE_FS);\n\tconst program = gl.createProgram();\n\tif (!program) {","sourceCodeStart":211,"sourceCodeEnd":247,"githubUrl":"https://github.com/remotion-dev/remotion/blob/10db9de07356446fb0edb3c3ae211369b693d18b/packages/effects/src/outline.ts#L211-L247","documentation":"The outline() effect of @remotion/effects sets up a WebGL2 pipeline on the render target. compileShader() calls gl.createShader(), which the WebGL spec allows to return null only when the context is lost or invalid - so this error means the WebGL2 context acquired moments earlier is no longer usable. createShader is the first GL object allocation in the outline setup, so it is typically the first call to fail after a context loss.","triggerScenarios":"Applying the outline() effect when the WebGL2 context is lost or exhausted: GPU driver reset, too many live WebGL contexts in one Chrome instance (high --concurrency rendering many effect-heavy frames), or memory pressure during a long render.","commonSituations":"Rendering on headless Chrome with GPU/SwiftShader instability; rendering many pages in parallel each using outline() so the browser hits its per-profile WebGL context cap; machines with outdated or crashed GPU drivers; long Lambda renders under memory pressure.","solutions":["Re-run the render or reload Remotion Studio - a transient context loss usually clears on a fresh page","Lower render concurrency (e.g. --concurrency=2 in the CLI or concurrency option in renderMediaOnLambda) so fewer WebGL contexts are alive at once","Update Chrome/Chromium and GPU drivers, or run the renderer on a machine/driver combination where WebGL2 is stable","If it reproduces deterministically on one frame, file an @remotion/effects issue with the Chrome version and the composition"],"exampleFix":null,"handlingStrategy":"retry","validationCode":"// Before a render that relies on WebGL2 effects, verify a context can be created\nconst webgl2Available = (): boolean => {\n  try {\n    const canvas = document.createElement('canvas');\n    const gl = canvas.getContext('webgl2');\n    return gl !== null;\n  } catch {\n    return false;\n  }\n};","typeGuard":null,"tryCatchPattern":"// Retry once: context loss is usually transient\ntry {\n  await renderMediaOnLambda(/* ... */); // or renderMedia in @remotion/renderer\n} catch (err) {\n  if (err instanceof Error && err.message.includes('Failed to create WebGL shader')) {\n    await renderMediaOnLambda(/* ... same args */);\n  } else {\n    throw err;\n  }\n}","preventionTips":["Keep render concurrency modest when using WebGL-backed effects like outline()","Update Chrome/Chromium and GPU drivers on render hosts","Prefer fewer, larger effect surfaces over many simultaneous outlined elements"],"tags":["remotion","effects","webgl","webgl2","context-lost","outline","gpu"],"backgroundTag":"webgl-context-lost","analyzedSha":"10db9de07356446fb0edb3c3ae211369b693d18b","analyzedAt":"2026-08-22T21:45:17.748Z","contentChangedAt":"2026-08-22T21:45:17.748Z","schemaVersion":2},"datasetVersion":"2026-09-14T05:17:10.506Z"}