{"record":{"id":"92e2767b8aa7c99b","repo":"remotion-dev/remotion","slug":"failed-to-create-webgl2-context","errorCode":null,"errorMessage":"Failed to create WebGL2 context","messagePattern":"Failed to create WebGL2 context","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"critical","filePath":"packages/transitions/src/presentations/blur-slide.tsx","lineNumber":213,"sourceCode":"\tif (typeof blur !== 'number' || !Number.isFinite(blur)) {\n\t\tthrow new TypeError(\n\t\t\t`blur passed to blurSlide() must be a finite number, received ${blur}`,\n\t\t);\n\t}\n\n\tif (blur < 0) {\n\t\tthrow new TypeError(\n\t\t\t`blur passed to blurSlide() must be greater than or equal to 0, received ${blur}`,\n\t\t);\n\t}\n};\n\nexport const blurSlideShader = (\n\tcanvas: OffscreenCanvas,\n): ReturnType<HtmlInCanvasShader<BlurSlideProps>> => {\n\tconst gl = canvas.getContext('webgl2', {premultipliedAlpha: true});\n\tif (!gl) {\n\t\tthrow new Error('Failed to create WebGL2 context');\n\t}\n\n\tconst slideProgram = createProgram(gl, SLIDE_FRAGMENT_SHADER);\n\tconst blurProgram = createProgram(gl, BLUR_FRAGMENT_SHADER);\n\tconst prevTex = createTexture(gl);\n\tconst nextTex = createTexture(gl);\n\tconst intermediateTex = createTexture(gl);\n\n\tconst framebuffer = gl.createFramebuffer();\n\tif (!framebuffer) {\n\t\tthrow new Error('Failed to create framebuffer');\n\t}\n\n\tgl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);\n\tgl.framebufferTexture2D(\n\t\tgl.FRAMEBUFFER,\n\t\tgl.COLOR_ATTACHMENT0,\n\t\tgl.TEXTURE_2D,","sourceCodeStart":195,"sourceCodeEnd":231,"githubUrl":"https://github.com/remotion-dev/remotion/blob/b2f4e34732f3c6c222ea029413e22dc402218cd7/packages/transitions/src/presentations/blur-slide.tsx#L195-L231","documentation":"blurSlideShader throws when canvas.getContext('webgl2', {premultipliedAlpha: true}) returns null, meaning WebGL2 is unavailable in the current environment. No shader transition can run without a WebGL2 context.","triggerScenarios":"Calling blurSlide()/blurSlideShader in a browser without WebGL2 support, with hardware acceleration disabled (chrome://settings GPU), on a headless environment without GPU/swiftshader, or after the context was lost.","commonSituations":"Older browsers or Safari versions lacking WebGL2; CI/headless Chrome without SwiftShader; corporate machines with GPU acceleration blocked; renders where --gl=angle flag is needed in Lambda.","solutions":["Enable hardware acceleration in the browser / update to a WebGL2-capable browser","In headless/Lambda renders, pass the appropriate --gl flag (e.g. --gl=angle or swiftshader)","Update GPU drivers and verify WebGL2 at webglreport.com","Catch the error and use a CSS/DOM-based presentation fallback"],"exampleFix":"// before\nblurSlide() // throws if no webgl2\n// after\ntry {\n  return blurSlide(props);\n} catch (e) {\n  return fade(props); // DOM-based fallback\n}","handlingStrategy":"fallback","validationCode":"function webgl2Available(): boolean {\n  const c = document.createElement('canvas');\n  return c.getContext('webgl2') !== null;\n}","typeGuard":"function supportsWebGL2(c: OffscreenCanvas): boolean {\n  return c.getContext('webgl2') !== null;\n}","tryCatchPattern":"let presentation;\ntry {\n  presentation = blurSlide(props);\n} catch (err) {\n  if (String(err).includes('Failed to create WebGL2 context')) {\n    presentation = fade(props); // non-WebGL fallback\n  }\n}","preventionTips":["Feature-detect WebGL2 before choosing a shader presentation","Enable hardware acceleration / update browsers on target machines","Use correct --gl flags in headless and Lambda renders","Keep a DOM/CSS-based presentation as a fallback"],"tags":["webgl","environment","browser-compatibility"],"backgroundTag":"unsupported-platform","analyzedSha":"b2f4e34732f3c6c222ea029413e22dc402218cd7","analyzedAt":"2026-09-09T13:27:51.281Z","contentChangedAt":"2026-09-09T13:27:51.281Z","schemaVersion":2},"datasetVersion":"2026-09-14T00:17:10.932Z"}