remotion-dev/remotion · error · Error

Failed to compile shader: ${log}

Error message

Failed to compile shader: ${log}

What it means

After compiling a shader, compileShader checks gl.COMPILE_STATUS. If the GLSL source failed to compile, the shader is deleted and the WebGL info log is thrown as 'Failed to compile shader: <log>'. The log identifies the GLSL syntax/semantic problem.

Source

Thrown at packages/transitions/src/presentations/blur-slide.tsx:113

	outColor = color / float(SAMPLES);
}`;

const compileShader = (
	gl: WebGL2RenderingContext,
	source: string,
	type: number,
): 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 log = gl.getShaderInfoLog(shader);
		gl.deleteShader(shader);
		throw new Error(`Failed to compile shader: ${log}`);
	}

	return shader;
};

const createProgram = (
	gl: WebGL2RenderingContext,
	fragmentShader: string,
): WebGLProgram => {
	const program = gl.createProgram();
	if (!program) {
		throw new Error('Failed to create WebGL program');
	}

	const vs = compileShader(gl, VERTEX_SHADER, gl.VERTEX_SHADER);
	const fs = compileShader(gl, fragmentShader, gl.FRAGMENT_SHADER);
	gl.attachShader(program, vs);
	gl.attachShader(program, fs);

View on GitHub (pinned to b2f4e34732)

Solutions

1. Read the attached log in the message — it names the GLSL line and error; fix the shader source accordingly.
2. Update GPU drivers or try another browser, since GLSL compilers differ between vendors.
3. If you customized the blur-slide shader, revert to the stock @remotion/transitions source.
4. Verify the shader uses valid GLSL ES 3.00 syntax (#version 300 es) matching the WebGL2 pipeline.

const vs = compileShader(gl, vertexSrc, gl.VERTEX_SHADER); // throws with GLSL log
// pre-validate sources are non-empty and contain '#version 300 es':
if (!vertexSrc.trim().startsWith('#version 300 es')) throw new Error('shader missing GLSL ES 3.00 header');

try {
  program = createProgram(gl, vertexSrc, fragmentSrc);
} catch (e) {
  if (e.message.startsWith('Failed to compile shader:')) {
    console.error('GLSL log:', e.message);
    program = useStockBlurSlideShader(gl); // revert to bundled source
  } else throw e;
}

When it happens

Trigger: BlurSlide transition shader source contains GLSL errors (bad syntax, unsupported GLSL ES 3.0 features, wrong precision qualifiers) causing gl.compileShader to fail.

Common situations: GPU driver-specific GLSL compiler strictness, modified/custom shader code with typos, running on hardware whose GLSL compiler rejects a construct accepted elsewhere.

Related errors

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

AI-assisted analysis of remotion-dev/remotion@b2f4e34732 (2026-09-09). Data as JSON: /api/errors/67d56afcdb3b4ebb. Report an issue: GitHub.