remotion-dev/remotion · error · Error

Failed to create white balance vertex buffer

Error message

Failed to create white balance vertex buffer

What it means

White balance setup creates a vertex buffer (gl.createBuffer) to upload the fullscreen-quad vertices that the shader draws. A null return from gl.createBuffer means the GL context refused to allocate another buffer object, and the effect aborts because it has no geometry to draw. This is a resource/context failure, independent of any effect parameter.

Source

Thrown at packages/effects/src/white-balance.ts:202

		premultipliedAlpha: true,
		alpha: true,
		preserveDrawingBuffer: true,
	});
	if (!gl) {
		throw createWebGL2ContextError('white balance effect');
	}

	gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);

	const program = createProgram(gl);
	const vao = gl.createVertexArray();
	if (!vao) {
		throw new Error('Failed to create white balance vertex array');
	}

	const vbo = gl.createBuffer();
	if (!vbo) {
		throw new Error('Failed to create white balance vertex buffer');
	}

	gl.bindVertexArray(vao);
	gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
	gl.bufferData(
		gl.ARRAY_BUFFER,
		new Float32Array([-1, -1, 0, 0, 1, -1, 1, 0, -1, 1, 0, 1, 1, 1, 1, 1]),
		gl.STATIC_DRAW,
	);

	const aPos = gl.getAttribLocation(program, 'aPos');
	const aUv = gl.getAttribLocation(program, 'aUv');
	gl.enableVertexAttribArray(aPos);
	gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
	gl.enableVertexAttribArray(aUv);
	gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);
	gl.bindVertexArray(null);

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Ensure the render browser has a working WebGL2 context that is not lost (probe getContext('webgl2') and isContextLost()).
2. Render with Remotion's bundled Chromium (Lambda/CLI) which enables the software GPU path correctly, instead of a system browser with GPU disabled.
3. Decrease concurrent WebGL contexts by rendering effects in fewer parallel compositions.
4. Recover from webglcontextlost by unmounting and re-mounting the composition so setup reinitializes.
5. Update or replace GPU drivers / backend where allocation fails.

const gl = document.createElement('canvas').getContext('webgl2');
const webglOk = gl != null && gl.createBuffer() != null && !gl.isContextLost();

const canAllocateBuffer = (): boolean => {
  const gl = document.createElement('canvas').getContext('webgl2');
  return gl != null && !gl.isContextLost() && gl.createBuffer() != null;
};

try {
  return <VideoEffects effects={[whiteBalance({temperature: 0.1})]} />;
} catch (err) {
  if (err instanceof Error && /white balance vertex buffer/.test(err.message)) {
    return <Video />;
  }
  throw err;
}

When it happens

Trigger: First-frame setup of whiteBalance() when gl.createBuffer() returns null — context lost, buffer-object limit reached, or software-renderer WebGL2 with degraded allocation.

Common situations: Headless render farms without working GPU acceleration; long-running Studio sessions that leaked GL objects; multiple effects each opening their own context on a single page; VM/Remote-Desktop GPU forwarding that drops buffer allocation.

Related errors

• Failed to create white balance texture
• Failed to create white balance vertex array
• Failed to create WebGL resources
• Failed to create WebGL texture
• Failed to create WebGL vertex array

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