I'm aware that enough has been said about Premultiplied Alpha vs Not-Premultiplied Alpha blending and compositing, so this article won't try to teach you about premultiplied alpha or preach its benefits or correctness. Although if you do need to learn about that or get a refreshed, then I recommend you visit Tom Forsyth's great and classic article, then come back here to continue reading.

In this article I just wanted to give a mathematical characterization to the problem of "black edges" when you render an image or texture that has black transparent background and some opaque pixels. As we might know from experience, things go wrong when using regular alpha blending and you start scaling up or down such image, although things also go wrong when any linear pixel operation happens, such as mipmapping, filtering with a low pass flilter such a blur, etc.

Now, we also know that one workaround is to dilate the color of the solid bits of the texture outwards to the black pixels. This might or might not be easy to do, but we also know it's unnecessary under premultiplied alpha, which is easy enough to do. In this article we'll explore why and how exactly both of these approaches work.

So for now let's assume you are doing the right thing here, that is, we are using premultiplied alpha blending and hence our blending equation for a texture color c and alpha value a and a background destination color d is

B_p(c,a,d) = c + (1-a)⋅d

as opposed to regular alpha blending

B_r(c,a,d) = c⋅a + (1-a)⋅d

Note I used the p and r subscript to differentiate "premultiplied" and "regular" alpha-blending. Now let's also assume that we are doing some simple bilinear scaling of our texture, and keep the math simple let's assume this is 1D scaling only. In other words, any two consecutive texels of our texture will generate a gradient of colors and alphas during rendering, of the form

S(c) = c₁ + x⋅(c₂-c₁)
S(a) = a₁ + x⋅(a₂-a₁)

That is, the color c will transition from c₁ to c₂ as x goes from 0 to 1 across the pixels of the destination buffer d, and alpha a will also transition from a₁ to a₂, linearly. So far, pretty simple. And let's do things even simpler if we assume the background d is of constant color, although everything we'll prove still works if we don't assume this.

So, now this is the key observation for this article: we expect scaling and then blending the texture into the screen (which is the normal order of operations) to result in the same picture as if we were blending the texture with the background first and then scaling the result. In other words, we want

B_p(S(cp),S(a),d) = S( B_p(cp,a,d) )

Or yet in other words, we want that blending a scaled image is the same as scaling a blended image.

The math of Premultiplied Alpha Blending

The math of Regular Alpha Blending

The error term

For example, the shape of the problem is a parabola: x⋅(1-x), and this parabola will cancel when x=0 or x=1, which is exactly at the exact pixel positions we are interpolating between. So, the colors of the pixels will be alright at exact pixel locations, it's between pixel locations that things will look wrong, and this will peak at the center of the parabola which happens at x=0.5, right between the two pixels.

We know this wrongness often manifest as the infamous dark edge, so let's see why that is the shape and color of our error:

Recall the error is

e = x⋅(1-x)⋅(c₁⋅a₂ + a₁⋅c₂ - a₁⋅c₁ - a₂⋅c₂)

So first we note that the error will be zero for all x, meaning that everything wil be correct even between pixels, if a₁=a₂

Sin in that case c₁⋅a₂ cancels out with -c₁⋅a₁ and c₂⋅a₁ cancels out with -c₂⋅a₂.

So, we won't see rendering artifacts in the solid parts of the texture, nor in the fully transparent areas of the texture. It's in the transitions between opaque and transparent that the error term e will be non-zero. This checks with experience:

Similarly, if the alpha channel does change but the color channel doesn't, then c₁=c₂ and in that case c₁⋅a₁ cancels out with -c₂⋅a₁ and c₁⋅a₂ cancels out with c₂⋅a₂, and so e=0 and then too we won't see an error. This corresponds to the hack of dilating the pixel colors of the billboards outwards into the transparent areas. Again, the math checks with what we know from experience.

The failure is when either the alpha channel changes (ie, a₁ != a₂) and the color channel changes (ie, c₁ != c₂), because then nothing cancels out, e is always bigger than zero except for the exact pixel center x=0 and x=1, and so we see the error.


I'm aware there's no actionable advice in this article, other than keep doing what you probably were already doing in terms of premultiplied blending, but I hope you enjoyed the little mathematical take on it.