remotion-dev/remotion · critical · Error

Failed to create WebGL shader

Error message

Failed to create WebGL shader

What it means

During zoomBlur setup, the WebGL2 context's `gl.createShader()` returned `null`, meaning the GPU or driver refused to allocate a shader object. This is distinct from a compile error — the object itself could not be created. It typically signals WebGL context loss, GPU resource exhaustion, or a driver in an unrecoverable state.

Source

Thrown at packages/effects/src/zoom-blur/zoom-blur-runtime.ts:28

	readonly vbo: WebGLBuffer;
	readonly textureSource: WebGLTexture;
	readonly uniforms: {
		readonly uSource: WebGLUniformLocation | null;
		readonly uResolution: WebGLUniformLocation | null;
		readonly uCenter: WebGLUniformLocation | null;
		readonly uAmount: WebGLUniformLocation | null;
		readonly uSamples: 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 linkProgram = (
	gl: WebGL2RenderingContext,
	vs: WebGLShader,
	fs: WebGLShader,
): WebGLProgram => {

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Reduce the number of simultaneous WebGL effects in the composition.
2. Ensure the rendering environment has a functional WebGL2 context (test with a simple WebGL demo).
3. Update GPU drivers or switch to a software-rendered WebGL implementation (SwiftShader).
4. Listen for `webglcontextlost` events on the canvas and handle context restoration.

// Check context health before applying the effect
canvas.addEventListener('webglcontextlost', (e) => {
  e.preventDefault();
  // mark effect as needing re-setup
});

try {
  zoomBlur({ amount: 40 });
} catch (err) {
  if (err instanceof Error && err.message.includes('WebGL')) {
    // fall back to no effect or a CSS-based blur
    console.error('WebGL unavailable, skipping zoomBlur:', err.message);
  } else {
    throw err;
  }
}

When it happens

Trigger: Calling `zoomBlur()` when the WebGL2 context has been lost (e.g., after a GPU crash or too many simultaneous contexts), on systems with outdated/broken GPU drivers, or after exhausting GPU memory with many concurrent effects.

Common situations: Rendering on headless CI without proper GPU support, running many effects concurrently on integrated graphics, driver crashes mid-render, or running in a browser tab after the OS suspended GPU acceleration.

Related errors

• Shader compile failed: ${log ?? '(no log)'}
• Failed to create WebGL program
• Program link failed: ${log ?? '(no log)'}
• 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/db0c9be432ba3c86. Report an issue: GitHub.