Previous topicNext topic

Opacity, transparency and blending with the Color modules

Tutorials, FAQs, resources, and examples for using Magic.
Post Reply
Magic
Site Admin
Posts: 3440
Joined: Wed Apr 09, 2014 9:28 pm

Opacity, transparency and blending with the Color modules

Post by 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:
Image

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

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

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

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

This results in a white square with 50% opacity.
Image

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.
Image
Image

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:
Image
Image

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

This results in a nice "see-through" effect for the orange square.
Image
Magic
Site Admin
Posts: 3440
Joined: Wed Apr 09, 2014 9:28 pm

Re: Opacity, transparency and blending with the Color module

Post by 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:
Image
Image

And to get 50% transparency, we multiply the Brightness by .5, and set the Alpha to .5:
Image
Image
Magic
Site Admin
Posts: 3440
Joined: Wed Apr 09, 2014 9:28 pm

Re: Opacity, transparency and blending with the Color module

Post by 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?
Image

The orange square maintains its full color:
Image

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

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
Site Admin
Posts: 3440
Joined: Wed Apr 09, 2014 9:28 pm

Re: Opacity, transparency and blending with the Color module

Post by Magic »

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