remotion-dev/remotion · critical · Error

Failed to create WebGL shader

Error message

Failed to create WebGL shader

What it means

The region-blur runtime's compileShader helper calls gl.createShader(). If the WebGL2 context returns null, there is no shader object to compile, and the effect throws immediately. A null return indicates a lost context, destroyed context, or exhausted shader object pool.

Source

Thrown at packages/effects/src/region-blur/region-blur-runtime.ts:88

	readonly compositeUniforms: {
		readonly source: WebGLUniformLocation | null;
		readonly blurred: WebGLUniformLocation | null;
		readonly resolution: WebGLUniformLocation | null;
		readonly topLeft: WebGLUniformLocation | null;
		readonly bottomRight: WebGLUniformLocation | null;
		readonly feather: WebGLUniformLocation | null;
		readonly roundness: WebGLUniformLocation | null;
	};
};

const compileShader = (
	gl: WebGL2RenderingContext,
	type: number,
	source: string,
): WebGLShader => {
	const shader = gl.createShader(type);
	if (!shader) {
		throw new Error('Failed to create WebGL shader');
	}

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

	return shader;
};

const createProgram = (
	gl: WebGL2RenderingContext,
	vertexSource: string,
	fragmentSource: string,
): WebGLProgram => {

View on GitHub (pinned to 78fe4bb3fd)

Solutions

  1. Handle 'webglcontextlost' and reinitialize after 'webglcontextrestored'
  2. Dispose of old region-blur effects before creating new ones to free shader objects
  3. Reduce the number of concurrent WebGL2 effects in the composition
  4. Restart the render process if the GL context is irrecoverably corrupted
Defensive patterns

Strategy: retry

Try / catch

canvas.addEventListener('webglcontextlost', (e) => { e.preventDefault(); }, false);
canvas.addEventListener('webglcontextrestored', () => {
  // re-initialize region-blur effect, re-compiling shaders
}, false);

Prevention

When it happens

Trigger: Calling setupRegionBlur() after the WebGL2 context has been lost, after the context was externally destroyed, or when the GPU driver has exhausted its shader object allocation.

Common situations: GPU process crash; tab backgrounded on mobile with context loss; too many shader compilations without cleanup; headless rendering with an unstable software rasterizer.

Related errors


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