{"record":{"id":"b3b8445291e11608","repo":"remotion-dev/remotion","slug":"failed-to-create-framebuffer","errorCode":null,"errorMessage":"Failed to create framebuffer","messagePattern":"Failed to create framebuffer","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/transitions/src/presentations/blur-slide.tsx","lineNumber":224,"sourceCode":"};\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,\n\t\tintermediateTex,\n\t\t0,\n\t);\n\tgl.bindFramebuffer(gl.FRAMEBUFFER, null);\n\n\tlet intermediateWidth = 1;\n\tlet intermediateHeight = 1;\n\n\tconst vao = gl.createVertexArray();\n\tgl.bindVertexArray(vao);\n\tconst buffer = gl.createBuffer();","sourceCodeStart":206,"sourceCodeEnd":242,"githubUrl":"https://github.com/remotion-dev/remotion/blob/b2f4e34732f3c6c222ea029413e22dc402218cd7/packages/transitions/src/presentations/blur-slide.tsx#L206-L242","documentation":"Thrown when gl.createFramebuffer() returns null during blurSlideShader setup. The transition needs an offscreen framebuffer to hold the intermediate blur result; failing to allocate it indicates exhausted GPU resources or a lost context.","triggerScenarios":"blurSlideShader() reaches framebuffer allocation after creating two programs and three textures; allocation fails because GPU memory/objects are exhausted or the context was lost mid-setup.","commonSituations":"Rendering many canvas transitions simultaneously; low-VRAM devices or VMs; browsers enforcing per-context object limits.","solutions":["Free other WebGL framebuffers/textures and lower the number of live transitions","Recreate the canvas (fresh context) and retry","Verify hardware acceleration and a healthy GPU driver","Catch the error and fall back to a non-WebGL presentation"],"exampleFix":"// before\nconst framebuffer = gl.createFramebuffer();\nif (!framebuffer) { throw ... }\n// after\nif (gl.isContextLost()) { recreateCanvas(); }\nconst framebuffer = gl.createFramebuffer();","handlingStrategy":"try-catch","validationCode":"null","typeGuard":null,"tryCatchPattern":"try {\n  const slide = blurSlide(props);\n} catch (err) {\n  if (String(err).includes('Failed to create framebuffer')) {\n    // free GPU resources / recreate context, then fallback\n  }\n}","preventionTips":["Delete framebuffers on unmount of canvas transitions","Limit concurrent WebGL transitions","Recreate the canvas after context loss","Test on low-VRAM devices"],"tags":["webgl","gpu","framebuffer"],"backgroundTag":"module-init-failed","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"}