{"record":{"id":"cb3ac86d1a570952","repo":"remotion-dev/remotion","slug":"failed-to-create-webgl-shader-cb3ac8","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/vignette.ts","lineNumber":269,"sourceCode":"\t\tfragColor = vec4(texColor.rgb * (1.0 - mask), outputAlpha);\n\t\treturn;\n\t}\n\n\tfloat overlayAlpha = mask * uColor.a;\n\tvec3 outputRgb = uColor.rgb * overlayAlpha + texColor.rgb * (1.0 - overlayAlpha);\n\tfloat outputAlpha = overlayAlpha + alpha * (1.0 - overlayAlpha);\n\tfragColor = vec4(outputRgb, outputAlpha);\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(`Vignette 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":251,"sourceCodeEnd":287,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/effects/src/vignette.ts#L251-L287","documentation":"Thrown by vignette's compileShader when gl.createShader() returns null. A null shader means WebGL refused to allocate the shader object, which indicates context loss or the GL implementation's object limit. Vignette cannot compile its internal shaders without it.","triggerScenarios":"createProgram calls compileShader for the internal VERTEX_SHADER/FRAGMENT_SHADER; gl.createShader(type) returns null because the context is lost (isContextLost()) or too many shader objects are live.","commonSituations":"Context loss under many concurrent vignette/other WebGL effects; GPU/driver refusing further shader objects; headless Chrome on a constrained runner.","solutions":["Reload to reset the WebGL2 context.","Reduce the number of WebGL effects applied at once.","Verify hardware-accelerated WebGL2 and update drivers.","Ensure offscreen effects are disposed so shader objects are freed."],"exampleFix":"// before\nconst effect = vignette({amount: 0.6}); // compileShader may throw\n\n// after\nconst effect = (() => {\n  try { return vignette({amount: 0.6}); } catch { return null; }\n})();","handlingStrategy":"try-catch","validationCode":null,"typeGuard":null,"tryCatchPattern":"let effect = null;\ntry {\n  effect = vignette({amount: 0.6});\n} catch (err) {\n  console.warn('vignette shader alloc failed, skipping effect', err);\n}","preventionTips":["Reduce concurrent WebGL effects to stay under driver shader-object limits.","Handle context loss/restore and rebuild effects afterwards.","Free offscreen effects so shader objects are released.","Use hardware-accelerated WebGL2."],"tags":["webgl2","shader","gpu-memory","context-loss","vignette"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}