How do you add multiple colours together correctly, i am confused

Hello

I have created 3 different noise textures, and each of these have different colours and different alphas that i want to overlay on top of each other into one texture.

How do i then combine them to a single texture correctly taking into account their alpha mathematically ?

If i just add all of the vector4s i'll get values > 1 which clearly isn't correct.
If i just multiply them all together the values all become quite close to zero - and there for alpha is basically 0 giving me no output.

I'm kinda confused how to visualise combining colours in a mathematical sense with this. What is the correct way to do it?

The idea is these 3 textures are like "clouds" one in front of another so they should combine to create one nice overall noise texture of a cloudy look.

 

Lerp between each layer, where the third value of the lerp() is your alpha value for the texture being interpolated to.

 

What exactly would my lerp value be?

If i have noise1, noise2, noise3

I guess you mean i do:

Code (csharp):

1.  
2. result = lerp(noise1,noise2, t);
3. result = lerp(result, noise3, t2);
4.  

But what would t and t2 be?

 

T and T2 are the alpha values of the texture you're blending with.

Code (CSharp):

1. result = lerp(noise1, noise2, noise2.a);
2. result = lerp(result, noise3, noise3.a);

 

So is my method of :

(noise1+noise2+noise3) / 3 incorrect logic for colours then ? Its a bit confusing to think in math for colours.

 

That method is fine, if alpha blending isn't important to you. That would just be averaging out 3 colors, regardless of alpha.

It depends on the kind of blending or layer result you're going for. Multiplicative, Additive, Subtractive, etc...

 

Well im trying to blend the 3 together like layers of clouds to give a fake volumetric affect. So i am not sure which is correct.

 

The lerp should do layering that works nicely for clouds yes.

 

Wait am i lerping a vector4 or just the RGB here? Won't this ignore the alpha value of the first noise?

 

Well, do you even need the RGB? If this is just a cloud noise texture, then really you shouldn't even need an alpha channel, it should just be a single-channel texture. You can then just do

float alpha = min(1, (noise1.r + noise2.r + noise3.r));

And

return float4(cloudTint.rgb, alpha);

 

Its a mixture of 3 different cloud noises with different levels of alphas and with different colours to mix it up more, its not clouds in the sense of clouds in the sky its just a translucent gas cloud of multiple colours kinda thing but i want control on the alpha of all 3 colours.

 

Okay, so then just lerp the RGB like shown before, using the next layer's alpha as the T.
And do the final alpha value calculation like I showed in the previous post to utilize all the texture's alpha values properly. The first layer's will still be taken into account because that is the first layer and its alpha value will be utilized in that alpha combination line I showed.

 

Okay, thank you