{"record":{"id":"9a93d789ef6cd6bc","repo":"remotion-dev/remotion","slug":"failed-to-create-webgl-shader-9a93d7","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/linear-gradient-tint.ts","lineNumber":211,"sourceCode":"\t}\n\n\tvec2 publicUv = vec2(vUv.x, 1.0 - vUv.y);\n\tvec4 tintColor = mix(uStartColor, uEndColor, gradientProgress(publicUv));\n\tvec3 sourceRgb = texColor.rgb / alpha;\n\tvec3 blended = mix(sourceRgb, tintColor.rgb, uAmount * tintColor.a);\n\n\tfragColor = vec4(blended * alpha, alpha);\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(\n\t\t\t`Linear gradient tint shader compile failed: ${log ?? '(no log)'}`,\n\t\t);\n\t}\n\n\treturn shader;\n};\n\nconst createProgram = (gl: WebGL2RenderingContext): WebGLProgram => {\n\tconst vs = compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER);\n\tconst fs = compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);","sourceCodeStart":193,"sourceCodeEnd":229,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/effects/src/linear-gradient-tint.ts#L193-L229","documentation":"Thrown from linearGradientTint's WebGL2 setup when `gl.createShader(type)` returns null. Identical mechanism to other effects: the spec only returns null on context loss, OUT_OF_MEMORY, or handle exhaustion — the shader source has not been supplied yet.","triggerScenarios":"Allocating many WebGL effects until shader-handle exhaustion; setup on a lost context; headless/Chromium-for-Testing refusing object creation under memory pressure.","commonSituations":"Stacking many effects per frame on Lambda; `--disable-gpu` headless runs; context loss mid-setup; leaking setups without cleanup.","solutions":["Cache the setup keyed by params and always call the matching cleanup.","Handle `webglcontextlost` and rebuild on restore.","Reduce concurrently active WebGL effects per canvas.","Use GPU-enabled render workers and avoid disabling GPU in headless Chrome."],"exampleFix":null,"handlingStrategy":"fallback","validationCode":"const webgl2Available = (canvas: HTMLCanvasElement): boolean => {\n  try { return !!canvas.getContext('webgl2'); } catch { return false; }\n};","typeGuard":"const supportsWebGL2 = (): boolean => {\n  try { return !!document.createElement('canvas').getContext('webgl2'); } catch { return false; }\n};","tryCatchPattern":"let state = null;\ntry { state = setupLinearGradientTint(canvas); } catch (err) {\n  console.error('linearGradientTint unavailable', err);\n}","preventionTips":["Cache and reuse setup; pair with cleanup.","Handle webglcontextlost; rebuild on restore.","Use GPU-enabled workers; avoid --disable-gpu."],"tags":["webgl","linear-gradient-tint","effects","gpu","resource-exhaustion"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}