remotion-dev/remotion · error · Error

Failed to create WebGL program

Error message

Failed to create WebGL program

What it means

Thrown by linkProgram() for the checkerboard effect when gl.createProgram() returns null. As with other GL object creators, a null program means the WebGL2 context is lost, destroyed, or out of program objects. Linking cannot proceed, so checkerboard setup aborts before any attribute/uniform work.

Source

Thrown at packages/effects/src/checkerboard.ts:300

	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(`Checkerboard 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(`Checkerboard 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 checkerboard / WebGL effects.
  2. Enable GPU acceleration; remove --disable-gpu.
  3. Recreate the effect after 'webglcontextrestored'.
  4. Update GPU drivers and verify 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 <Checkerboard {...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 checkerboard.ts:298 during setupCheckerboard(); it returns null and the guard at :299 throws.

Common situations: Lost/destroyed GL context, GPU process crash, too 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/8f441deabe821014. Report an issue: GitHub.