remotion-dev/remotion · error · Error

Failed to create WebGL program

Error message

Failed to create WebGL program

What it means

Thrown by createProgram() in the linear-gradient effect when gl.createProgram() returns null after both shaders compiled successfully. The context accepted the shaders but will not allocate a program object, which the library treats as fatal because linking cannot proceed.

Source

Thrown at packages/effects/src/linear-gradient.ts:191

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

	return shader;
};

const createProgram = (gl: WebGL2RenderingContext): WebGLProgram => {
	const vs = compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
	const fs = compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
	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);
	gl.deleteShader(vs);
	gl.deleteShader(fs);

	if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
		const log = gl.getProgramInfoLog(program);
		gl.deleteProgram(program);
		throw new Error(
			`Linear gradient program link failed: ${log ?? '(no log)'}`,
		);
	}

	return program;
};

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Treat as transient first: restart the render worker / Chrome and retry once.
2. Reduce parallelism (`--concurrency`, framesPerLambda) to lower per-process GL object pressure.
3. Force a software GL backend (`--gl=angle --angle-backend=swiftshader`) to remove the host GPU/driver from the equation.
4. Check for GL-object leaks in surrounding effects; if many effects mount on one composition, ensure they call their cleanup path on unmount.
5. Update Chrome/GPU drivers if the failure is persistent on a specific host.

function canAllocateProgram(canvas: HTMLCanvasElement): boolean {
  const gl = canvas.getContext('webgl2');
  if (!gl) return false;
  const p = gl.createProgram();
  const ok = p !== null;
  if (p) gl.deleteProgram(p);
  return ok;
}

try {
  renderWithLinearGradient();
} catch (err) {
  if (err instanceof Error && err.message === 'Failed to create WebGL program') {
    await restartRendererWorker();
    renderWithLinearGradient(); // single retry on a fresh context
  } else throw err;
}

When it happens

Trigger: WebGL2 context is in a lost/failing state, or the implementation has hit its internal object limit, while still accepting shader creation. Most often a follow-on symptom of GPU-process instability or memory pressure on the device.

Common situations: Render farms under memory pressure; long-running Studio sessions that leak GL objects; GPU process that crashed and left a half-alive context; concurrent renders saturating the driver's object tables.

Related errors

• Failed to create WebGL shader
• Linear gradient shader compile failed: ${log ?? '(no log)'}
• Failed to create WebGL vertex array
• Failed to create WebGL buffer
• Failed to create WebGL shader

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