remotion-dev/remotion · error · Error

Pixelate shader compile failed

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.

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
• Progressive pixelate shader compile failed
• Linear gradient program link failed
• Linear gradient shader compile failed
• Linear progressive blur shader compile failed

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

Appendix: 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)