What is premultiplied alpha blending

In my game research, and the Starling framework, i stumpled on the name premultiplied alpha. It take some time to get the head around the concept, but it is a faster way to blend images on top of each other.

This is just on nice to know basis, and there may be some aspects of this, that is not 100% right presented here, but I am sure that you get a fairly solid understanding of what premultiplied alpha blending is about.

When you have a color value, you normally take the color values and multiply with the alpha value afterwards. In premultiplied alpha, the reduction in color value is calculated and presented in the number.

This brings some serious performance improvements at the expense of a little precision. This method is also an effective way to introduce transparency in the color and minimize fringes around the edges. An example.

A value of (1, 0, 0, 0.5) would normally give 100% red at 50% transparency. In premultiplied alpha, it would be (0.5, 0 , 0, 0.5) – the alpha value is merged into the color value.

Most people understand the concept of premultiplied values, by how much they occupy a pixel, so you don’t make it transparent but fill out an area of a pixel. Let’s take a yellow and cyan color, and mix them.

Yellow is normally (1, 1, 0), so that would be (0.5, 0.5, 0, 0.5) in premultiplied. Because we now, that the calculation is made beforehand, we can assume this to be a fully yellow color occupying 50% of the pixel.

The cyan would be (0, 0.5, 0.5, 0.5) for at 50% pure cyan color. Placed on top it will look something like this.

Because you have a pre-multiplied value, you can use an equation like this:

val = frontval+((max-frontalpha)*backval);

to calculate the final value. With yellow as back color and cyan as from color, that turns out as:

R = 0+((1-0.5)*0.5)
G = 0.5+((1-0.5)*0.5)
B = 0.5+((1-0.5)*0)

which results in a RGBA value of (0.25, 0.75, 0.50, 0,75). You will see the difference in the Red and Blue channel reflects, which of the colors that are placed on top of the other.

Here the result is illustrated by the RGB letters. Think of small letters as having half the weight as the capital letters. Because the cyan is in front of the yellow it’s channels are “eroding” information away from the underlying color. So the calculation is something like: red (1), green (1+2=3), blue (2) that reflects the ratios as the calculated result.


Leave a Comment