remotion-dev/remotion · error · Error

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

Error message

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

What it means

Thrown by compileShader in pixelate.ts when gl.getShaderParameter(shader, gl.COMPILE_STATUS) is false after gl.compileShader. The shader source is hardcoded by the library, so a compile failure means the GLSL ES 3.00 source is rejected by the specific driver/implementation, not that the user wrote bad GLSL. The info log is captured before the shader is deleted and included in the message.

Source

Thrown at packages/effects/src/pixelate.ts:95

}
`;

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(`Pixelate 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 interpolated info log in the error message — it names the line and the GLSL error, which tells you whether it is a driver quirk or a library bug.
2. Reproduce in stable desktop Chrome; if it works there, the rendering environment (Lambda/CI/mobile) is the cause.
3. On Lambda, ensure you use the bundled Chrome for Testing layer rather than a custom Chromium that strips GLSL support.
4. Update the GPU driver or switch to SwiftShader software rendering consistently.
5. If the log shows a real GLSL error, file a Remotion issue with the full log and effect version — the shipped shader source is wrong.

Example fix

// before
import {pixelate} from '@remotion/effects';
const effect = pixelate();
// throws 'Pixelate shader compile failed: ERROR: 0:1: ...'

// after — capture the driver info log for diagnosis
try {
  const effect = pixelate();
} catch (err) {
  console.error('pixelate GLSL compile failed; driver info:', (err as Error).message);
  console.error('webgl renderer:', document.createElement('canvas').getContext('webgl2')?.getParameter(/* UNMASKED_RENDERER */ 0x9246 as number));
}

try {
  pixelate();
} catch (err) {
  const msg = (err as Error).message;
  if (msg.startsWith('Pixelate shader compile failed')) {
    const dbg = canvas.getContext('webgl2')?.getExtension('WEBGL_debug_renderer_info');
    const renderer = dbg && canvas.getContext('webgl2')?.getParameter(dbg.UNMASKED_RENDERER_WEBGL);
    console.error(msg, 'renderer:', renderer);
    // fall back to a non-GPU pipeline or escalate to the user
  }
  throw err;
}

When it happens

Trigger: pixelate setup compiles VERTEX_SHADER or FRAGMENT_SHADER (both `#version 300 es`); the driver reports COMPILE_STATUS=false and returns a non-empty info log. The thrown message interpolates that log verbatim.

Common situations: A GPU/driver that does not fully support GLSL ES 3.00 (rare on modern Chrome but possible on old mobile GPUs or stripped virtual GPUs); a Chrome flag or SwiftShader build with restricted shader support; corruption from a custom Chrome for Testing build; very rarely, a library regression that shipped invalid GLSL.

Related errors

• Pixelate program link failed: ${log ?? '(no log)'}
• Progressive pixelate shader compile failed: ${log ?? '(no lo
• Linear gradient shader compile failed: ${log ?? '(no log)'}
• Linear gradient program link failed: ${log ?? '(no log)'}
• Linear progressive blur shader compile failed: ${log ?? '(no

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