Making a three-color gradient

Node-based Shader Editor
Post Reply
DuvE
Posts: 43
Joined: Thu Nov 23, 2017 6:46 pm

Making a three-color gradient

Post 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.
User avatar
Amplify_Borba
Posts: 1239
Joined: Mon Jul 24, 2017 9:50 am

Re: Making a three-color gradient

Post 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.
Customer Relations at Amplify Creations
Learn more about our offering: Amplify Creations Products
Amplify Shader Editor won the Asset Store Best Tool Award - Thank you for your support!
DuvE
Posts: 43
Joined: Thu Nov 23, 2017 6:46 pm

Re: Making a three-color gradient

Post 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?
User avatar
Amplify_Borba
Posts: 1239
Joined: Mon Jul 24, 2017 9:50 am

Re: Making a three-color gradient

Post 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 1875 times
Please let me know if the sample proves useful, thanks!
Customer Relations at Amplify Creations
Learn more about our offering: Amplify Creations Products
Amplify Shader Editor won the Asset Store Best Tool Award - Thank you for your support!
JohnnyDalvi
Posts: 4
Joined: Fri Jan 19, 2018 6:26 pm

Re: Making a three-color gradient

Post 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.
User avatar
Amplify_Borba
Posts: 1239
Joined: Mon Jul 24, 2017 9:50 am

Re: Making a three-color gradient

Post 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.
Customer Relations at Amplify Creations
Learn more about our offering: Amplify Creations Products
Amplify Shader Editor won the Asset Store Best Tool Award - Thank you for your support!
Post Reply