ContextQMD
Back to Remotion

Failed to acquire WebGL2 context

packages/docs/docs/troubleshooting/webgl2-context.mdx

4.0.4702.1 KB
Original Source

You may see an error like this when rendering a composition that uses WebGL:

Failed to acquire WebGL2 context for blur effect. Pass --gl=angle when using the CLI, set chromiumOptions: { gl: "angle" } when using SSR APIs, or set "OpenGL render backend" to "angle" in the Advanced section when rendering in the Studio. See https://remotion.dev/docs/troubleshooting/webgl2-context

Fix: use the ANGLE renderer

Enable the ANGLE OpenGL backend so Chromium can create a WebGL context.

CLI

Pass --gl=angle to your render command:

bash
npx remotion render MyComp out/video.mp4 --gl=angle

You can also set it as the default in remotion.config.ts:

ts
import {Config} from '@remotion/cli/config';
// ---cut---
Config.setChromiumOpenGlRenderer('angle');

Server-side rendering APIs

Pass gl: "angle" in chromiumOptions:

tsx
const serveUrl = '/path/to/bundle';

import {renderMedia, selectComposition} from '@remotion/renderer';

const composition = await selectComposition({
  serveUrl,
  id: 'MyComp',
});

// ---cut---
await renderMedia({
  composition,
  serveUrl,
  codec: 'h264',
  outputLocation: 'out/video.mp4',
  chromiumOptions: {
    gl: 'angle',
  },
});

This applies to renderMedia(), renderStill(), renderFrames(), getCompositions(), and the Lambda and Vercel equivalents.

Remotion Studio

When rendering from the Studio UI, open the render modal, expand Advanced, and set OpenGL render backend to angle.

Machines without a GPU

If you are on a machine without a GPU (for example AWS Lambda), use --gl=swangle instead. This is the default on Lambda.