remotion-dev/remotion · error · Error

Failed to create WebGL shader

Error message

Failed to create WebGL shader

What it means

Internal error from the `rings()` effect's WebGL2 setup: `gl.createShader()` returned `null`. The WebGL2 context was acquired successfully, but the driver refused to allocate a new shader object. This is an environment-level failure (context loss, GPU memory exhaustion, or a driver that has already created too many shaders), not a user-param error. The shaders themselves are compile-time string constants, so a param change cannot cause it.

Source

Thrown at packages/effects/src/rings.ts:278

		);
		return;
	}

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

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(`Rings 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. Reload the page / restart the render to get a fresh WebGL2 context.
2. Reduce the number of effects mounted at once to free GPU resources.
3. Update or switch GPU drivers; if using software GL in CI, allocate more memory or use a hardware-accelerated runner.
4. If it reproduces deterministically, file a Remotion issue with the GPU/driver info from `WEBGL_debug_renderer_info`.

const supportsWebGL2 = (): boolean => {
  try {
    const c = document.createElement('canvas');
    return !!c.getContext('webgl2');
  } catch {
    return false;
  }
};

if (!supportsWebGL2()) {
  // fall back to a non-effect composition
}

try {
  rings()({...});
} catch (err) {
  if (err instanceof Error && /Failed to create WebGL shader/.test(err.message)) {
    // surface a friendly 'GPU context unavailable' message and retry once after reload
  } else {
    throw err;
  }
}

When it happens

Trigger: Calling `rings()` in a browser tab whose WebGL2 context was lost (e.g. after the GPU process crashed or the system resumed from sleep); running many effect instances concurrently until the driver's shader object limit is hit; rendering in a headless Chromium with a software GL implementation that has unstable shader allocation.

Common situations: Long-running Remotion Studio sessions that leak WebGL contexts; CI render farms using SwiftShader/llvmpipe under memory pressure; switching GPU on a dual-GPU laptop mid-render; too many simultaneously-mounted effect components.

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/85734cedf6edffb3. Report an issue: GitHub.