remotion-dev/remotion · critical · Error

Metallic swirl shader compile failed

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.

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
• Failed to create WebGL buffer
• Failed to create WebGL program
• Failed to create WebGL shader
• Failed to create WebGL vertex array

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

Appendix: 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)