remotion-dev/remotion · error · Error

Failed to create color correction shader

Error message

Failed to create color correction shader

What it means

Thrown by compileShader in the color correction effect when gl.createShader() returns null. The GL context exists but cannot allocate a new shader object, indicating resource exhaustion or context loss. The effect cannot build its vertex/fragment shaders, so setup fails before any drawing.

Source

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

	color = clamp(
		vec3(luminance) + (color - vec3(luminance)) * uSaturation,
		0.0,
		1.0
	);
	color = applyVibrance(color, uVibrance);

	fragColor = vec4(color * alpha, alpha);
}
`;

const compileShader = (
	gl: WebGL2RenderingContext,
	type: number,
	source: string,
): WebGLShader => {
	const shader = gl.createShader(type);
	if (!shader) {
		throw new Error('Failed to create color correction shader');
	}

	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 correction shader compile failed: ${log ?? '(no log)'}`,
		);
	}

	return shader;
};

const createProgram = (gl: WebGL2RenderingContext): WebGLProgram => {
	const vertexShader = compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
	const fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Reduce render concurrency so fewer GL contexts/shaders coexist (--concurrency=1 or lower).
2. Render on a GPU-enabled environment (GPU Lambda layer / --enable-gpu headless Chrome) instead of software GL.
3. Update GPU drivers and the Chrome build; retry the render if context loss was transient.
4. Fewer stacked WebGL effects per frame reduces per-context shader allocation.

Example fix

// before
remotion render main --concurrency=8

// after: fewer simultaneous GL contexts avoids shader allocation failure
remotion render main --concurrency=1

function webgl2ShaderAvailable(): boolean {
  try {
    const c = document.createElement('canvas');
    const gl = c.getContext('webgl2');
    if (!gl) return false;
    const s = gl.createShader(gl.VERTEX_SHADER);
    const ok = s !== null;
    if (s) gl.deleteShader(s);
    return ok;
  } catch {
    return false;
  }
}

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

When it happens

Trigger: Reached during createProgram() inside setupColorCorrection at color-correction.ts:310 when GL cannot produce a shader object for either VERTEX_SHADER or FRAGMENT_SHADER. Triggered by GL object-limit/memory exhaustion or a lost context, not by colorCorrection() params.

Common situations: Many concurrent WebGL2 contexts in headless Chrome, CI with software GL (SwiftShader) and low shader-object limits, a long render that suffers context loss, or a GPU/driver under memory pressure.

Related errors

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

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