What causes "Noise displacement shader compile failed: ${log ?? '(no log)'}" in remotion-dev/remotion?

Report the issue to Remotion with the full compile log and GPU/driver details — the shader is library-controlled.

remotion-dev/remotion · critical · Error

Noise displacement shader compile failed: ${log ?? '(no log)

Error message

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

What it means

The noiseDisplacement effect's GLSL shader source (NOISE_DISPLACEMENT_VS or NOISE_DISPLACEMENT_FS) failed to compile on the target GPU. The message includes the GLSL compiler log. The shader source is static within @remotion/effects, so this indicates a GPU driver incompatibility or a library-level shader bug — not a user parameter error.

Source

Thrown at packages/effects/src/noise-displacement.ts:413

}
`;

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(
			`Noise displacement 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);

View on GitHub (pinned to 78fe4bb3fd)

Solutions

Report the issue to Remotion with the full compile log and GPU/driver details — the shader is library-controlled.
Update GPU drivers to the latest version.
Test with SwiftShader or a different GPU to isolate driver-specific issues.
On CI, ensure the headless Chrome build supports WebGL2 shader compilation.

Defensive patterns

Strategy: try-catch

Try / catch

// Shader compile failures are library/driver bugs — catch and report
try {
  // render with noiseDisplacement effect
} catch (e) {
  if (e instanceof Error && e.message.startsWith('Noise displacement shader compile failed')) {
    console.error('Noise displacement shader compile failed:', e.message);
    // Fallback: render without the effect
  } else {
    throw e;
  }
}

Prevention

Keep GPU drivers updated in render environments.
The noiseDisplacement fragment shader is complex (noise, loops, arrays) — test on target GPUs before production use.
Report shader compile logs to the Remotion team so library bugs can be addressed.

When it happens

Trigger: During setupNoiseDisplacement, gl.compileShader runs on NOISE_DISPLACEMENT_VS or NOISE_DISPLACEMENT_FS and gl.getShaderParameter(shader, gl.COMPILE_STATUS) returns false. The fragment shader is complex (noise functions, loops, arrays) and more likely to expose driver bugs.

Common situations: GPU drivers with incomplete WebGL2 GLSL ES 3.00 support; buggy drivers that reject valid array/loop constructs; outdated drivers; software rasterizers with limited shader support; very old GPU hardware.

Related errors

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