remotion-dev/remotion · critical · Error

Failed to create WebGL program

Error message

Failed to create WebGL program

What it means

Thrown by linkProgram() inside the waves effect when gl.createProgram() returns null. WebGL's createProgram returns null on context loss, context destruction, or resource exhaustion. The program object is needed to hold the linked vertex+fragment shader pair for the waves effect.

Source

Thrown at packages/effects/src/waves.ts:388

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

	return program;
};

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

View on GitHub (pinned to 78fe4bb3fd)

Solutions

  1. Handle 'webglcontextlost'/'webglcontextrestored' and recreate the effect on a new canvas.
  2. Reduce concurrent effects and ensure cleanup of old states.
  3. Update GPU drivers or switch render environments.
  4. Recycle render worker processes in long-running server-side rendering.
Defensive patterns

Strategy: try-catch

Try / catch

const gl = canvas.getContext('webgl2');
if (!gl || gl.isContextLost()) {
  return;
}
try {
  const state = setupWaves(canvas);
} catch (e) {
  if ((e as Error).message === 'Failed to create WebGL program') {
    console.warn('Waves program allocation failed:', (e as Error).message);
  }
}

Prevention

When it happens

Trigger: Called transitively from setupWaves() at packages/effects/src/waves.ts:446 via createProgram → linkProgram. Fires when the GL context cannot allocate a program object. Since both shaders compiled successfully before this point, this indicates context loss or resource exhaustion occurring between shader compilation and program creation.

Common situations: WebGL context loss mid-setup; many concurrent effect instances exhausting program object slots; GPU process instability; constrained rendering environment.

Related errors


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