remotion-dev/remotion · error · Error

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

Error message

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

What it means

After pattern()'s GLSL shader source is submitted and compiled, the driver reports COMPILE_STATUS=false. Because the shader is authored in the library, a real compile failure points to a driver/GPU incompatibility (unsupported GLSL syntax/precision) or a context that is failing operations spuriously due to loss. The info log is interpolated so the driver's diagnostic is visible.

Source

Thrown at packages/effects/src/pattern.ts:410

}
`;

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(`Pattern 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);

View on GitHub (pinned to 78fe4bb3fd)

Solutions

  1. Render on a GPU/browser combo with full WebGL2 + GLSL ES 3.00 support (modern Chromium).
  2. In CI/headless, use SwiftShader or a real GPU passthrough rather than a stub GL.
  3. Update GPU drivers.
  4. Report the interpolated info log to the Remotion team if it reproduces on a current Chromium build.
Defensive patterns

Strategy: try-catch

Validate before calling

// Probe shader compilation capability on this GPU once at startup.
function canCompilePatternShader(gl: WebGL2RenderingContext): boolean {
  const s = gl.createShader(gl.FRAGMENT_SHADER);
  if (!s) return false;
  gl.shaderSource(s, PATTERN_FS);
  gl.compileShader(s);
  const ok = gl.getShaderParameter(s, gl.COMPILE_STATUS);
  gl.deleteShader(s);
  return Boolean(ok);
}

Try / catch

try {
  initPattern(canvas);
} catch (err) {
  if (String(err.message).startsWith('Pattern shader compile failed')) {
    logShaderIssue(err.message); // report driver incompatibility
    useNonGpuFallback();
  } else throw err;
}

Prevention

When it happens

Trigger: compileShader() calls gl.getShaderParameter(shader, COMPILE_STATUS) which returns false; gl.getShaderInfoLog yields the driver error. Occurs during pattern effect setup on every frame that instantiates it.

Common situations: GPU/driver that does not support the GLSL ES 3.00 features the shader uses; corrupted/lost context causing compile to fail; very old mobile GPU drivers; virtualized render environments without real GPU support.

Related errors


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