remotion-dev/remotion · error · Error

Failed to create framebuffer

Error message

Failed to create framebuffer

What it means

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.

Source

Thrown at packages/transitions/src/presentations/blur-slide.tsx:224

};

export const blurSlideShader = (
	canvas: OffscreenCanvas,
): ReturnType<HtmlInCanvasShader<BlurSlideProps>> => {
	const gl = canvas.getContext('webgl2', {premultipliedAlpha: true});
	if (!gl) {
		throw new Error('Failed to create WebGL2 context');
	}

	const slideProgram = createProgram(gl, SLIDE_FRAGMENT_SHADER);
	const blurProgram = createProgram(gl, BLUR_FRAGMENT_SHADER);
	const prevTex = createTexture(gl);
	const nextTex = createTexture(gl);
	const intermediateTex = createTexture(gl);

	const framebuffer = gl.createFramebuffer();
	if (!framebuffer) {
		throw new Error('Failed to create framebuffer');
	}

	gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
	gl.framebufferTexture2D(
		gl.FRAMEBUFFER,
		gl.COLOR_ATTACHMENT0,
		gl.TEXTURE_2D,
		intermediateTex,
		0,
	);
	gl.bindFramebuffer(gl.FRAMEBUFFER, null);

	let intermediateWidth = 1;
	let intermediateHeight = 1;

	const vao = gl.createVertexArray();
	gl.bindVertexArray(vao);
	const buffer = gl.createBuffer();

View on GitHub (pinned to b2f4e34732)

Solutions

1. Free other WebGL framebuffers/textures and lower the number of live transitions
2. Recreate the canvas (fresh context) and retry
3. Verify hardware acceleration and a healthy GPU driver
4. Catch the error and fall back to a non-WebGL presentation

Example fix

// before
const framebuffer = gl.createFramebuffer();
if (!framebuffer) { throw ... }
// after
if (gl.isContextLost()) { recreateCanvas(); }
const framebuffer = gl.createFramebuffer();

null

try {
  const slide = blurSlide(props);
} catch (err) {
  if (String(err).includes('Failed to create framebuffer')) {
    // free GPU resources / recreate context, then fallback
  }
}

When it happens

Trigger: 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.

Common situations: Rendering many canvas transitions simultaneously; low-VRAM devices or VMs; browsers enforcing per-context object limits.

Related errors

• Failed to create WebGL framebuffer
• Glow framebuffer incomplete: 0x${status.toString(16)}
• Failed to create WebGL framebuffer
• Linear progressive blur framebuffer incomplete: 0x${status.t
• Failed to create WebGL framebuffer

AI-assisted analysis of remotion-dev/remotion@b2f4e34732 (2026-09-09). Data as JSON: /api/errors/b3b8445291e11608. Report an issue: GitHub.