Page 1 of 1

Making a three-color gradient

PostPosted: Wed Jan 03, 2018 4:38 am
by DuvE
Hi, I wonder how can you properly create a three-color gradient for coloring your noise texture? Normally I've always used ramp textures like this one:

Image

But I want to try to implement procedural gradient coloring. Making two-colored gradient is easy, you just need to plug your colors and noise texture to the Lerp node. But I don't really know how to make a proper and not so expensive three-colored gradient.

Re: Making a three-color gradient

PostPosted: Wed Jan 03, 2018 10:58 am
by Amplify_Borba
Hello DuvE, could you please elaborate on whether you intend to control the gradient in similar fashion to the control points available in Photoshop, for example, or to simply have a fixed blend between three colors like in the ramp texture?

Looking forward to your reply.

Re: Making a three-color gradient

PostPosted: Sat Jan 20, 2018 8:56 pm
by DuvE
Hi, sorry for the delay. Well, perfectly I want to move at least central slider. But if you show me how to move all three of them, I will be very grateful!

Also, how much this method affect performance, is it better to just use ramp textures?

Re: Making a three-color gradient

PostPosted: Mon Jan 22, 2018 12:00 pm
by Amplify_Borba
DuvE wrote:Hi, sorry for the delay. Well, perfectly I want to move at least central slider. But if you show me how to move all three of them, I will be very grateful!

Also, how much this method affect performance, is it better to just use ramp textures?


Not a problem, thank you for providing further details!

Depending the complexity of the gradient and its control options, it would generally be less expensive to simply use a color ramp texture. If you could provide further information we would be glad to point you the right way.

I'm sending you a sample shader for a simple 3 color gradient setup with central gradient control for your convenience, hope that it helps you out achieving the intended effect.

3ColorGradient.zip
(1.62 KiB) Downloaded 737 times


Please let me know if the sample proves useful, thanks!

Re: Making a three-color gradient

PostPosted: Tue Jan 23, 2018 11:44 am
by JohnnyDalvi
Hello there,

I don't know how performant is this option but I've used the unity gradient component itself to create those gradients, I generate a ramp texture accordingly to this gradient in runtime and assign it to the shader, it is working as expected so far, and it does give us a lot of options and a way to change it in game too.

Re: Making a three-color gradient

PostPosted: Tue Jan 23, 2018 12:00 pm
by Amplify_Borba
Hey there JohnnyDalvi, thank you for taking the time to provide some valuable feedback and insight into your own process, its generally a good idea to move computations out of shaders completely and set the values in a script whenever possible, so your solution should be fine performance wise.