remotion-dev/remotion · error · Error

Failed to create WebGL program

Error message

Failed to create WebGL program

What it means

Thrown by linkProgram in the color key effect when gl.createProgram() returns null after both shaders compiled. The GL context cannot allocate a program object, signaling resource exhaustion or context loss. The color key effect cannot link a program, so setup fails.

Source

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

	gl.shaderSource(shader, source);
	gl.compileShader(shader);
	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
		const log = gl.getShaderInfoLog(shader);
		gl.deleteShader(shader);
		throw new Error(`Color key shader compile failed: ${log ?? '(no log)'}`);
	}

	return shader;
};

const linkProgram = (
	gl: WebGL2RenderingContext,
	vs: WebGLShader,
	fs: WebGLShader,
): WebGLProgram => {
	const program = gl.createProgram();
	if (!program) {
		throw new Error('Failed to create WebGL program');
	}

	gl.attachShader(program, vs);
	gl.attachShader(program, fs);
	gl.linkProgram(program);
	if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
		const log = gl.getProgramInfoLog(program);
		gl.deleteProgram(program);
		throw new Error(`Color key program link failed: ${log ?? '(no log)'}`);
	}

	return program;
};

const createProgram = (
	gl: WebGL2RenderingContext,
	vertexSource: string,
	fragmentSource: string,

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Reduce render concurrency so fewer GL program objects are live.
2. Render with GPU acceleration instead of software GL.
3. Update drivers/Chrome and retry for transient context loss.
4. Reduce the number of WebGL effects active in one pass.

Example fix

// before
remotion render main --concurrency=8

// after
remotion render main --concurrency=1

function webgl2ProgramAvailable(): boolean {
  try {
    const c = document.createElement('canvas');
    const gl = c.getContext('webgl2');
    if (!gl) return false;
    const p = gl.createProgram();
    const ok = p !== null;
    if (p) gl.deleteProgram(p);
    return ok;
  } catch {
    return false;
  }
}

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

When it happens

Trigger: At color-key.ts:213 inside linkProgram after COLOR_KEY_VS and COLOR_KEY_FS compiled successfully, but gl.createProgram() yields null. Caused by GL object-limit exhaustion or a lost context; independent of colorKey() parameters.

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

Related errors

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

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