Problem calculating a resulting color based on 2 transparent colors

Unity Engine
1

So I have been trying to replicate the native unity functionality of overlapping transparent sprites but I’m having difficulty getting it exactly correct… I have been using this code to calculate each rgb color based on alpha:

FinalRed= OverlayAlpha * OverlayRed + (1 - OverlayAlpha) * BackgroundRed;

Essentially it is overlaying a foreground color to a background color, however it seems this code assumes the background will never be transparent, I wonder if there is a variation that allows for a transparent background?

These are my results; on the left the color created by script and on the right 2 square sprites overlapped in an empty object grabbing each their respective color( blended automatically by unity)

4857959--467591--1.png
4857959--467591--1.png917×176 5.8 KB

^ when both colors are opaque it works as itended;

4857959--467594--2.png
4857959--467594--2.png917×176 5.88 KB

^ when reducing the alpha of the overlay color it also works as intended
4857959--467597--3.png
4857959--467597--3.png906×176 10 KB

^ by removing all the alpha from the foreground and a good amount from the background it also works
4857959--467600--4.png
4857959--467600--4.png917×176 10 KB

^ but when i make the background transparent it breaks, while there shouldn’t be any red value on the final color its clear that the code is taking red from the invisible background and mixing it with the overlay color, the unity blend on the right clearly shows what the color should look like

If anyone has a solution it would be greatly appreciated, thanks in advance! =)

2

The formula that you posted doesn’t use the background alpha for anything. Have you tried actually using the background alpha instead of (1 - OverlayAlpha)?

3

o.rgb * o.a + (1 - o.a) * b.rgb * b.a

O is overlay
B is background

4

That’s a lerp.

And what you’re doing is

lerp(b.rgb*b.a, o.rgb, o.a);

Which is weird.

5

thank you,

o.rgb * o.a + (1 - o.a) * b.rgb * b.a

is almost correct, however when the alphas get low the rgb values become too low and the color becomes black, here is what is happening:

4859027--467714--5.png
4859027--467714--5.png897×169 10.4 KB

4859027--467717--6.png
4859027--467717--6.png910×203 10.1 KB

6

You need to calculate the alpha and color separately, otherwise you’re multiplying the alpha by itself. You’re calculating a premultiplied alpha color, so if you want to use this with a traditional Blend SrcAlpha OneMinusSrcAlpha shader, you need to correct for that by dividing the color value by the alpha. Otherwise you can use a Blend One OneMinusSrcAlpha shader instead.

Psuedo-code below (written like an hlsl shader, which you can’t really do in C#, unless you’re using Unity’s Mathematics library)

FinalColor.a = BackColor.a * (1 - OverlayColor.a) + OverlayColor.a;
FinalColor.rgb = BackColor.rgb * BackColor.a * (1 - OverlayColor.a) + OverlayColor.rgb * OverlayColor.a;
if (FinalColor.a > 0) // prevent divide by zero
    FinalColor.rgb /= FinalColor.a;
2 Likes
7

Thank you so much!!! This replicates it perfectly in all situations ! =D