remotion-dev/remotion · error · Error

Failed to create WebGL shader

Error message

Failed to create WebGL shader

What it means

Zigzag's shader pipeline starts by allocating a shader object via gl.createShader; if the GL context returns null the effect cannot compile its (constant) vertex/fragment sources and throws. As with all null-resource throws here, this is a context/resource failure — the GLSL itself is fixed and valid, so the cause is a lost context, shader-object limit, or software renderer.

Source

Thrown at packages/effects/src/zigzag.ts:349

		);
		return;
	}

	fragColor = vec4(
		premultipliedLine + texColor.rgb * (1.0 - lineAlpha),
		lineAlpha + texColor.a * (1.0 - lineAlpha)
	);
}
`;

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

	return shader;
};

const linkProgram = (
	gl: WebGL2RenderingContext,
	vs: WebGLShader,
	fs: WebGLShader,
): WebGLProgram => {

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Confirm WebGL2 is available and the context is not lost before applying zigzag().
2. Render with Remotion's bundled Chromium (CLI/Lambda) which configures the software GPU correctly; avoid --disable-gpu.
3. Reduce concurrently-active WebGL effects to free GL object slots.
4. Re-mount the composition on webglcontextlost so setup re-runs.
5. Update GPU drivers or switch render host.

const gl = document.createElement('canvas').getContext('webgl2');
const webglOk = gl != null && gl.createShader(gl.VERTEX_SHADER) != null && !gl.isContextLost();

const canAllocateShader = (): boolean => {
  const gl = document.createElement('canvas').getContext('webgl2');
  return gl != null && !gl.isContextLost() && gl.createShader(gl.VERTEX_SHADER) != null;
};

try {
  return <VideoEffects effects={[zigzag({colors: ['#ff0000', '#00ff00']})]} />;
} catch (err) {
  if (err instanceof Error && err.message === 'Failed to create WebGL shader') {
    return <Video />; // GPU shader allocation failed; skip the effect
  }
  throw err;
}

When it happens

Trigger: setupZigzag -> createProgram -> compileShader calls gl.createShader(type) and receives null on the first zigzag frame.

Common situations: Headless render without working WebGL2/GPU; many concurrent effects exhausting shader-object slots; context lost before compile; VM/Remote-Desktop GPU forwarding missing shader allocation.

Related errors

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

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