Bloom in Eevee with Transparency

There is a Blender bug which prevents bloom from being exported properly when transparency is enabled. Here's how to get around it.

Recently I needed to render an animation in Blender that required the background to be transparent, since this was going on a website with elements in the background.

Since WebM is a kick-ass video format, it supports an alpha layer when you encode with VP9. So I rendered it out with WebM/VP9 but it didn't look anything like the preview window. The bloom appeared to be missing, and the intense emission was not as emissive.

This is a known bug which doesn't have a fix at the time of writing, and many users have provided workarounds, including some compositing tricks, using the Blur node, and some other weird video trickery. Unfortunately none of them really produced the result I wanted, so I came up with my own solution, and I hope you will find it useful.

Essentially, the method works like this:

  1. Render a first pass of the animation as an alpha mask.
  2. Render a second pass with transparency disabled.
  3. Combine the two with ffmpeg's alphamerge filter.

Render Settings

Before we start, make sure your render settings are set like so:

  • Output → File Format: FFmpeg Video
  • Output → Color: RGB
  • Output → Encoding → Container: WebM
  • Output → Encoding → Video → Video Codec: WEBM/VP9

Render Alpha Mask

First you need to render an alpha mask of the animation—essentially, a grayscale version of the animation with darker colors representing more transparency, and lighter colors representing less. To achieve this, go to the compositor and set up your nodes like this:

A rendered frame should look something like this:

Render the animation and name it mask.webm.

Render Animation Normally

Now we need to render the animation normally. But instead of having a transparent background, we'll make it black. Make sure Render Properties → Film → Transparent is disabled. Then in World Properties → Surface, set Color to black (#000000). Uncheck Use Nodes in the compositor.

A rendered frame should look like this:

Render the animation and call it original.webm.

Merge Alphas

Now we need to merge the two videos into a single video with proper alpha transparency. I've found this ffmpeg command works well:

ffmpeg -i original.webm -i mask.webm -filter_complex "[0:v][1:v]alphamerge" combined.webm

The final video will live at combined.webm. Once you're done, it should look very similar to how it does in the preview window, instead of the mess it was before.