remotion-dev/remotion · error · Error

Unknown shader compile error

Error message

Unknown shader compile error

What it means

When the white noise shader fails gl.COMPILE_STATUS, the effect reads gl.getShaderInfoLog for diagnostics; if that too returns null it throws the literal message 'Unknown shader compile error'. Since the shader source is a fixed library constant, a compile failure with no info log indicates a driver/GPU fault (out of memory during compile, broken compiler, lost context) rather than bad GLSL or a user parameter.

Source

Thrown at packages/effects/src/white-noise.ts:118

`;

const compileShader = (
	gl: WebGL2RenderingContext,
	type: number,
	source: string,
): WebGLShader => {
	const shader = gl.createShader(type);
	if (!shader) {
		throw new Error('Failed to create shader');
	}

	gl.shaderSource(shader, source);
	gl.compileShader(shader);

	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
		const info = gl.getShaderInfoLog(shader) ?? 'Unknown shader compile error';
		gl.deleteShader(shader);
		throw new Error(info);
	}

	return shader;
};

const createProgram = (
	gl: WebGL2RenderingContext,
	vertexSource: string,
	fragmentSource: string,
): WebGLProgram => {
	const vertex = compileShader(gl, gl.VERTEX_SHADER, vertexSource);
	const fragment = compileShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
	const program = gl.createProgram();
	if (!program) {
		throw new Error('Failed to create program');
	}

	gl.attachShader(program, vertex);

View on GitHub (pinned to 78fe4bb3fd)

Solutions

  1. Render with Remotion's bundled Chromium which ships a known-good software-GPU (SwiftShader) build, instead of a system browser with an older/broken GL compiler.
  2. Update GPU drivers or switch rendering host to one with a conformant WebGL2 shader compiler.
  3. Reduce concurrent effects so shader compilation is not starved of memory.
  4. Confirm the context is not lost before rendering (isContextLost()); re-mount on webglcontextlost.
  5. Report a driver bug if the failure reproduces only on one GPU vendor.
Defensive patterns

Strategy: try-catch

Validate before calling

// No caller-side guard can prevent a driver shader-compiler failure with no log.
// Best pre-check: confirm a healthy context and known-good renderer string.
const gl = document.createElement('canvas').getContext('webgl2');
if (gl) {
  const renderer = gl.getParameter(gl.RENDERER);
  // SwiftShader/known-good renderers compile the library shaders reliably.
}

Type guard

const isKnownGoodRenderer = (): boolean => {
  const gl = document.createElement('canvas').getContext('webgl2');
  if (!gl || gl.isContextLost()) return false;
  const r = String(gl.getParameter(gl.RENDERER));
  return /SwiftShader|ANGLE|NVIDIA|Intel|AMD|Radeon/i.test(r);
};

Try / catch

try {
  return <VideoEffects effects={[whiteNoise({amount: 0.4})]} />;
} catch (err) {
  if (err instanceof Error && err.message === 'Unknown shader compile error') {
    // driver failed silently: fall back to no effect and flag the environment
    return <Video />;
  }
  throw err;
}

Prevention

When it happens

Trigger: compileShader in white-noise.ts: getShaderParameter(COMPILE_STATUS) is false AND getShaderInfoLog returns null/empty, so the fallback string is thrown.

Common situations: A GPU driver whose shader compiler silently fails (common with some SwiftShader builds or outdated mobile drivers); shader compilation interrupted by context loss; extremely constrained GPU memory during compile; rare GLSL-ES 3.00 gaps in a software renderer.

Related errors


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