Premultiplied Alpha: Online Interactive demo

So, how does it work? Just move the sliders. Premultiplied alpha blending on the left, regular alpha blending on the right. It requires HTML5, you should use a good browser like Firefox 18, Chrome or Opera 12.

Foreground

Background

Premultiplied Alpha

Regular Alpha blending

Not showing up? Try downloading the offline version.

What is premultiplied alpha?

There's a lot of resources about it, but they're all too technical and not artist-friendly. Still a good read, namely:

• http://blogs.msdn.com/b/shawnhar/archive/2009/11/06/premultiplied-alpha.aspx
  
• http://blogs.msdn.com/b/shawnhar/archive/2009/02/17/motogp-particles.aspx
  
• http://home.comcast.net/~tom_forsyth/blog.wiki.html#[[Premultiplied%20alpha]]
  
• http://www.teamten.com/lawrence/graphics/premultiplication/
  
• http://www.quasimondo.com/archives/000665.php
  

Long story short: It's a different way of doing transparency, which looks better, removes those ugly black edges that sometimes appear in alpha blended images, naturally behaves more like transparency does in the real world, compresses better when using DXT1, and is also very useful to perform neat tricks in particle personal effects to save performance. Also, some people (including myself) believe premultiplied alpha is the right way of performing alpha blending.

Does it have disadvantages? Yes, it's harder to understand at first, and some textures may undergo quality degradation when not using dxt compression. But seriously, those are very small prices to pay for huge advantages. It's a win win.

Coincidentally, NVIDIA came with an interesting article https://developer.nvidia.com/content/alpha-blending-pre-or-not-pre at the time of writing. However, they make emphasis on the filtering artifacts, while I'll be focusing in another point.

Why it behaves more “natural” to real life

To answer that question, we need to compare how both methods work:

How regular alpha blending works:

Regular alpha blending is easier to understand than premultiplied alpha. In regular alpha blending, take a value called “alpha” and mix two colours. Alpha of 0% means background is fully shown and foreground is fully transparent. Alpha of 50% means half background, half foreground then mix together. Alpha 100% means foreground is fully opaque, the background is being occluded. Easy piecy

How premultiplied alpha blending works

Premul. alpha just doesn't work like that. “Transparency” is no longer controlled by one value. It's controlled by all four (RGBA)
This is because Alpha only controls “how opaque” the surface is. But not being opaque does not mean it's transparent!

Take a moment, breath in, breath out. Relax. Now think it again, “not being opaque does not mean it's transparent”

At this moment you may be thinking “Whaaaa??” -Ok let me give you an example. Think of light shafts going through a window. You can see the light. But the light isn't opaque, yet you're seeing it, so it can't be transparent either. This is the same. This happens because the light beam isn't blocking the incoming light from it's background (it isn't opaque) but it also contributes with it's own light (hence it's not transparent)
Well technically it is blocking some light, but just some and besides, premul. alpha can mimic this too

Premultiplied alpha works with the concept that when alpha = 0, the surface is no longer opaque, so it contributes light to the scene. In photoshop terms, when alpha = 0, it's the same as having the layer blending mode set to “add”.
In order to be fully transparent, alpha has to be 0, but also the RGB colour has to be black, so that it doesn't contribute any light either.

The bigger the alpha, the more it blocks incoming light from behind, however it never stops contributing/adding light unless you turn the RGB down.

Get it?

No? Ok let's see some pictures:

In photorealistic rendering, the best results are achieved with HDR, because the whole “I block half of the background and contribute my own light” effect can be appreciated more easily.

Example: A premultiplied alpha window from a house is contributing some light, when looked from outdoors in a bright day the window will appear opaque, because the window's contributing lighting is higher than the light from inside passing through it.
However when looking from indoors, the window looks almost transparent, because the light coming from outside is higher than the window's own light. Coincidentally this matches real world behavior, where you can't look what's in the other side of the window if the brightness in your end is much higher than the brightness on the other side.

Regular alpha blending can't match this by a long shot. You will always get 50% window's own colour + 50% what's behind it, or whatever the alpha ratio is, the result will be completely unnatural and unrealistic. In worst cases it will blow up your automatic exposure adjustment because averaging completely distorts the actual luminance the object should be using.

What's inside the darker room? Who knows. All I see is a window (try to ignore the reflection, sorry I couldn't take a better screenshot).

What's outside in the bright outdoor? That's crystal clear!

This picture was taken with my camera. I admit I should've cleaned the window, but it makes a perfect example on how to use premultiplied alpha effectively:

When the specular component is very high (depends on view angle and sun's position) the dirt spots will appear bright, making the window very dirty (while the clean spots will remain clean). However when the specular component is very low, all spots, whether clean or not, will almost be transparent, giving the illusion of a clean window. Which is exactly how real life works.

So that's about it (artist friendly explanation). I'll let you keep playing with the interactive online demo above.
Experiment on how the alpha slider affects the “opaqueness” without affecting it's transparency, and compare the result with regular alpha blending.

When is alpha blending useful

Regular alpha blending is still useful. Like I said, it's easier to imagine and visualize. It's usually great for GUI & icon design. Also, fade in & out becomes harder when you have to tweak all RGBA sliders at the same time instead of just fading one. For these types of jobs, regular alpha blending "just works"

Other neat tricks

This has been repeated to death. So I will be brief.
Being able to switch between being opaque and additive blending is a very neat property. The most common example is fire. Fire is by nature fully additive (alpha = 0) while the smoke it emits is almost completely opaque (alpha close to 1).
All it takes is to fade the alpha value close to 1 and we get fire effects that darkens until it becomes smoke; for free (no need for a 2nd draw call, render state change, or another texture) This is purely a performance optimization. And also a pretty handy ability, since it's easier to tweak & animate the alpha value in most particle effects middleware than adding a second spawner/emitter or a texture change.
Another neat property is that premul. alpha doesn't produce black halos surrounding the edges. The reason behind this is very technical, so I won't explain why, you just need to know what it does, not why it works.

Quick! Spread the word, and hopefully some day everyone will be using premultiplied alpha. And bug your technical artist if the game engine doesn't use it. Are you already a programmer? Then read the goddam links at the beginning. Don't be lazy!

Follow @matiasgoldberg