remotion-dev/remotion · error · Error

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

Error message

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

What it means

Thrown by compileShader() for the checkerboard effect when the GLSL source compiles but gl.getShaderParameter(shader, COMPILE_STATUS) is false. The message embeds the driver's info log. Because the shipped CHECKERBOARD_VS/CHECKERBOARD_FS are static and well-formed, a compile failure in production almost always indicates a driver/GPU bug or a context in a degraded state rather than a source error.

Source

Thrown at packages/effects/src/checkerboard.ts:287

}
`;

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(`Checkerboard 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. Read the embedded info log in the error message — it names the exact GLSL line the driver rejected.
2. Update GPU drivers to the latest stable release.
3. Ensure the browser is using real GPU acceleration, not a broken software fallback.
4. Reinstall/upgrade @remotion/effects to rule out a corrupted shader string.
5. Try a different GPU or a headed Chromium (e.g. Chrome for Testing) to isolate driver-specific bugs.

try {
  return <Checkerboard {...props} />;
} catch (err) {
  const msg = String(err);
  if (/Checkerboard shader compile failed/.test(msg)) {
  // surface the embedded info log to ops; fall back to no-effect frame
  reportShaderError(msg);
  return <FallbackFrame />;
  }
  throw err;
}

When it happens

Trigger: gl.compileShader() at checkerboard.ts:283 completes but gl.getShaderParameter reports failure at :284; the info log is read, the shader is deleted, and the error at :287 is thrown with the log embedded.

Common situations: Buggy/outdated GPU drivers, GPU blacklisted with a fallback that rejects ES 3.00 (#version 300 es), software rasterizers with incomplete GLSL ES 3.00 support, or a corrupted shader string from a tampered/older build of @remotion/effects.

Related errors

• Failed to create WebGL shader
• Checkerboard program link failed: ${log ?? '(no log)'}
• Shader compile failed: ${log ?? '(no log)'}
• Failed to create WebGL program
• Failed to create WebGL shader

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