[Interest] The "Proper" Way to Mix/Cross-Fade Images

[Till Oliver Knoll]

Am 20.03.2012 um 14:17 schrieb Josiah Bryan <josiahbryan at gmail.com>:

> - I want to cross-fade two images over a background. (Simple, right?)

Well, simple yes - but forget about the "background" ;)

If we are talking about a "cross-fade" in the /actual/ sense - think "video editing and clip transitions" - that is, the gradual blending of one image over the other, then the background (a third image) would /never/ become visible - ever.

> Well, not really. Forgot the "Cross-fading" part - lets just take one point in time, a 50/50 opacity (e.g. the two images we're cross fading each is at 50% opacity.)

That's the point: what you describe is /not/ a cross-fade ;)

But I do see your misconception here: you seem to expect that in image composition when layering two images, each having an opacity of 0.5, you'd get a final pixel having 50% of each source pixel's value - which is a wrong assumption, as you have already noticed.

In the following I assume for simplicity that all images itself have a fully opaque alpha channel ("they do not contain any (semi-)transparent parts by itself") and that the "composition mode" is the common "Source Over" (refer to QPainter docu).


So what you really get is the first image blended over with 50% opacity over the background, and then *on top of that* the second image blended with 50% over the previously calculated pixel value (which already contains 50% of the background!).

Now I leave the exact math up to you how much percentage of the background colour component would be visible in the final blended pixel value ;) but you do understand now that when painting two images, each having an opacity less than 1.0 (100%), over a third image, that third image is *always* visible to a certain degree.

An easy way to imagine what happens here: think of looking through two tinted glass plates, the one stacked behind the other. As long as both let light pass to a certain degree you will always be able to see what's behind them (even though it might appear as "almost black").

Off course that easily extends to n glass plates (or images with an opacity set).


Coming back to your original question, how to "cross-fade two images", that should be really easy now :)

First you draw your first image with full opacity (a "normal" paint operation without any alpha blending). Now you paint your second image, by gradually changing it's opacity from 0.0 to 1.0 (e.g. in a linear way).

When you hit the point in time when opacity (of the second image - remember: you never change opacity of the first image) reaches 0.5, we have the situation where you see "50% of each colour component".

That is what is usually referred to as "cross-blending".

> But I don't think the background should show thru - if each image is exactly 50% opac, in my (simple) mind, that should "add up to" 100% opacity

See above of why it doesn't "add up to 100%" (remember the glass plates?).

However if you /really/ want the background to shine through at some point in time, you can do that off course. And then you have to change the opacity of both your "source images".

Just remember to "think in layers" and in terms of "how much of the original light still shines through" instead of "summing up opacities".

And if you really want to get creative you can start playing around with the "composition modes" (-> Qt docs).

I recommend experimenting in an image processing application with multiple layers and blend modes (Gimp, Photoshop, ...), to get a feeling how it all works. There's also a Qt demo (example) which demonstrates the composition modes.

Cheers, Oliver