Opacity, transparency and blending with the Color modules

[Magic]

Magic's Color modules (ColorHSB and ColorRGB) use the concept of "premultiplied" alpha values. This means that opacity works a little bit differently than what you might be used to in Photoshop or other image-editing applications.

For a very technical article on premultiplied alpha, check out http://blogs.msdn.com/b/shawnhar/archiv ... alpha.aspx.

But, here's a simpler explanation.

Let's say you have a basic scene, like this:


In this case, you're just going to get a white square in the Magic Window.


So you might think that to give the white square 50% opacity, you need to set the Alpha to 0.5:


But this doesn't seem to make the white square any more transparent.


What you actually need to do is set all the values in the ColorRGB module to 0.5:


This results in a white square with 50% opacity.


In effect, what we've done is multiply the Red, Green, and Blue values by the Alpha value. This is why it's called "premultiplied alpha".

The general strategy, then, is to first decide what color you want, and then decide what opacity you want, and then multiply the color by the opacity.

Here's another example. Let's say we want an orange square. We set Red to 1, Green to .5, and Blue to 0.



To get 50% transparency for the orange square, we now multiply the R, G, and B values by .5, and we set the Alpha value to .5:



To demonstrate the transparency, we can put something behind the square by connecting it to the Magic module's next input pin:


This results in a nice "see-through" effect for the orange square.

[Magic]

The ColorHSB module works in a similar way. However, only the Brightness value needs to be multiplied by the Alpha value.

To get an orange square using the ColorHSB module, we can do this:



And to get 50% transparency, we multiply the Brightness by .5, and set the Alpha to .5:

[Magic]

At this point, you might be thinking, "that's all a bit complicated!"

But, it does have some nice advantages.

For example, in the ColorHSB module, what happens when you don't multiply the Brightness by the Alpha?


The orange square maintains its full color:


But, it also lets through what's behind it (in this case, 50% of the Starfield):



This is often called "additive blending" because, in effect, the color for each layer is being added together.

The bottom line is that you can get some really nice effects by playing around with the Alpha value, and by not having it directly connected to the color or brightness.

[Magic]

Here's another example of additive blending. Note that the Alpha value is set to 0 in each ColorRGB module.