Topic was automatically imported from the old Question2Answer platform.
Asked By
Lebostein
Hi,
If I place a “colorful” sprite inside my main node and on the layer above a semi transparent sprite then I see the mixed result if I move the two sprites on top of each other (see screenshot).
Now I want to get the same effect in a shader. I have the vec4 color of my “colorful” sprite and the vec4 color of the transparent sprite. How I add or combine these two color values to get the same result like overlaying in godot? A simple addition seems wrong, because values r/g/b/a can become larger than 1…
Simply adding the values together would give you additive blending.
The formula for basic alpha blending is (1 - α) * rgb1 + α * rgb2. You can use mix(rgb1, rgb2, α) for convenience. α refers to the alpha component of the upper layer.
Thanks!!!
“alpha blending” was the key word I searched for. mix() seems the esiest way to do that, but It looks a little bit different to the Godot overlay. With the “Porter-Duff-Algorithm” I get exact the same result:
// A over B
vec4 A = texture(texture_map, UV);
vec4 B = texture(TEXTURE, UV);
COLOR.a = A.a + (1.0 - A.a) * B.a;
COLOR.rgb = 1.0 / COLOR.a * (A.a * A.rgb + (1.0 - A.a) * B.a * B.rgb);