remotion-dev/remotion · error · Error

Failed to create WebGL shader

Error message

Failed to create WebGL shader

What it means

Thrown by compileShader() (used by the checkerboard effect) when gl.createShader(type) returns null. A null shader object means the WebGL2 context cannot allocate a new shader — the context is lost, the GPU process crashed, or the shader object budget is exhausted. Compilation cannot even be attempted, so program creation aborts.

Source

Thrown at packages/effects/src/checkerboard.ts:279

		);
		return;
	}

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

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(`Checkerboard 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. Reduce concurrent WebGL-using effects/compositions.
2. Enable real GPU acceleration in the render browser.
3. Handle 'webglcontextlost'/'webglcontextrestored' on the canvas and recreate the effect.
4. Update GPU drivers; confirm WebGL2 support.
5. Use a GPU-enabled instance/memory tier for server-side rendering.

function probeWebGL2(): boolean {
  try {
    const c = document.createElement('canvas');
    const gl = c.getContext('webgl2');
    return !!gl && !gl.isContextLost();
  } catch {
    return false;
  }
}
if (!probeWebGL2()) skipOrFallback();

try {
  return <Checkerboard {...props} />;
} catch (err) {
  if (/Failed to create WebGL shader/.test(String(err))) return <FallbackFrame />;
  throw err;
}

When it happens

Trigger: createProgram() -> compileShader() calls gl.createShader() at checkerboard.ts:277 during setupCheckerboard(); it returns null (lost/destroyed context or GPU resource exhaustion) and the guard at :278 throws.

Common situations: Same family as other GL object failures: many concurrent compositions, --disable-gpu / SwiftShader overload, blacklisted GPU, context loss during throttling, or a VM/lambda without GPU acceleration.

Related errors

• Checkerboard shader compile failed: ${log ?? '(no log)'}
• Failed to create WebGL program
• Checkerboard program link 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/f126d4e53c68a289. Report an issue: GitHub.