remotion-dev/remotion · critical · Error

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

Error message

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

What it means

In `compileShader`, `gl.compileShader` ran but `gl.getShaderParameter(shader, gl.COMPILE_STATUS)` is false. The message includes the GLSL info log. The shipped VERTEX_SHADER and FRAGMENT_SHADER sources are fixed, so in normal use this should not occur; it indicates a driver/GSL bug, a corrupted shader source, or an unsupported GLSL ES 3.00 feature on the target GPU.

Source

Thrown at packages/brand/src/effects/metallic-swirl-effect.ts:470

}
`;

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(
			`Metallic swirl 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

1. Read the full info log in the error message to see the GLSL line the driver rejected.
2. Update GPU drivers / switch to a hardware-accelerated browser.
3. If you forked the shader source, validate the GLSL ES 3.00 syntax (the effect targets WebGL2).
4. Report the driver/GPU + log to the Remotion maintainers if using unmodified sources.

try {
  metallicSwirl({speed: 1})(...);
} catch (err) {
  if (err instanceof Error && /Metallic swirl shader compile failed/.test(err.message)) {
    // log the GLSL info log, fall back to a different effect
    console.error(err.message);
  } else {
    throw err;
  }
}

When it happens

Trigger: Running on a GPU/driver whose GLSL ES 3.00 compiler rejects the fixed shader (rare driver bug); a corrupted build where FRAGMENT_SHADER/VERTEX_SHADER strings were mangled; a WebGL2 context that is actually a downgraded implementation.

Common situations: Older mobile GPUs; buggy driver versions; content-security or transpiler pipelines that mangle template literal shaders; rendering on a virtual GPU.

Related errors

• Metallic swirl program link failed: ${log ?? '(no log)'}
• Failed to create WebGL shader
• Failed to create WebGL program
• Failed to create WebGL vertex array
• Failed to create WebGL buffer

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