remotion-dev/remotion · error · Error

Failed to create WebGL program

Error message

Failed to create WebGL program

What it means

Thrown by vignette's linkProgram when gl.createProgram() returns null. A null program object means WebGL refused the allocation on context loss or object-limit exhaustion. Vignette links its compiled shaders into this program, so it cannot continue without one.

Solutions

1. Reload to reset the WebGL2 context.
2. Lower concurrent WebGL effect count.
3. Confirm hardware-accelerated WebGL2 and update drivers.
4. Free effects on offscreen/unmounted sequences.

Example fix

// before
const effect = vignette({amount: 0.6});

// after
const effect = (() => {
  try { return vignette({amount: 0.6}); } catch { return null; }
})();

let effect = null;
try {
  effect = vignette({amount: 0.6});
} catch (err) {
  console.warn('vignette program alloc failed, skipping effect', err);
}

When it happens

Trigger: createProgram calls linkProgram after both shaders compile; gl.createProgram() returns null because the context is lost or the program-object budget is reached.

Common situations: Context loss with many concurrent effects; driver/GPU object caps; headless Chrome under memory pressure.

Related errors

• Failed to create WebGL buffer
• Failed to create WebGL shader
• Failed to create WebGL texture
• Failed to create WebGL vertex array
• Failed to create vibrance texture

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

Appendix: source

Thrown at packages/effects/src/vignette.ts:290

	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(`Vignette 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(`Vignette program link failed: ${log ?? '(no log)'}`);
	}

	return program;
};

const createProgram = (
	gl: WebGL2RenderingContext,
	vertexSource: string,
	fragmentSource: string,

View on GitHub (pinned to 78fe4bb3fd)