remotion-dev/remotion · error · Error

Halftone linear gradient shader compile failed: ${log ?? '(n

Error message

Halftone linear gradient shader compile failed: ${log ?? '(no log)'}

What it means

Thrown by halftone-linear-gradient's compileShader when the shader compiled but COMPILE_STATUS is false. The driver info log is appended, so the message pinpoints the GLSL problem. Since the vertex/fragment sources are hardcoded GLSL ES 3.00, a compile failure usually reflects an environment/driver limitation rather than a user parameter.

Source

Thrown at packages/effects/src/halftone-linear-gradient.ts:384

	cachedColorRgba: ParsedColorRgba;
};

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(
			`Halftone linear gradient 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 appended info log to find the offending GLSL line/feature.
2. Reproduce in current desktop Chrome with hardware acceleration to confirm the shader compiles there.
3. For headless, use a headless shell with a functional WebGL2 backend (e.g. --use-gl=angle --use-angle=swiftshader) and keep it current.
4. Update GPU drivers / ANGLE; address any blocklist entry.

Example fix

// before: headless without WebGL2 compiler -> 'Halftone linear gradient shader compile failed: ...'
chrome --headless --disable-gpu

// after: provide a conformant WebGL2 software backend
chrome --headless=new --use-gl=angle --use-angle=swiftsoftware

const gl = canvas.getContext('webgl2');
if (!gl || gl.isContextLost()) {
  throw new Error('No healthy WebGL2 context for halftone shader compile');
}

null

try {
  halftoneLinearGradient.setup(canvas);
} catch (e) {
  if (e instanceof Error && e.message.startsWith('Halftone linear gradient shader compile failed')) {
    // read the GLSL log, switch to a conformant backend / update drivers
  }
  throw e;
}

When it happens

Trigger: Setup-time compile of HALFTONE_LINEAR_GRADIENT_VS/FS under a WebGL2 context whose driver rejects the GLSL. Typical logs cite an unsupported version directive, precision/qualifier errors, or a missing built-in on a buggy driver; in headless setups it often means WebGL2 is reported but not actually backed by a conformant compiler.

Common situations: Headless Chrome without a real WebGL2 backend; outdated mobile GPU drivers; ANGLE/SwiftShader version mismatch; a GPU on the browser blocklist being used; a browser extension interfering with the GLSL compiler.

Related errors

• Failed to create WebGL shader
• Checkerboard shader compile failed: ${log ?? '(no log)'}
• Failed to create WebGL shader
• Shader compile failed: ${log ?? '(no log)'}
• Duotone shader compile failed: ${log ?? '(no log)'}

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