remotion-dev/remotion · error · Error

Failed to create WebGL program

Error message

Failed to create WebGL program

What it means

During outline() effect setup, gl.createProgram() returned null. Per the WebGL spec this only happens on a lost or otherwise invalid context - the two shaders compiled fine, but the program object could not be allocated. Like the other 'Failed to create WebGL ...' errors in outline.ts, it signals GPU resource exhaustion or a lost context rather than a usage mistake.

Source

Thrown at packages/effects/src/outline.ts:248

	}

	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(`Outline shader compile failed: ${log ?? '(no log)'}`);
	}

	return shader;
};

const createProgram = (gl: WebGL2RenderingContext): WebGLProgram => {
	const vertexShader = compileShader(gl, gl.VERTEX_SHADER, OUTLINE_VS);
	const fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, OUTLINE_FS);
	const program = gl.createProgram();
	if (!program) {
		throw new Error('Failed to create WebGL program');
	}

	gl.attachShader(program, vertexShader);
	gl.attachShader(program, fragmentShader);
	gl.linkProgram(program);
	gl.deleteShader(vertexShader);
	gl.deleteShader(fragmentShader);

	if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
		const log = gl.getProgramInfoLog(program);
		gl.deleteProgram(program);
		throw new Error(`Outline program link failed: ${log ?? '(no log)'}`);
	}

	return program;
};

const createTexture = (gl: WebGL2RenderingContext): WebGLTexture => {

View on GitHub (pinned to 10db9de073)

Solutions

1. Retry the render with lower concurrency so fewer WebGL contexts/programs are alive simultaneously
2. Restart the render - a fresh page usually gets a healthy context
3. Update Chrome and GPU drivers if the failure repeats on the same machine
4. Reduce the number of simultaneously mounted elements using outline() in one composition

try {
  await renderMediaOnLambda(/* ... */);
} catch (err) {
  if (err instanceof Error && err.message === 'Failed to create WebGL program') {
    // transient context loss: retry once, ideally at lower concurrency
    await renderMediaOnLambda(/* ..., concurrency: 2 */);
  } else {
    throw err;
  }
}

When it happens

Trigger: Applying outline() after many WebGL objects were allocated in the same Chrome page (several effect-heavy frames rendered concurrently, or a previous context loss event) so program allocation fails.

Common situations: High-concurrency renders where each frame sets up its own outline() state; memory pressure in Lambda/serverless renders; GPU driver resets mid-render.

Related errors

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

AI-assisted analysis of remotion-dev/remotion@10db9de073 (2026-08-22). Data as JSON: /api/errors/c4d494de8a954d66. Report an issue: GitHub.