Shader: Overlay two vec4 color values

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By Lebostein


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…

:bust_in_silhouette: Reply From: skysphr

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.


“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);

Lebostein | 2021-09-23 18:56