remotion-dev/remotion · error · Error

Failed to create WebGL program

Error message

Failed to create WebGL program

What it means

The shine() effect's linkProgram helper calls gl.createProgram() and throws this generic Error when the WebGL2 driver returns null. This means the context exists but cannot allocate a program object, which indicates severe GPU resource exhaustion or a context that entered a lost state after creation.

Source

Thrown at packages/effects/src/shine.ts:215

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

	return program;
};

export const shine = createEffect<ShineParams, ShineState>({
	type: 'dev.remotion.effects.shine',
	label: 'shine()',
	documentationLink: 'https://www.remotion.dev/docs/effects/shine',

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Reduce concurrency so fewer WebGL2 contexts and program objects are live simultaneously.
2. Ensure Remotion's cleanup lifecycle runs — each effect's cleanup() deletes its program; avoid patterns that bypass cleanup.
3. Verify GPU acceleration in the render environment.
4. Restart the render if a transient context loss caused the failure.

Example fix

null

// Probe whether the WebGL2 context can allocate a program object
function canCreateProgram(canvas: HTMLCanvasElement): boolean {
  const gl = canvas.getContext('webgl2');
  if (!gl) return false;
  const program = gl.createProgram();
  const ok = program !== null;
  if (program) gl.deleteProgram(program);
  return ok;
}

null

try {
  shine({ progress: 0.5 });
} catch (e) {
  if (e instanceof Error && e.message === 'Failed to create WebGL program') {
    console.warn('WebGL2 program allocation failed');
  } else {
    throw e;
  }
}

When it happens

Trigger: Calling shine() when the WebGL2 context is under extreme resource pressure — too many live program objects, GPU memory exhaustion, or a context-loss event that occurred between getContext and createProgram.

Common situations: Headless renderers under high concurrency exhausting the driver's program object pool; software rendering backends with hard resource caps; a page with leaked program objects from prior effect instances that were not cleaned up.

Related errors

• Failed to create WebGL program
• Failed to create shadows and highlights vertex buffer
• Failed to create WebGL buffer
• Failed to create WebGL texture
• Failed to create WebGL buffer

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