Shader for Stepping/Banding Gradient

Hi All

I use the following to update my plane with the following code to get this look. With this I can switch between day and night.

Code (CSharp):

1. Color32 newColor = Color32.Lerp (m_daytimeBackground.colorKeys [i].color, m_nightimeBackground.colorKeys [i].color, backgroundOffset);
2.                 colors [i] = newColor;
3.             }
4.  
5.             RenderSettings.ambientGroundColor = colors [0];
6.             RenderSettings.ambientEquatorColor = colors [colors.Length / 2];
7.             RenderSettings.ambientSkyColor = colors [colors.Length - 1];
8.  
9.             if (gradientPlane != null)
10.                 UpdateVerticeColors (gradientPlane.GetComponent<MeshFilter> ().sharedMesh, colors);

The look.


the Shader

Code (CSharp):

1. Shader "Custom/GradientVertexShader" {
2. Properties
3. {}
4.     SubShader
5.     {    
6.         Pass {
7.             CGPROGRAM
8.                 #pragma vertex vert
9.                 #pragma fragment frag
10.  
11.                 #include "UnityCG.cginc"
12.  
13.                 struct vertexInput
14.                 {
15.                     float4 vertex : POSITION;
16.                     fixed4 color : COLOR;
17.                 };
18.  
19.  
20.              
21.                 struct v2f {
22.                     float4 uv : SV_POSITION;
23.                     fixed4 color : COLOR;
24.                 };
25.          
26.          
27.                 v2f vert(vertexInput v)
28.                 {
29.                     v2f o;
30.                     o.uv = UnityObjectToClipPos(v.vertex);
31.                     o.color = v.color;
32.                     return o;
33.                 }
34.                 fixed4 frag(v2f IN) : COLOR
35.                 {
36.                     return IN.color;
37.                 }
38.             ENDCG
39.         }
40.     }
41. }
42.  

This how I want it to look. That stepping between colors.



Can anybody please help me adjust the shader that I can get that type of effect.

Regards

 

The easiest way to do banding would be to artificially limit the color precision in the fragment shader.

Code (csharp):

1. half colorSteps = 64;
2. half3 col = floor(IN.color.rgb * colorSteps) / colorSteps;
3. return fixed4(col, 1);

Really what that's doing is something like the Posterize filter in Photoshop / Gimp. You can play with the colorSteps number until you get something you like, but you may get some odd color shifting between the bands if you do it like that.

The better option may be too convert the color from RGB to HSV and apply the steps to that. You won't get the odd color shifting, but it still won't look quite like what your example is as it'll have separate stepping for the hue, saturation, and brightness.

To really get something like what your example image shows requires doing the color interpolation in the fragment shader, and adjusting the steps of the interpolation factor. That means the shader gets the 3 color values, then you store the blend amount from one color to the next either as a UV or a single vertex color channel (like alpha, where 0 is the first color, 127 is the next, 255 is the third) and pass that from the vertex shader to the fragment shader. Then do a lerp() between the colors with a (rescaled) stepped version of that value.

 

That worked. Thank you! I will have a look at the RGB to HSV

Regards!