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.

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 buffer
• Failed to create WebGL shader
• Failed to create WebGL texture
• Failed to create WebGL vertex array

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

Appendix: 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)