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 chromatic aberration runtime when gl.createProgram() returns null. A null program means the WebGL2 context is lost/destroyed or out of program objects, so the chromatic aberration shaders cannot be linked and setup aborts.

Source

Thrown at packages/effects/src/chromatic-aberration/chromatic-aberration-runtime.ts:49

	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(`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(`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 concurrent chromatic-aberration / WebGL effects.
  2. Enable GPU acceleration; remove --disable-gpu.
  3. Recreate the effect after 'webglcontextrestored'.
  4. Update GPU drivers; confirm WebGL2 program support.
  5. Use a higher-memory/GPU render instance server-side.
Defensive patterns

Strategy: try-catch

Validate before calling

function probeWebGL2(): boolean {
  try {
    const c = document.createElement('canvas');
    const gl = c.getContext('webgl2');
    return !!gl && !gl.isContextLost();
  } catch {
    return false;
  }
}
if (!probeWebGL2()) skipOrFallback();

Try / catch

try {
  return <ChromaticAberration {...props} />;
} catch (err) {
  if (/Failed to create WebGL program/.test(String(err))) return <FallbackFrame />;
  throw err;
}

Prevention

When it happens

Trigger: createProgram() -> linkProgram() calls gl.createProgram() at chromatic-aberration-runtime.ts:47 during setupChromaticAberration(); it returns null and the guard at :48 throws.

Common situations: Lost/destroyed GL context, GPU process crash, many concurrent programs across live compositions, or software rendering under load.

Related errors


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