remotion-dev/remotion · critical · Error

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

Error message

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

What it means

Thrown by compileShader (packages/effects/src/paper.ts:665) when the hardcoded PAPER_VS or (more commonly) PAPER_FS fails gl.COMPILE_STATUS; the info log is appended. PAPER_FS is substantial GLSL ES 3.00 using derivatives (fwidth), dynamic loops, and texture-array lookups, so a compile failure on these correct sources means a driver bug, outdated GPU driver, or an incomplete WebGL2 implementation.

Source

Thrown at packages/effects/src/paper.ts:665

}
`;

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

  1. Update the GPU driver on the render host to a version with complete WebGL2/GLSL ES 3.00 and derivative support.
  2. Render on real GPU hardware or GPU-enabled headless Chrome.
  3. Forward the appended info log upstream and disable paper() for that environment.

Example fix

// before
paper({amount: 1}); // PAPER_FS fails to compile on this driver

// after: probe paper-shader compilation once per host, fall back if it fails
const ok = await probePaperShaderCompiles();
const effects = ok ? [paper({amount: 1})] : [];
Defensive patterns

Strategy: fallback

Validate before calling

// One-time per host: compile a GLSL ES 3.00 shader using derivatives to verify the driver
async function hostSupportsPaperShader(): Promise<boolean> {
  try {
    const c = document.createElement('canvas');
    const gl = c.getContext('webgl2');
    if (!gl) return false;
    const s = gl.createShader(gl.FRAGMENT_SHADER);
    if (!s) return false;
    gl.shaderSource(s, '#version 300 es\nprecision highp float;\nout vec4 f;\nvoid main(){float d=fwidth(gl_FragCoord.x);f=vec4(d);}');
    gl.compileShader(s);
    const ok = !!gl.getShaderParameter(s, gl.COMPILE_STATUS);
    gl.deleteShader(s);
    return ok;
  } catch {
    return false;
  }
}

Try / catch

try {
  scene.push(paper({amount: 1}));
} catch (err) {
  if (/Paper shader compile failed/.test(String(err?.message))) {
    // driver cannot compile PAPER_FS: render without paper on this host
  } else throw err;
}

Prevention

When it happens

Trigger: Rendering or previewing paper() on a GPU/driver that mis-compiles GLSL ES 3.00 or lacks standard-derivatives support in hardware; running under a software rasterizer with partial WebGL2; context corruption producing a false compile error.

Common situations: Older integrated GPUs; outdated drivers; VM/remote display adapters; headless software WebGL that does not fully implement GLSL ES 3.00.

Related errors


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