remotion-dev/remotion · error · Error

Failed to create WebGL buffer

Error message

Failed to create WebGL buffer

What it means

Thrown by setupColorKey when gl.createBuffer() returns null after the VAO was created and bound. The GL context cannot allocate a vertex buffer object, indicating resource/memory exhaustion or context loss. Without the VBO the fullscreen-quad vertex data cannot be uploaded, so setup aborts.

Source

Thrown at packages/effects/src/color-key.ts:283

	gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);

	const program = createProgram(gl, COLOR_KEY_VS, COLOR_KEY_FS);

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

	gl.bindVertexArray(vao);

	const data = new Float32Array([
		-1, -1, 0, 0, 1, -1, 1, 0, -1, 1, 0, 1, 1, 1, 1, 1,
	]);

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

	gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
	gl.bufferData(gl.ARRAY_BUFFER, data, 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);

	const textureSource = createRgbaTexture(gl);

	const colorCanvas = document.createElement('canvas');
	colorCanvas.width = 1;

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Reduce render concurrency so fewer GL buffers are live.
2. Use a GPU-enabled render environment instead of software GL.
3. Update drivers/Chrome and retry for transient context loss.
4. Fewer stacked WebGL effects per render lowers buffer allocation.

Example fix

// before
remotion render main --concurrency=8

// after
remotion render main --concurrency=1

function webgl2BufferAvailable(): boolean {
  try {
    const c = document.createElement('canvas');
    const gl = c.getContext('webgl2');
    if (!gl) return false;
    const b = gl.createBuffer();
    const ok = b !== null;
    if (b) gl.deleteBuffer(b);
    return ok;
  } catch {
    return false;
  }
}

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

When it happens

Trigger: At color-key.ts:283 inside setupColorKey, after the VAO is created and bound. gl.createBuffer() returns null under GL object/memory pressure or a lost context; not parameter-driven.

Common situations: High render concurrency, software GL with low buffer limits, GPU memory pressure, or context loss during a long render.

Related errors

• Failed to create color correction vertex buffer
• Failed to create WebGL shader
• Failed to create WebGL program
• 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/bd488146426cbec1. Report an issue: GitHub.