Skip to main content

Using the GPU

Some types of content in Remotion can benefit from a GPU being available on the machine that is used for rendering. That is:

  • WebGL content (Three.JS, P5.js, Mapbox etc.)
  • 2D Canvas graphics
  • GPU-accelerated CSS properties such as filter: blur()

If a GPU is available, it should be enabled by default while rendering the preview. However, in headless mode, Chromium disables the GPU, leading to a significant slowdown in rendering time.

Using --gl=angle

Since Chrome 98, the GPU can be used in headless mode. Adding --gl=angle (or {chromiumOptions: {gl: "angle"}} for the Node.JS APIs), we find that a video rendered on a <canvas> on macOS is many times faster compared to rendering without the flag..

However, there seems to be memory leakage from Chrome that may kill a long render, therefore we don't set angle as default. We recommend to render long videos that use the GPU in multiple parts.

Considerations

For rendering content that can benefit from a GPU, you might want to choose a cloud rendering solution to which a GPU can be attached to over AWS Lambda (which does not have a GPU). Most bigger cloud providers have some GPU-enabled VPS offerings. Apple M1 VPS instances might also be able to accelerate graphics rendering and be more economical than VPS instances with desktop graphic cards.

Software emulation

You can still render all types of content without having a GPU, it will just be slower. The graphics content will be software-emulated using ANGLE or SwiftShader (when using Lambda).

What are your experiences?

We'd love to learn and document more findings about the GPU. Let us know and we will amend this document!