remotion-dev/remotion · critical · Error

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

Error message

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

What it means

Thrown by compileShader (packages/effects/src/noise.ts:156) when the hardcoded NOISE_VS or NOISE_FS fails gl.COMPILE_STATUS; the info log is appended. The shaders are valid GLSL ES 3.00 (#version 300 es), so a compile failure means the WebGL2 driver/implementation rejects correct source — a driver bug, outdated GPU driver, or an incomplete WebGL2 implementation.

Source

Thrown at packages/effects/src/noise.ts:156

}
`;

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 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. Update the GPU driver on the render host to a version with complete WebGL2/GLSL ES 3.00 support.
2. Render on real GPU hardware (or GPU-enabled headless Chrome) rather than a software rasterizer.
3. Capture gl.getShaderInfoLog from the error message and file it against the driver/browser; switch effect off for that environment in the meantime.

Example fix

// before: noise() renders, driver rejects the shader -> render aborts
noise({amount: 0.2});

// after: gate the effect on a one-time shader-compile probe for this host
import {noise} from '@remotion/effects';
const supports = await probeNoiseShaderCompiles(); // compile NOISE_FS once
const effects = supports ? [noise({amount: 0.2})] : [];

// One-time per host: compile a minimal GLSL ES 3.00 shader to see if the driver accepts it
async function hostSupportsNoiseShader(): Promise<boolean> {
  try {
    const c = document.createElement('canvas');
    const gl = c.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 f;\nvoid main(){f=vec4(1.0);}');
    gl.compileShader(s);
    const ok = !!gl.getShaderParameter(s, gl.COMPILE_STATUS);
    gl.deleteShader(s);
    return ok;
  } catch {
    return false;
  }
}

try {
  scene.push(noise({amount: 0.2}));
} catch (err) {
  if (/Noise shader compile failed/.test(String(err?.message))) {
    // driver cannot compile the shader: render without noise on this host
  } else throw err;
}

When it happens

Trigger: Rendering or previewing noise() on a machine whose GPU driver mis-compiles GLSL ES 3.00; running under a software rasterizer with partial WebGL2 support; a transient context corruption producing a bogus compile error.

Common situations: Outdated or buggy GPU drivers (especially older integrated GPUs and some VM display drivers); headless software WebGL that does not fully implement GLSL ES 3.00; rendering in a remote/VNC session with a fake GPU.

Related errors

• Noise program link failed: ${log ?? '(no log)'}
• Paper shader compile failed: ${log ?? '(no log)'}
• Skew shader compile failed: ${log ?? '(no log)'}
• Skew program link failed: ${log ?? '(no log)'}
• Speckle shader compile failed: ${log ?? '(no log)'}

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