Download

UE4 - How to smoothly blend 3 colors from top to bottom and control gradient strenght?

Hi, i tried to make this work so many ways, i used linear gradient, lerp, 3 color blend, but non is giving me control for the blending and gradient, at the moment the best one is the one referenced in the attachment, but… blending is horrible, no natural blendind from top to bottom and i canot rotate mesh because material gradient stays in abs position, i need to use 3 colors, from 1° to last without any line or banding in between, very natural and smooth transition, but, be able to control each color and where they start and end.

Please help with BP images, use mine to reference my current issue,

Thanks

This will give you three points with midpoint control. Sorry for the mess…

You can also do this with a custom node like so:


float3 Col;
Col = lerp(C, B, UVGrad/Middle)*step(UVGrad,Middle);
Col += lerp(B,A,((UVGrad-Middle)/(1-Middle)))*step(Middle,UVGrad);
return Col;

Thanks, actually it has to go vertically, not horizontal, but i couldn´t use the code, i tried by simple ctrl +V, didn´t worked, also tried to add the code to the node and include { }, but also didn´t worked, here apic:

nodeprob.png

Change the mask node from R to G if you want it vertically. You need to add all of the pins A B C Middle UVGrad and connect things to them accordingly. They are case sensitive, so keep that in mind.

Thanks man!

I was able to replicate the node following the steps, my only concern is about the blending control, basically one color compresses the other color, if i make C go up by making midpoint high, C color blends nice, but A color becomes compress and ultimately it becomes linear, since you canot control both colors, just mid color, it ends up been like one color squashing the other, for example thi is at “midpoint .95”:


Yellow (C) blends beautifly, but it compressed blue (A) up to a limit point, becaming linear. And if i make midpoint low, like .15, blue blends down, and yellow becomes linear, i think there might be a way to raise yellow to a position and lower blue to another position by having control over both colors, instead of compressing both by controlling mid color B, because B should be the one compresed by C and A, but without becoming linear.

In this example, i lowered midpoint to .25, while White (C) is a bit linear, blue (A) it´s starting to become linear:

gradprob2.jpg

What you’re asking for would require a lot more work to pull off. It would essentially be like in photoshop, having a three color gradient and then being able to move the two midpoints between colors; shifting the gradients around. That’s going to require a whole lot more work than a couple of lerps. My suggestion is to just pick colors that are more close together.