remotion-dev/remotion · error · Error

Failed to create color correction vertex array

Error message

Failed to create color correction vertex array

What it means

Thrown by setupColorCorrection when gl.createVertexArray() returns null after the program was built. A null VAO means the GL context cannot allocate a vertex-array object, pointing to resource exhaustion or context loss. The effect cannot bind vertex attributes without it, so setup fails.

Source

Thrown at packages/effects/src/color-correction.ts:384

const setupColorCorrection = (
	target: HTMLCanvasElement,
): ColorCorrectionState => {
	const gl = target.getContext('webgl2', {
		premultipliedAlpha: true,
		alpha: true,
		preserveDrawingBuffer: true,
	});
	if (!gl) {
		throw createWebGL2ContextError('color correction 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 color correction vertex array');
	}

	const vbo = gl.createBuffer();
	if (!vbo) {
		throw new Error('Failed to create color correction 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);

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Lower render concurrency to shrink the number of live VAOs/contexts.
2. Render on a GPU-accelerated environment rather than software GL.
3. Update GPU drivers and Chrome; retry if context loss was transient.
4. Reduce the number of WebGL effects rendered in parallel.

Example fix

// before
remotion render main --concurrency=8

// after
remotion render main --concurrency=1

function webgl2VaoAvailable(): boolean {
  try {
    const c = document.createElement('canvas');
    const gl = c.getContext('webgl2');
    if (!gl) return false;
    const v = gl.createVertexArray();
    const ok = v !== null;
    if (v) gl.deleteVertexArray(v);
    return ok;
  } catch {
    return false;
  }
}

try {
  await renderMedia({...});
} catch (err) {
  if (/Failed to create color correction vertex array/i.test(String(err))) {
    await renderMedia({...opts, concurrency: 1});
  } else {
    throw err;
  }
}

When it happens

Trigger: At color-correction.ts:384 inside setupColorCorrection, before VBO creation. Triggered when gl.createVertexArray() yields null under GL object-limit/memory pressure or after context loss; independent of colorCorrection() parameters.

Common situations: Many concurrent WebGL2 contexts each holding VAOs, software GL (SwiftShader) with low VAO limits, GPU memory pressure, or a long render that lost its context.

Related errors

• Failed to create color correction shader
• Failed to create color correction shader program
• Failed to create color correction texture
• Failed to create color correction vertex buffer
• Failed to create WebGL vertex array

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