remotion-dev/remotion · error · Error

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

Error message

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

What it means

Thrown by `compileShader` when `gl.getShaderParameter(shader, gl.COMPILE_STATUS)` is falsy — the GLSL source failed to compile. The shader's info log is read via `gl.getShaderInfoLog`, the shader is deleted, and the log (or '(no log)') is included in the message. This is a GLSL syntax/type/linking-attribute error in the shader source.

Source

Thrown at packages/effects/src/barrel-distortion/barrel-distortion-runtime.ts:36

	};
};

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(`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 info log in the error message — it names the line and the GLSL error.
2. Fix the reported GLSL line in the shader source and rebuild the effects package.
3. Validate GLSL against the target version (GLSL ES 3.00 for WebGL2) using a tool like glslang before running.
4. If the log says '(no log)', suspect a driver/context issue — test on another GPU/browser.

Example fix

// before (shader had a type mismatch)
uniform float uAmount; // used as vec2 elsewhere

// after
uniform vec2 uAmount;

// offline GLSL validation before runtime
const validateShader = (gl: WebGL2RenderingContext, type: number, src: string) => {
  const s = gl.createShader(type)!;
  gl.shaderSource(s, src); gl.compileShader(s);
  const ok = gl.getShaderParameter(s, gl.COMPILE_STATUS);
  const log = gl.getShaderInfoLog(s);
  gl.deleteShader(s);
  return ok ? null : log;
};

const compiles = (gl: WebGL2RenderingContext, type: number, src: string): boolean => {
  const s = gl.createShader(type); if (!s) return false;
  gl.shaderSource(s, src); gl.compileShader(s);
  const ok = Boolean(gl.getShaderParameter(s, gl.COMPILE_STATUS));
  gl.deleteShader(s); return ok;
};

try {
  compileShader(gl, type, src);
} catch (e) {
  console.error('GLSL error:', String(e)); // log contains the line
  throw e;
}

When it happens

Trigger: The barrel-distortion vertex or fragment shader source (BARREL_DISTORTION_VS / BARREL_DISTORTION_FS) contains a GLSL error, or a modified/custom shader source is invalid for the GLSL ES version targeted by the WebGL2 context. The compiler rejects it and the info log is surfaced.

Common situations: Editing the barrel-distortion shaders and introducing a syntax/type error; using a GLSL ES 3.00 feature inconsistently; a typo in a uniform/attribute name; a driver-specific GLSL quirk rejecting valid-looking code.

Related errors

• Failed to create WebGL shader
• Failed to create WebGL program
• Failed to create WebGL shader
• Checkerboard shader compile failed: ${log ?? '(no log)'}
• Failed to create WebGL program

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