remotion-dev/remotion · error · Error

Failed to create WebGL program

Error message

Failed to create WebGL program

What it means

Thrown by dot-grid's linkProgram helper when gl.createProgram() returns null. Like the shader case, a null program means the WebGL2 context cannot allocate another program object — typically context loss or per-context resource exhaustion. The bundled shaders have already been compiled successfully by the time this runs.

Source

Thrown at packages/effects/src/dot-grid.ts:179

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

	return program;
};

export const dotGrid = createEffect<DotGridParams, DotGridState>({
	type: 'dev.remotion.effects.dotGrid',
	label: 'dotGrid()',
	documentationLink: 'https://www.remotion.dev/docs/effects/dot-grid',

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Ensure every dotGrid() instance has its cleanup invoked (the framework does this when components unmount; verify you are not short-circuiting the effect lifecycle).
2. Reduce the number of simultaneously mounted WebGL2 effects in one composition.
3. Reload the page / restart Studio to release leaked programs.
4. For headless runs, use a software renderer and allocate adequate memory.
5. Update GPU drivers.

const supportsWebGL2 = () => {
  try {
    return !!document.createElement('canvas').getContext('webgl2');
  } catch {
    return false;
  }
};

if (!supportsWebGL2()) {
  // omit dotGrid() or render a fallback

try {
  state = dotGrid().setup(canvas);
} catch (err) {
  if (err instanceof Error && /WebGL program/i.test(err.message)) {
    console.error('WebGL2 program allocation failed:', err.message);
    // fall back or notify
  } else {
    throw err;
  }
}

When it happens

Trigger: The WebGL2 context is lost or has hit its implementation-defined program limit, or GPU memory is exhausted. Reached inside dotGrid().setup() after both shaders compiled, when gl.createProgram() is called.

Common situations: Many effects mounted simultaneously leaking programs (cleanup not called); long-running Studio sessions; GPU driver crash mid-session; headless rendering with a constrained software GL backend.

Related errors

• Failed to create WebGL program
• Failed to create WebGL shader
• 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/0ed1f930d9034f9d. Report an issue: GitHub.