remotion-dev/remotion · error · Error

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

Error message

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

What it means

After allocating and compiling the zigzag shaders, the effect checks gl.COMPILE_STATUS; on failure it reads gl.getShaderInfoLog and throws 'Zigzag shader compile failed: <log>' (or '(no log)' if the driver gave none). The GLSL is a fixed #version 300 es string baked into the library, so a real compile failure implicates the GPU driver/compiler or context state, not caller input — no zigzag parameter reaches the shader source.

Source

Thrown at packages/effects/src/zigzag.ts:357

}
`;

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(`Zigzag 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 <log> in the message — it usually names the exact GLSL line/driver error and pinpoints the driver bug.
2. Render with Remotion's bundled Chromium and its known-good SwiftShader; do not disable the software GPU.
3. Update GPU drivers on the failing host.
4. Ensure the context is not lost (isContextLost()) before rendering; re-mount on webglcontextlost.
5. If the log shows a genuine compiler rejection of valid GLSL, report a driver bug.

// The shader source is a library constant; caller cannot change compile outcome.
// Pre-check context health and renderer identity to avoid known-bad drivers.
const gl = document.createElement('canvas').getContext('webgl2');
const ok = gl != null && !gl.isContextLost();

const hasConformantCompiler = (): boolean => {
  const gl = document.createElement('canvas').getContext('webgl2');
  if (!gl || gl.isContextLost()) return false;
  // quick smoke compile of a trivial GLSL-ES 3.00 shader
  const s = gl.createShader(gl.VERTEX_SHADER);
  if (!s) return false;
  gl.shaderSource(s, '#version 300 es\nvoid main(){}');
  gl.compileShader(s);
  const compiled = gl.getShaderParameter(s, gl.COMPILE_STATUS) === true;
  gl.deleteShader(s);
  return compiled;
};

try {
  return <VideoEffects effects={[zigzag({colors: ['#ff0000', '#00ff00']})]} />;
} catch (err) {
  if (err instanceof Error && /Zigzag shader compile failed/.test(err.message)) {
    // err.message contains the driver log — log it for diagnosis, then degrade
    console.error(err.message);
    return <Video />;
  }
  throw err;
}

When it happens

Trigger: compileShader in zigzag.ts: getShaderParameter(COMPILE_STATUS) is false; the thrown message embeds the driver's info log or '(no log)'.

Common situations: A GPU/SwiftShader build whose GLSL-ES 3.00 compiler rejects valid constructs; context loss interrupting compile; extremely memory-constrained compile; outdated mobile/VM driver with partial GLSL-ES 3.00 support.

Related errors

• Contour lines shader compile failed: ${log ?? '(no log)'}
• Contour lines program link failed: ${log ?? '(no log)'}
• Shader compile failed: ${log ?? '(no log)'}
• Program link failed: ${log ?? '(no log)'}
• Linear gradient shader compile failed: ${log ?? '(no log)'}

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