remotion-dev/remotion · critical · Error

Failed to create WebGL program

Error message

Failed to create WebGL program

What it means

During starburst effect `setup`, after both shaders compile successfully, `gl.createProgram()` returned `null`. This means the WebGL2 context could not allocate a program object, typically due to context loss or GPU resource exhaustion. The error fires before any shaders are attached.

Solutions

  1. Reduce the number of concurrent webgl2 effects in the render pipeline.
  2. Restart the session/render to get a fresh context.
  3. Ensure headless Chrome is launched with working WebGL2 (`--use-gl=angle`).
  4. Listen for `webglcontextlost` and tear down / recreate effect state proactively.
Defensive patterns

Strategy: fallback

Validate before calling

// Probe program creation ability on a throwaway context.
const canCreateProgram = (): boolean => {
  try {
    const gl = document.createElement('canvas').getContext('webgl2');
    return !!gl?.createProgram();
  } catch {
    return false;
  }
};

Try / catch

try {
  starburst({...params});
} catch (e) {
  if (/Failed to create WebGL program/.test((e as Error).message)) {
    renderFallbackFrame();
  } else throw e;
}

Prevention

When it happens

Trigger: The WebGL2 context was lost between shader compilation and program creation; the driver exhausted its program object budget; the context is in a degraded/destroyed state.

Common situations: Many simultaneous webgl2 effect setups; long-running sessions after a GPU driver reset; headless environments with restrictive WebGL2 resource limits.

Related errors


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

Appendix: source

Thrown at packages/effects/src/starburst.ts:259

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

	return program;
};

export const starburst = createEffect<StarburstEffectParams, StarburstGlState>({
	type: 'remotion/starburst',
	label: 'starburst()',
	documentationLink: 'https://www.remotion.dev/docs/effects/starburst',

View on GitHub (pinned to 78fe4bb3fd)