remotion-dev/remotion · critical · Error

Failed to create WebGL shader

Error message

Failed to create WebGL shader

What it means

A plain Error thrown inside compileShader in the Lines effect when gl.createShader(type) returns null. The WebGL2 spec allows createShader to return null under severe resource exhaustion or after context loss, so the Lines effect aborts rather than dereferencing a null shader.

Source

Thrown at packages/effects/src/lines.ts:307

		);
		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(`Lines 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 the number of concurrent renders / parallel browser contexts using the Lines effect.
2. Ensure the rendering environment has working WebGL2 (verify with a getContext('webgl2') smoke test).
3. For headless Chrome, pass --use-gl=angle or --enable-unsafe-swiftshader as appropriate and ensure enough GPU memory.
4. Listen for webglcontextlost on the canvas and re-instantiate the effect after webglcontextrestored.

function webgl2Ready(): boolean {
  const c = document.createElement('canvas');
  const gl = c.getContext('webgl2');
  const ok = !!gl && !!gl.createShader(gl.VERTEX_SHADER);
  gl?.getExtension?.('WEBGL_lose_context')?.loseContext?.();
  return ok;
}

try {
  lines(...);
} catch (err) {
  if (err instanceof Error && /WebGL shader/.test(err.message)) {
    // fall back to a non-WebGL effect or surface a 'GPU unavailable' state
  } else throw err;
}

When it happens

Trigger: The WebGL2 context exists (passed the earlier createWebGL2ContextError check) but cannot allocate a new shader object. Typical when the GPU context was lost, GPU memory is exhausted, too many contexts are alive, or running in a constrained/headless browser with broken WebGL drivers.

Common situations: Headless Chrome without proper GPU flags (swiftshader/software rendering misconfigured), many simultaneous Remotion renders on one machine, a page that leaked WebGL contexts, or a transient context-loss event during render.

Related errors

• Failed to create WebGL program
• Failed to create WebGL texture
• Failed to create WebGL vertex array
• Failed to create WebGL buffer
• Failed to create WebGL shader

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