remotion-dev/remotion · error · Error

Failed to create WebGL framebuffer

Error message

Failed to create WebGL framebuffer

What it means

Thrown by setupDropShadow when gl.createFramebuffer() returns null. A null framebuffer indicates a lost or resource-exhausted WebGL2 context. The drop-shadow runtime uses offscreen framebuffers for the extract and two blur passes, so the allocation must succeed before any rendering.

Source

Thrown at packages/effects/src/drop-shadow/drop-shadow-runtime.ts:196

	}

	gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
	gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);

	gl.enableVertexAttribArray(0);
	gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 16, 0);
	gl.enableVertexAttribArray(1);
	gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 16, 8);

	gl.bindVertexArray(null);

	const textureSource = createRgbaTexture(gl);
	const textureShadowA = createRgbaTexture(gl);
	const textureShadowB = createRgbaTexture(gl);

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

	const colorCanvas = document.createElement('canvas');
	colorCanvas.width = 1;
	colorCanvas.height = 1;
	const colorCtx = colorCanvas.getContext('2d', {willReadFrequently: true});
	if (!colorCtx) {
		throw new Error('Failed to acquire 2D context for color parsing');
	}

	return {
		gl,
		programExtract,
		programHorizontal,
		programVertical,
		programComposite,
		vao,
		vbo,

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Confirm cleanupDropShadow runs (gl.deleteFramebuffer on unmount).
2. Reduce simultaneous drop-shadow effects or composition resolution.
3. Reload to free leaked framebuffers; update GPU drivers.
4. For headless/CI, use SwiftShader with sufficient memory and limit concurrency.

const supportsWebGL2 = () => {
  try {
    return !!document.createElement('canvas').getContext('webgl2');
  } catch {
    return false;
  }
};

try {
  state = setupDropShadow(canvas);
} catch (err) {
  if (err instanceof Error && /WebGL framebuffer/i.test(err.message)) {
    console.error('Drop-shadow framebuffer allocation failed:', err.message);
    // fall back to a CSS box-shadow layer
  } else {
    throw err;
  }
}

When it happens

Trigger: Lost WebGL2 context, exhausted framebuffer object limit, or GPU memory pressure. Reached inside setupDropShadow() after textures are allocated, when the render-target framebuffer is created.

Common situations: Framebuffer leaks from effects whose cleanup was skipped; many simultaneous drop-shadow effects; GPU driver crash; headless rendering under memory pressure; VMs with passthrough GL.

Related errors

• Failed to create WebGL texture
• Failed to create WebGL texture
• Failed to create WebGL shader
• Failed to create WebGL program
• Failed to create WebGL vertex array

AI-assisted analysis of remotion-dev/remotion@78fe4bb3fd (2026-08-12). Data as JSON: /api/errors/aecc8f95dcd1c78e. Report an issue: GitHub.