remotion-dev/remotion · error · Error

Failed to create WebGL shader

Error message

Failed to create WebGL shader

What it means

Thrown by compileShader in the color key effect when gl.createShader() returns null. The GL2 context exists but cannot allocate a shader object, indicating resource exhaustion or context loss. The color key effect cannot compile its shaders, so setup fails.

Source

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

}

vec3 cleanRgb = uSpillSuppression > 0.0
? suppressSpill(rgb, uKeyColor, uSpillSuppression)
: rgb;

float keyedAlpha = alpha * keepMask;
fragColor = vec4(cleanRgb * keyedAlpha, keyedAlpha);
}
`;

const compileShader = (
	gl: WebGL2RenderingContext,
	type: number,
	source: string,
): WebGLShader => {
	const shader = gl.createShader(type);
	if (!shader) {
		throw new Error('Failed to create WebGL 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 key shader compile failed: ${log ?? '(no log)'}`);
	}

	return shader;
};

const linkProgram = (
	gl: WebGL2RenderingContext,
	vs: WebGLShader,
	fs: WebGLShader,
): WebGLProgram => {

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Lower render concurrency to reduce simultaneous GL shader objects.
2. Render with GPU acceleration rather than software GL.
3. Update GPU drivers and Chrome; retry if context loss was transient.
4. Fewer WebGL effects active per frame reduces shader allocation.

Example fix

// before
remotion render main --concurrency=8

// after
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 WebGL shader/i.test(String(err))) {
    await renderMedia({...opts, concurrency: 1});
  } else {
    throw err;
  }
}

When it happens

Trigger: Reached during createProgram() inside setupColorKey at color-key.ts:191 when gl.createShader() yields null for either the COLOR_KEY_VS or COLOR_KEY_FS. Caused by GL object/memory pressure or a lost context, not by colorKey() parameters.

Common situations: Many concurrent WebGL2 contexts in headless Chrome, software GL (SwiftShader) with low shader limits, GPU memory pressure, or a render that lost its context.

Related errors

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