remotion-dev/remotion · error · Error

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

Error message

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

What it means

Thrown by compileShader() in the linear-gradient effect after gl.compileShader() reports a non-COMPILE_STATUS. The accompanying info log is interpolated so the driver's actual compiler message is surfaced. The vertex/fragment sources are fixed strings shipped with the library, so a compile failure almost always points at the GL driver rather than user input.

Source

Thrown at packages/effects/src/linear-gradient.ts:178

}
`;

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(
			`Linear gradient shader compile failed: ${log ?? '(no log)'}`,
		);
	}

	return shader;
};

const createProgram = (gl: WebGL2RenderingContext): WebGLProgram => {
	const vs = compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
	const fs = compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
	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 interpolated driver log first — it names the exact GLSL line/feature the driver rejected, which determines the real fix.
2. Switch the renderer to a software GL backend: `--gl=angle --angle-backend=swiftshader` (local) or the equivalent Remotion config for Lambda.
3. Restart Chrome / the render worker to discard a corrupted context, then retry.
4. Update Chrome and GPU drivers; on Linux CI install/upgrade mesa and vulkan packages.
5. If the log shows an unsupported GLSL feature, report it against @remotion/effects with the driver string — the shipped shader may need a fallback path.

Example fix

// before — driver rejects the fixed GLSL on the host's default GL
//   npx remotion render MyComp out.mp4

// after — use a GL backend with full GLSL ES 3.00 support
//   npx remotion render MyComp out.mp4 --gl=angle --angle-backend=swiftshader

// Report whether the host driver can compile GLSL ES 3.00 before relying on a fixed-shader effect.
function canCompileLinearGradientShader(canvas: HTMLCanvasElement): boolean {
  const gl = canvas.getContext('webgl2');
  if (!gl) return false;
  const s = gl.createShader(gl.FRAGMENT_SHADER);
  if (!s) return false;
  gl.shaderSource(s, '#version 300 es\nprecision highp float;\nout vec4 o;\nvoid main(){o=vec4(0.0);}');
  gl.compileShader(s);
  const ok = Boolean(gl.getShaderParameter(s, gl.COMPILE_STATUS));
  gl.deleteShader(s);
  return ok;
}

try {
  renderWithLinearGradient();
} catch (err) {
  if (err instanceof Error && err.message.startsWith('Linear gradient shader compile failed')) {
    // The interpolated driver log is the real clue — log it, switch GL backend, retry.
    console.error(err.message);
    await withGlBackend('swiftshader', () => renderWithLinearGradient());
  } else throw err;
}

When it happens

Trigger: The linear-gradient GLSL (`gradientProgress`, `mix(uStartColor, uEndColor, ...)`) is rejected by the GPU driver — typically an incomplete or buggy WebGL2 implementation, a GLSL ES 3.00 parser bug, or a context that silently lost shader support after a GPU process crash.

Common situations: Older mobile GPU drivers, virtual-display CI machines with mesa/software rasterizers that lack full GLSL ES 3.00, a Chrome GPU process that crashed mid-session leaving a zombie context, or a remote desktop/VNC session with feature-poor GL.

Related errors

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

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