remotion-dev/remotion · error · Error

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

Error message

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

What it means

While setting up the outline() effect, gl.compileShader() reported failure and the driver info log is included in the message. The vertex/fragment shaders (OUTLINE_VS/OUTLINE_FS) are fixed strings shipped inside @remotion/effects - the user supplies no GLSL - so a compile failure almost always indicates a broken/lost WebGL2 context or a driver bug, not a bad effect parameter.

Source

Thrown at packages/effects/src/outline.ts:237

}
`;

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(`Outline shader compile failed: ${log ?? '(no log)'}`);
	}

	return shader;
};

const createProgram = (gl: WebGL2RenderingContext): WebGLProgram => {
	const vertexShader = compileShader(gl, gl.VERTEX_SHADER, OUTLINE_VS);
	const fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, OUTLINE_FS);
	const program = gl.createProgram();
	if (!program) {
		throw new Error('Failed to create WebGL program');
	}

	gl.attachShader(program, vertexShader);
	gl.attachShader(program, fragmentShader);
	gl.linkProgram(program);
	gl.deleteShader(vertexShader);
	gl.deleteShader(fragmentShader);

View on GitHub (pinned to 10db9de073)

Solutions

1. Re-run the render / restart Chrome - transient compiler failures usually disappear on a fresh context
2. Update to the latest Chrome/Chromium (Remotion bundles its own; also update @remotion/renderer) and GPU drivers
3. Read the driver log in the message - 'context lost' confirms error 62's family; 'too many shaders' style logs point to context exhaustion (lower --concurrency)
4. If deterministic, report to the Remotion repo with the full log text and Chrome version

// Capture the driver log and fall back to rendering without the effect
try {
  await renderMedia({composition, codec: 'h264'});
} catch (err) {
  if (
    err instanceof Error &&
    err.message.startsWith('Outline shader compile failed:')
  ) {
    console.error('Shader compiler issue:', err.message);
    // retry with a CSS-based outline (box-shadow) composition instead
    await renderMedia({composition: fallbackComposition, codec: 'h264'});
  } else {
    throw err;
  }
}

When it happens

Trigger: Applying outline() on a WebGL2 context whose shader compiler is unavailable or broken (context lost mid-setup, driver shader-compiler crash, SwiftShader bug in headless Chrome). The log text after 'Outline shader compile failed:' is the driver's own reason.

Common situations: Headless/server Chrome with faulty GPU or SwiftShader shader compilation; GPU blocklisted in the running Chrome build; long renders where the context degrades. Rare on healthy desktop Chrome.

Related errors

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

AI-assisted analysis of remotion-dev/remotion@10db9de073 (2026-08-22). Data as JSON: /api/errors/97de768ccf5b0310. Report an issue: GitHub.