remotion-dev/remotion · critical · Error

Failed to create WebGL2 context

Error message

Failed to create WebGL2 context

What it means

blurSlideShader throws when canvas.getContext('webgl2', {premultipliedAlpha: true}) returns null, meaning WebGL2 is unavailable in the current environment. No shader transition can run without a WebGL2 context.

Source

Thrown at packages/transitions/src/presentations/blur-slide.tsx:213

	if (typeof blur !== 'number' || !Number.isFinite(blur)) {
		throw new TypeError(
			`blur passed to blurSlide() must be a finite number, received ${blur}`,
		);
	}

	if (blur < 0) {
		throw new TypeError(
			`blur passed to blurSlide() must be greater than or equal to 0, received ${blur}`,
		);
	}
};

export const blurSlideShader = (
	canvas: OffscreenCanvas,
): ReturnType<HtmlInCanvasShader<BlurSlideProps>> => {
	const gl = canvas.getContext('webgl2', {premultipliedAlpha: true});
	if (!gl) {
		throw new Error('Failed to create WebGL2 context');
	}

	const slideProgram = createProgram(gl, SLIDE_FRAGMENT_SHADER);
	const blurProgram = createProgram(gl, BLUR_FRAGMENT_SHADER);
	const prevTex = createTexture(gl);
	const nextTex = createTexture(gl);
	const intermediateTex = createTexture(gl);

	const framebuffer = gl.createFramebuffer();
	if (!framebuffer) {
		throw new Error('Failed to create framebuffer');
	}

	gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
	gl.framebufferTexture2D(
		gl.FRAMEBUFFER,
		gl.COLOR_ATTACHMENT0,
		gl.TEXTURE_2D,

View on GitHub (pinned to b2f4e34732)

Solutions

1. Enable hardware acceleration in the browser / update to a WebGL2-capable browser
2. In headless/Lambda renders, pass the appropriate --gl flag (e.g. --gl=angle or swiftshader)
3. Update GPU drivers and verify WebGL2 at webglreport.com
4. Catch the error and use a CSS/DOM-based presentation fallback

Example fix

// before
blurSlide() // throws if no webgl2
// after
try {
  return blurSlide(props);
} catch (e) {
  return fade(props); // DOM-based fallback
}

function webgl2Available(): boolean {
  const c = document.createElement('canvas');
  return c.getContext('webgl2') !== null;
}

function supportsWebGL2(c: OffscreenCanvas): boolean {
  return c.getContext('webgl2') !== null;
}

let presentation;
try {
  presentation = blurSlide(props);
} catch (err) {
  if (String(err).includes('Failed to create WebGL2 context')) {
    presentation = fade(props); // non-WebGL fallback
  }
}

When it happens

Trigger: Calling blurSlide()/blurSlideShader in a browser without WebGL2 support, with hardware acceleration disabled (chrome://settings GPU), on a headless environment without GPU/swiftshader, or after the context was lost.

Common situations: Older browsers or Safari versions lacking WebGL2; CI/headless Chrome without SwiftShader; corporate machines with GPU acceleration blocked; renders where --gl=angle flag is needed in Lambda.

Understand the failure class

Background: "unsupported platform" / "not supported on this platform" errors: what they mean and how to fix them — this error's family across 47 libraries.

Related errors

• Failed to create WebGL shader
• Failed to create WebGL program
• Failed to create WebGL vertex array
• Failed to create WebGL buffer
• WebGL context was lost during canvas effect rendering. This

AI-assisted analysis of remotion-dev/remotion@b2f4e34732 (2026-09-09). Data as JSON: /api/errors/92e2767b8aa7c99b. Report an issue: GitHub.