remotion-dev/remotion · critical · Error

Failed to create WebGL program

Error message

Failed to create WebGL program

What it means

Thrown by gridlines' linkProgram (gridlines.ts:386) when gl.createProgram() returns null. A null program means WebGL could not allocate the program object — the same class of failure as a null shader: context loss or GPU resource exhaustion. The library throws because attachShader/linkProgram would fail on null.

Source

Thrown at packages/effects/src/gridlines.ts:386

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

	return program;
};

const rgbaToUniform = (
	rgba: ParsedColorRgba,
): readonly [number, number, number, number] => {
	const [r, g, b, a] = rgba;

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Handle webglcontextlost on the canvas and tear down/rebuild effect state on restore.
2. Ensure effect cleanup() deletes programs/buffers/textures so they do not accumulate.
3. Limit concurrent WebGL compositions; render sequentially if GPU memory is constrained.
4. Restart the browser/GPU; update drivers if the failure is persistent.

Example fix

// before: programs accumulate because cleanup is never invoked
const run = () => gridlinesEffect.setup(canvas); // called repeatedly

// after: pair every setup with cleanup
const state = gridlinesEffect.setup(canvas);
// ... use ...
gridlinesEffect.cleanup(state); // frees the GL program

if (gl.isContextLost()) {
  throw new Error('WebGL2 context lost; cannot create program');
}

null

try {
  gridlines.setup(canvas);
} catch (e) {
  if (e instanceof Error && e.message === 'Failed to create WebGL program') {
    // context loss / resource exhaustion
  }
  throw e;
}

When it happens

Trigger: Called during Gridlines setup after both shaders compiled successfully. Triggered by a lost WebGL2 context, or cumulative resource exhaustion where the driver refuses to allocate another program object.

Common situations: Long renders leaking GL objects; many simultaneous WebGL effects/compositions; GPU reset mid-render; running on constrained integrated GPUs or software renderers.

Related errors

• Failed to create WebGL shader
• Gridlines program link failed: ${log ?? '(no log)'}
• Failed to create WebGL vertex array
• Failed to create WebGL buffer
• Failed to create WebGL texture

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