Failed to acquire WebGL2 context
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-contextFix: use the ANGLE renderer
Enable the ANGLE OpenGL backend so Chromium can create a WebGL context.
CLI
Pass --gl=angle to your render command:
npx remotion render MyComp out/video.mp4 --gl=angleYou can also set it as the default in remotion.config.ts:
remotion.config.tsConfig .setChromiumOpenGlRenderer ('angle');
Server-side rendering APIs
Pass gl: "angle" in chromiumOptions:
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.