remotion-dev/remotion · error · Error

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

Error message

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

What it means

The `rings()` effect's GLSL shader failed to compile. The vertex and fragment shaders (`RINGS_VS` / `RINGS_FS`) are static string literals bundled with the effect, so under normal circumstances this never fires. A compile failure indicates the running WebGL2 driver rejected the GLSL ES 3.00 source — typically a non-conformant driver, a corrupted build (effect source string was modified), or a context that silently lost its compiler after a GPU reset.

Source

Thrown at packages/effects/src/rings.ts:286

}
`;

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(`Rings 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. Run on a WebGL2-conformant browser/GPU (recent desktop Chrome/Firefox/Safari with hardware acceleration enabled).
2. Verify you are using an unmodified `@remotion/effects` build (reinstall if the package may have been patched).
3. Handle `webglcontextlost` on the canvas and re-create the effect after `webglcontextrestored`.
4. If it persists, capture `gl.getShaderInfoLog()` (already in the message) and report it with the renderer string to the Remotion repo.

try {
  rings()({...});
} catch (err) {
  if (err instanceof Error && /Rings shader compile failed/.test(err.message)) {
    // capture err.message (contains the GLSL info log) for the bug report
    // fall back to rendering without the effect
  } else {
    throw err;
  }
}

When it happens

Trigger: Running on a GPU/driver that does not fully implement GLSL ES 3.00 (some older mobile GPUs, remote-desktop virtual GPUs, or buggy software rasterizers); loading a custom/patched build of `@remotion/effects` where the shader template literal was accidentally mutated; compiling after a `webglcontextlost` event that was not properly handled.

Common situations: CI on a virtualized GPU; rendering on a headless server via Xvfb; outdated mobile WebView; a fork of the effects package with hand-edited shader code.

Related errors

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

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