[SOLVED] Gradient Rainbow Shader

I want to mimic the effect shown through a shader. I have been playing around with this but I don't understand shaders enough to fully replicate the effect. Could someone walk me through this? Thanks.

 

Well, the shader you linked is kind of over complicated for the effect you want, but it'll get the job done if you want to start with it. However I suggest you read up on shaders s but before you try to dive into this.

https://unity3d.com/learn/tutorials/topics/graphics/gentle-introduction-shaders

 

Alright that helped me understand how the I/O of shaders works for the component, but I still don't really understand how animated shaders like these work. Is there a way I can have the shader take a picture and repeatedly move it as above? I feel like if that were possible it'd be a good place to start.

 

Did you go through all 5 parts of that tutorial, or just the first page?

Here's the same tutorial, with easier to see links to the other 4 pages that Unity didn't host.
http://www.alanzucconi.com/2015/06/10/a-gentle-introduction-to-shaders-in-unity3d/

 

Thank you! I now see what everything means. I am posting the modified version in case there is anyone else trying to accomplish this

 

Anyone able to help change the shader to just use three colors of your choosing?

 

@corbinyo did you try Google?
https://answers.unity.com/questions/1108472/3-color-linear-gradient-shader.html

This is pretty close to what is needed and there are plenty of similar examples out there. You could perhaps extract the useful parts to your own shader?

 

@Olmi My Main issue is that i am really new to shaders and cant translate the movement part to this shader, I did see it and i did try to combine them! Do you have any ideas as to how I could use this shader (3 color) and make it move like the rainbow shader?

 

Hi everyone. I am resurrecting this thread rather than creating a new one as it's the only one that got me going down the correct path.

I am using @olie304 's shader that they attached here but am experiencing a couple of issues.

First off, it seems to 'fill in the holes' on a transparent png sprite. Say for example, a donut would look like a solid circle instead of having a hole in the middle. Any ideas how I can fix that?

Also, I would like to have a gradient color picker for the shader using Unity's gradient editor. Is this possible somehow?

Sorry if these are silly questions but I am certainly not a shader expert and would be very grateful for some guidance. Thanks!

 

I would really like to know how to move this as well. It appears to be a different method than shifting the hue value. Anyone know?

 

The 3 color shader is lerping from the start to the mid color then the mid color to the end color over a 0.0 to 1.0 range, in this case sampled from the texcoords. If you want it to move, add

_Time.y

. However the current code means input values over >1.0 just end up being the end color. You could use

frac()

to loop between 0.0 and 1.0, but that means it'll just be snapping between the end color and the start color. So you'd need to modify the code to lerp between the first and mid color from 0.0 to 0.33, mid color to end color between 0.33 and 0.67, and end color to start color over 0.67 to 1.0.

Code (csharp):

1. fixed4 ThreeColorGradientLoop(fixed4 start, fixed4 mid, fixed4 end, float t)
2. {
3.     t = frac(t) * 3.0; // loop between 0.0 and 1.0 and rescale to a 0.0 to 3.0 range
4.     fixed4 color = start;
5.     color = lerp(color, mid, saturate(t));       // t 0.0 to 0.33
6.     color = lerp(color, end, saturate(t + 1));   // t 0.33 to 0.67
7.     color = lerp(color, start, saturate(t + 2)); // t 0.67 to 1.0
8.     return color;
9. }

Well, the shader doesn't use a texture at all, so it doesn't matter what texture the sprite is using because the shader totally ignores it. I'll repeat my original suggestion to the op and say "try reading some tutorials". That should give you an idea of how to add a texture to a shader, sample it, and use its color and/or alpha value.

There's kind of two ways to go about gradients in a shader.

The easiest method is to make 1 pixel tall textures that are some arbitrary width that you paint using some external application and just use that. There are some Unity assets that put gradients in the material inspector that behind the scenes are generating those textures in c# for the user.

The other way is something like the 3 color example linked to above. Pass in some number of colors and lerp between them. Unity's Shader Graph has a Gradient node that passes an array of colors and alphas with a "time" value per index. It then calculates the fractional value between each key and the previous key and lerps between them. This also requires custom c# to fill in that array from the C# gradient, but is a little less work than generating texture assets. It does make for a much more complicated shader, but it's fundamentally not too different than the example code I posted above.

 

Thank you very much @bgolus ! What a fantastic and insightful response. I will dig further into this based on your advice and report back soon.

 

Can you upload complete shader because I am not sure where should I put and call that function you mentioned?

 

Hi! I want to use that same shader on 2d sprites. I try to configure, But it doesn't work.
How that make possible?

 

Adjusting the Hue it a much easier way to achieve this effect I feel.
Simply Split your UV's into X or Y (depending on how you want the stripes to go) then multiply that by 360 (this number represents the full spectrum). Set an Initial Hue (I used x as 1) then offset it by the UV multiplier. Boom it splits the entire color spectrum over the texture.

Then simply use tiling and offset to move the effect how ever you want. You can scale the lines as well.
Here is my shader graph.

Note: This is including the texture of the sprite it is attached to, if that sprite has colors other than White or Black the effect will look kinda weird. If you dont want this, just remove the sample texture color multiplier and the shader will overlay the colors over anything, but it wont take into account the shading of the texture.

I also added a Color multiplier, this is simply to turn on HDR mode and make a glowing rainbow effect it you want.

Anyway hope this helps someone.