remotion-dev/remotion · error · Error

Failed to create WebGL program

Error message

Failed to create WebGL program

What it means

Thrown by `linkProgram` in the barrel-distortion WebGL runtime when `gl.createProgram()` returns null. Like createShader returning null, this means the WebGL2 context could not allocate a program object — context loss, invalid context, or resource exhaustion. The check runs before attachShader/linkProgram.

Source

Thrown at packages/effects/src/barrel-distortion/barrel-distortion-runtime.ts:49

	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(`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(`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 program on restore.
2. Render in an environment with reliable WebGL2 (Chromium + GPU/SwiftShader).
3. Limit concurrent effect instances to avoid exhausting program objects.
4. Retry the render after the context is restored.

Example fix

// before
effect.init(canvas); // createProgram returned null

// after
canvas.addEventListener('webglcontextrestored', () => effect.init(canvas));
canvas.addEventListener('webglcontextlost', (e) => e.preventDefault());

const gl = canvas.getContext('webgl2');
if (!gl) throw new Error('WebGL2 unavailable');
const program = gl.createProgram();
if (!program) throw new Error('context lost; recreate before linking');

const canCreateProgram = (gl: WebGL2RenderingContext): boolean =>
  gl.createProgram() !== null;

try {
  linkProgram(gl, vs, fs);
} catch (e) {
  if (/Failed to create WebGL program/.test(String(e))) {
    await waitForContextRestore(canvas); linkProgram(gl, vs, fs);
  } else throw e;
}

When it happens

Trigger: After both shaders compile successfully, `linkProgram` calls `gl.createProgram()` on a context that returns null. Same root causes as error 457: lost/invalid WebGL2 context or GPU resource exhaustion.

Common situations: Context lost between shader compile and program creation; too many programs allocated; headless/GPU-less environment; driver crash mid-render of the barrel-distortion effect.

Related errors

• Failed to create WebGL shader
• Failed to create WebGL buffer
• Failed to create WebGL texture
• Failed to create WebGL shader
• Failed to create WebGL program

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