Discussion of article "Studying the CCanvas Class. How to Draw Transparent Objects" - page 6

New comment
 
Nikolai Semko:

That, Peter, is too easy.

Here is a task for you to master and consolidate the essence of the question:

- how to mix two colours ARGB(a1,r1,g1,b1) and ARGB(a2,r2,g2,b2) within one layer, each of which has its own transparency a1 and a2?

Without this blending, it's impossible to properly overlay anti-aliased objects on top of each other.

At a quick glance: On the initial layer colour we overlay the first ARGB(a1,r1,g1,b1) using the method described in the article. Then, on top of the first colour, we apply the second one, making ARGB calculations according to the same formula. Just this time, the bottom colour will be the first one, which we put over the original layer colour.

I may be wrong, Nikolai, but why shouldn't it work?

ZY. I haven't experimented yet, but the first option may not work because the final transparency of the two top layers is calculated incorrectly. In this case, you need to mix the middle layer with the top layer, and having obtained their common colour, overlay it on the original layer.

 
Реter Konow:

At a quick glance: On the initial layer colour we overlay the first ARGB(a1,r1,g1,b1) using the method described in the article. Then, on top of the first colour we apply the second one, making ARGB calculations according to the same formula. Just this time, the bottom colour will be the first one, which we put over the initial layer colour.

Maybe I'm wrong, Nikolai, but why shouldn't it work?

ZY. I haven't experimented yet, but the first option may not work because the final transparency of the two top layers is calculated incorrectly. In this case, you need to mix the middle layer with the top layer, and having obtained their common colour, overlay it on the original layer.

This is actually not an easy task.
But whoever can solve it on his own, he can rightfully be considered a colour guru.
This article is far from academic precisely because of the absence of this formula.
 
Nikolai Semko:
it's actually a challenge. Not an easy one.
But whoever can solve it on his own, he can rightly be considered a colour guru.

How? Have you experimented with it yourself? Probably the top colour as a filter to use, calculate each component (rgb) of the bottom layer in proportion to the level of the corresponding component of the top layer and transparency (it is determined how much of what will pass from the bottom through the top). Then recalculate the levels of components of the top in accordance with the opacity (it is determined how much remains of the top). At the end, calculate the average of each component of the bottom and top layers (not the original bottom and top, but the recalculated ones, as written). I haven't tried it.

Well, or just add up the components in proportion to the transparency.

I'll have to experiment... interesting task.

 
Dmitry Fedoseev:

How? Have you experimented with it yourself?

I solved this problem four years ago, but with a lot of brainstorming.
I'll post the solution if I see a lot of brain activity and nobody finds the solution.
 

Uffff... Everything turned out to be much simpler, no need to filter before stacking. The components are simply added in proportion to transparency and opacity:

r=lr*(255-Alpha)/255+ur*Alpha/255;
g=lg*(255-Alpha)/255+ug*Alpha/255;
b=lb*(255-Alpha)/255+ub*Alpha/255;

Alpha: 255 - the top layer is opaque, 0 - fully transparent.

lr, lg, lb - components of the bottom layer.

ur, ug, ub - components of the top layer.

Here in the terminal, black background, red square opaque, on it blue with 50% transparency and then yellow with 50% transparency.

Here is the same thing in photoshop:


 
Dmitry Fedoseev:

Uffff... Everything turned out to be much simpler, no need to filter before stacking. The components are simply added in proportion to transparency and opacity:

Alpha: 255 - the top layer is opaque, 0 - fully transparent.

lr, lg, lb - components of the bottom layer.

ur, ug, ub - components of the top layer.

When I get to my computer, I'll try to mix two transparent images using this flrmula and see what happens. :))
 
Nikolai Semko:
I'll get to my computer, I'll try to mix two transparent pictures using this flrmula and see what happens. :))

How do you mix two transparent ones? First one is superimposed on the background, then the second one is superimposed on the result.

In general, you can also fold two transparent somehow, and then overlay it on the background, but now not about that.

***

What would be particularly interesting is to learn all the methods of overlaying layers as in Photoshop.

 
Dmitry Fedoseev:

Uffff... Everything turned out to be much simpler, no need to filter before stacking. The components are simply added in proportion to transparency and opacity:

r=lr*(255-Alpha)/255+ur*Alpha/255;
g=lg*(255-Alpha)/255+ug*Alpha/255;
b=lb*(255-Alpha)/255+ub*Alpha/255;

Alpha: 255 - the top layer is opaque, 0 - fully transparent.

lr, lg, lb - components of the bottom layer.

ur, ug, ub - components of the top layer.

Here in the terminal, black background, red square opaque, on it blue with 50% transparency and then yellow with 50% transparency.

Here's the same thing in photoshop:

not that ...

the point is that there is Alpha1 and Alpha2.

so you need to calculate not only the new-forming mixing colours, but also the new-forming transparency.

You essentially repeated the formula of the author of the article mixing transparent colour with background:

result=backgraund*(1-alpha)+foreground

and you have:

result=backgraund*(1-alpha)+foreground*alpha

Your variant is correct, but the author of the article made a mistake in a simple formula, and it is funny that Peter thanks him for this formula :))))

After all, you can see with the naked eye that uchar overflow occurs easily in the author's formula. It is strange that no one has seen this gross error for 4 years.

 

this is where the algorithm of mixing other transparent colours is applied:


 
Why mix two transparent layers and then apply them? Apply one layer first, then the other.
123456789
New comment