remotion-dev/remotion · error · Error

Shader compile failed

Error message

Shader compile failed: ${log ?? '(no log)'}

What it means

The region-blur runtime compiles GLSL shader source via WebGL2 and throws this error when gl.getShaderParameter reports COMPILE_STATUS is false. The message includes the info log from the driver, or '(no log)' if none was provided. This indicates a problem in the effect's built-in shader source, not in caller-supplied parameters.

Solutions

1. Read the info log in the error message for the exact GLSL line and error
2. Update GPU drivers to the latest stable version
3. Use a hardware-accelerated WebGL2 context instead of a software rasterizer
4. Report the bug with the info log text and GPU/driver details

try {
  regionBlur({ topLeft: [0.2, 0.2], bottomRight: [0.8, 0.8] });
} catch (err) {
  if (err instanceof Error && err.message.includes('Shader compile failed')) {
    console.error('GPU shader compile failed for regionBlur:', err.message);
  }
  throw err;
}

When it happens

Trigger: The built-in BLUR_VS, BLUR_FS_HORIZONTAL, BLUR_FS_VERTICAL, or COMPOSITE_FRAGMENT_SHADER source fails to compile on the current GPU/driver combination. This can happen with non-standard GLSL dialects, missing extensions, or a regression in the effect's shader source.

Common situations: Outdated GPU drivers; headless rendering with SwiftShader that rejects certain constructs; updating the effect source and introducing a syntax error; browsers with non-conformant WebGL2 implementations.

Related errors

• Failed to create WebGL shader
• Program link failed
• Checkerboard shader compile failed
• Contour lines program link failed
• Contour lines shader compile failed

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

Appendix: source

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

	};
};

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 => {
	const vertexShader = compileShader(gl, gl.VERTEX_SHADER, vertexSource);
	const fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
	const program = gl.createProgram();
	if (!program) {
		throw new Error('Failed to create WebGL program');
	}

	gl.attachShader(program, vertexShader);

View on GitHub (pinned to 78fe4bb3fd)