remotion-dev/remotion · error · Error

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

Error message

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

What it means

After gl.createShader() succeeded, the skew() effect's GLSL ES 3.00 shader failed to compile and gl.getShaderParameter(shader, gl.COMPILE_STATUS) returned false. The library deletes the bad shader and throws, embedding the driver's info log. Because the shaders are hardcoded library-internal strings (SKEW_VS/SKEW_FS), a compile failure almost always indicates a non-conformant WebGL2 implementation rather than a caller mistake.

Source

Thrown at packages/effects/src/skew.ts:172

}
`;

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

	return shader;
};

const setupSkew = (target: HTMLCanvasElement): SkewState => {
	const gl = target.getContext('webgl2', {
		premultipliedAlpha: true,
		alpha: true,
		preserveDrawingBuffer: true,
	});
	if (!gl) {
		throw createWebGL2ContextError('skew effect');
	}

	gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
	const vertexShader = compileShader(gl, gl.VERTEX_SHADER, SKEW_VS);
	const fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, SKEW_FS);

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Force the ANGLE backend (--gl=angle / chromiumOptions.gl='angle' / Studio OpenGL=angle), which provides a conformant GLSL ES 3.00 compiler via D3D/Vulkan translation.
2. Read the info log embedded in the error message to confirm it is a compiler/feature gap, then upgrade or replace the GPU driver.
3. Run the render on a host with a real, supported GPU or a known-good ANGLE build.
4. If unavoidable, replace the skew effect with a CSS transform-based skew for that composition as a temporary workaround.

Example fix

// before
npx remotion render main MyComp out.mp4
// error: Skew shader compile failed: ERROR: ... GLSL ES 3.00 ...

// after
npx remotion render main MyComp out.mp4 --gl=angle

// Skew shaders are library-internal, so no caller-side source validation helps.
// The only useful pre-check is WebGL2 + GLSL ES 3.00 capability:
function supportsGLSL300(): boolean {
  const c = document.createElement('canvas');
  const gl = c.getContext('webgl2');
  if (!gl) return false;
  const s = gl.createShader(gl.VERTEX_SHADER);
  if (!s) return false;
  gl.shaderSource(s, '#version 300 es\nvoid main(){}');
  gl.compileShader(s);
  return gl.getShaderParameter(s, gl.COMPILE_STATUS) === true;
}

try {
  await renderMedia({ composition, codec: 'h264', chromiumOptions: { gl: 'angle' } });
} catch (err) {
  if (err instanceof Error && /Skew shader compile failed/.test(err.message)) {
    console.error('skew() GLSL compile failed — driver lacks GLSL ES 3.00 support:', err.message);
    // fall back to a CSS-transform skew, or switch the GL backend and retry
    throw err;
  }
  throw err;
}

When it happens

Trigger: Running skew() against a WebGL2 context whose driver does not truly support GLSL ES 3.00 (#version 300 es), or that rejects the precision/in/out qualifiers used by the shader. The driver's info log (appended to the message) names the offending line/feature.

Common situations: Software rasterizers (SwiftShader, llvmpipe) with incomplete GLSL ES 3.00 support; outdated or blacklisted GPU drivers; virtualized remoting/headless environments stripping WebGL2 capabilities; a Remotion upgrade that introduced a GLSL construct an old driver cannot parse.

Related errors

• Skew program link failed: ${log ?? '(no log)'}
• Noise shader compile failed: ${log ?? '(no log)'}
• Paper shader compile failed: ${log ?? '(no log)'}
• Speckle shader compile failed: ${log ?? '(no log)'}
• Speckle program link failed: ${log ?? '(no log)'}

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