remotion-dev/remotion · error

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

Error message

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

What it means

@remotion/effects' Tear effect compiles its GLSL vertex/fragment shaders with gl.compileShader() when the effect is first instantiated. If the GPU driver's shader compiler rejects the source (gl.COMPILE_STATUS false), the shader is deleted and this error is thrown with the driver's info log appended (or '(no log)' if the driver returned none). It means the shader source was invalid for this WebGL2 context/driver, not a problem with your video or props.

Source

Thrown at packages/effects/src/tear.ts:193

}
`;

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(`Tear 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 b2f4e34732)

Solutions

1. Read the appended log in the message to see the exact GLSL compile error and offending line
2. Update GPU drivers / browser to a current version
3. If headless, switch to a real GPU or a newer Chrome with working ANGLE/SwiftShader
4. Check the context was created as 'webgl2' without attributes that downgrade the shader version
5. Report the driver/log to Remotion if the shader fails on up-to-date setups

Example fix

// before (headless CI with broken software GL)
const canvas = document.createElement('canvas');
// after (force hardware-accelerated GL flags when launching the browser)
// chrome --use-angle=default --enable-unsafe-swiftshader=false

const gl = canvas.getContext('webgl2');
if (!gl) throw new Error('WebGL2 not supported in this environment');
const probe = gl.createShader(gl.VERTEX_SHADER);
if (!probe) throw new Error('GL shader objects unavailable');
gl.shaderSource(probe, '#version 300 es\nvoid main(){}');
gl.compileShader(probe);
const ok = gl.getShaderParameter(probe, gl.COMPILE_STATUS);
gl.deleteShader(probe);
if (!ok) throw new Error('GLSL ES 3.00 unsupported: ' + gl.getShaderInfoLog(probe));

function isWebGL2Healthy(gl: WebGL2RenderingContext): boolean {
  return !gl.isContextLost() && typeof gl.createShader === 'function';
}

try {
  renderWithTear(...);
} catch (err) {
  if (err instanceof Error && err.message.startsWith('Tear shader compile failed')) {
    // fall back to a CPU/canvas effect or skip the effect for this frame
    console.warn('GLSL compile failed on this driver:', err.message);
  } else throw err;
}

When it happens

Trigger: Calling the Tear effect (directly or via <Tear>) on a machine whose WebGL2 driver fails to compile the effect's built-in #version 300 es GLSL shaders — e.g. driver GLSL compiler bugs, a context forced to a lower GLSL version via getContext attributes, or ANGLE/driver quirks on outdated GPU drivers.

Common situations: Running headless rendering or CI with SwiftShader/llvmpipe software GL that mishandles GLSL ES 3.00; outdated or buggy GPU drivers (especially older Intel/ANGLE combos); creating the canvas context with non-default options; browser/GPU driver regressions after an update.

Related errors

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

AI-assisted analysis of remotion-dev/remotion@b2f4e34732 (2026-09-09). Data as JSON: /api/errors/272a0fceb451e90b. Report an issue: GitHub.