Shader: Overlay two vec4 color values

Question

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...

Answer 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.

Comments

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