0 votes


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

enter image description here

Godot version 3.3.3.
in Engine by (66 points)

1 Answer

+1 vote
Best answer

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.

by (1,305 points)
selected by


"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);
Welcome to Godot Engine Q&A, where you can ask questions and receive answers from other members of the community.

Please make sure to read Frequently asked questions and How to use this Q&A? before posting your first questions.
Social login is currently unavailable. If you've previously logged in with a Facebook or GitHub account, use the I forgot my password link in the login box to set a password for your account. If you still can't access your account, send an email to [email protected] with your username.