remotion-dev/remotion · error · Error

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

Error message

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

What it means

Thrown inside compileShader() in fisheye-runtime.ts when gl.getShaderParameter(shader, gl.COMPILE_STATUS) is false (fisheye-runtime.ts:35-39). The driver's shader translator rejected FISHEYE_VS or FISHEYE_FS GLSL; the InfoLog is captured, the failed shader is deleted, and the error includes the log. This is a genuine compile rejection, not an allocation failure.

Source

Thrown at packages/effects/src/fisheye/fisheye-runtime.ts:38

	};
};

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 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 with --gl=angle (CLI) / chromiumOptions.gl='angle' (SSR) / Angle (Studio) for a consistent translator.
  2. Read the InfoLog in the message — it names the offending line; verify packages/effects/src/fisheye/fisheye-shaders.ts was not locally modified and matches the installed @remotion/effects version.
  3. Update GPU drivers or force a software GL path known to compile the fisheye shaders.
  4. Confirm the context is healthy (gl.isContextLost()) and restore before retrying.
  5. Report a driver/translator bug upstream if the GLSL is valid ES 3.00 yet rejected.

Example fix

// before
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
  // translator rejected FISHEYE_VS/FISHEYE_FS
}

// after (stable translator + verify shader source)
// CLI: remotion render <comp> --gl=angle
// and confirm fisheye-shaders.ts is unchanged vs the installed version.
Defensive patterns

Strategy: try-catch

Validate before calling

// FISHEYE_VS/FISHEYE_FS are imported package strings; no user input to validate.
// Pre-check only context health and GLSL ES 3.00 support.
const supportsFisheyeShaders = (gl: WebGL2RenderingContext): boolean =>
  !gl.isContextLost() &&
  (gl.getParameter(gl.SHADING_LANGUAGE_VERSION) ?? '').includes('3.00');

Try / catch

try {
  // apply fisheye(); for a custom canvas: const state = setupFisheye(canvas);
} catch (err) {
  if (err instanceof Error && /Shader compile failed/.test(err.message)) {
    // err.message contains the InfoLog; render on Angle and retry.
    console.error('fisheye compile failure:', err.message);
    throw err;
  }
  throw err;
}

Prevention

When it happens

Trigger: setupFisheye() compiles FISHEYE_VS or FISHEYE_FS (imported from fisheye-shaders.js) and the Angle/driver translator reports a compile error. Since fisheye shaders come from a separate module, this can also fire if those shader strings were locally modified or a package version mismatch changed them; otherwise it points at a buggy/incompatible translator.

Common situations: Headless Chromium with software GL whose translator mishandles the fisheye GLSL; outdated mobile/Intel drivers; local edits to fisheye-shaders.ts that introduced a syntax/type error; version drift between @remotion/effects and a forked shader module; a context degraded after a GPU reset.

Related errors


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