remotion-dev/remotion · error · Error

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

Error message

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

What it means

Thrown by gridlines' compileShader when the shader compiled but gl.getShaderParameter(shader, COMPILE_STATUS) is false. The driver's info log is appended, so the message tells you the exact GLSL error. Because GRIDLINES_VS/GRIDLINES_FS are hardcoded GLSL ES 3.00 strings, a compile failure usually means the environment does not support the shader rather than a user-param mistake.

Source

Thrown at packages/effects/src/gridlines.ts:373

}
`;

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(`Gridlines 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 appended info log to find the offending GLSL line/feature.
2. Run the composition in a current desktop Chrome with hardware acceleration enabled to confirm the shader compiles there.
3. For headless rendering, use a headless shell with a functional WebGL2 backend (e.g. --use-gl=angle --use-angle=swiftshader) and update it.
4. Update GPU drivers / ANGLE; if the GPU is blocklisted, force a working backend via flags.

Example fix

// before: headless shell without WebGL2 backend -> 'Gridlines shader compile failed: ...'
chrome --headless --disable-gpu

// after: provide a WebGL2-capable software backend
chrome --headless=new --use-gl=angle --use-angle=swiftsoftware

// Confirm real WebGL2 with a working compiler before running the effect
const gl = canvas.getContext('webgl2');
if (!gl) throw new Error('WebGL2 unavailable');
if (gl.isContextLost()) throw new Error('WebGL2 context lost');

null

try {
  gridlines.setup(canvas);
} catch (e) {
  if (e instanceof Error && e.message.startsWith('Gridlines shader compile failed')) {
    // read the GLSL log, switch to a conformant backend / update drivers
  }
  throw e;
}

When it happens

Trigger: Setup-time compile of GRIDLINES_VS or GRIDLINES_FS under a WebGL2 context whose driver rejects the GLSL. Typical logs: unsupported version directive (#version 300 es on a context that isn't real WebGL2), precision/qualifier errors on a buggy driver, or a driver that strips a built-in the shader relies on.

Common situations: A runtime that reports WebGL2 support but delegates to an incomplete software renderer; outdated mobile GPU drivers; ANGLE/SwiftShader version mismatches in headless Chrome; a browser extension or GPU blocklist downgrading the renderer.

Related errors

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

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