What causes "Vignette shader compile failed: ${log ?? '(no log)'}" in remotion-dev/remotion?

Reload the page/Studio to reset context and retry compile.

remotion-dev/remotion · error · Error

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

Error message

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

What it means

Thrown by vignette's compileShader when gl.getShaderParameter(COMPILE_STATUS) is false after gl.compileShader. The shader info log is appended (or '(no log)'). Because vignette's GLSL ES 3.00 shaders are hardcoded library constants, a compile failure almost always points to a driver bug, context loss, or a GPU that does not support the required GLSL features rather than user input.

Source

Thrown at packages/effects/src/vignette.ts:277

}
`;

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(`Vignette 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

Reload the page/Studio to reset context and retry compile.
Update GPU drivers / enable hardware WebGL2 acceleration.
For server rendering, confirm the Chrome/GPU combo passes WebGL2 conformance.
Capture the appended info log and report it against @remotion/effects with driver details if it persists.

Example fix

// before
const effect = vignette({amount: 0.6});

// after - degrade to the unprocessed source on compile failure
const effect = (() => {
  try { return vignette({amount: 0.6}); } catch (err) { console.warn(err); return null; }
})();

Defensive patterns

Strategy: try-catch

Try / catch

let effect = null;
try {
  effect = vignette({amount: 0.6});
} catch (err) {
  console.warn('vignette shader compile failed (driver/GPU issue), skipping', err);
}

Prevention

Keep GPU drivers current so the hardcoded GLSL compiles.
Use hardware-accelerated WebGL2; avoid software rendering where the shader may be rejected.
Handle context loss and rebuild effects on restore.
Reduce concurrent shader-heavy effects to avoid compile-time context loss.

When it happens

Trigger: createProgram compiles the internal VIGNETTE_VS / VIGNETTE_FS sources; the driver returns COMPILE_STATUS false. Triggers include a buggy driver, context loss during compile, or a GPU/driver lacking GLSL ES 3.00 support.

Common situations: Outdated GPU drivers; software/SwiftShader rendering that mishandles the shader; context loss mid-setup in Studio; VMs without proper GL 3.0 ES support.

Related errors

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