How to make a color graph in a SM3 Shader?

Question

I am starting with shaders, and i would like to make a pattern generator (spectrography theory) displaying in unity. I would love a starter shader with color dependant on x and y axis. for example:

red = sin(x * 5);

 blue = y*y;

can someone please provide me with a shader that does color stripes? is there one already?

Thanks!

 Shader "mShaders/mplasma3"
 {
 Properties
 {
 _Anim("Time", Float) = 0
 _ResX("_ResX", Float) = 128
 _ResY("_ResY", Float) = 128
 }
 SubShader
 {
 Tags {Queue = Geometry}
 Pass
 {
 CGPROGRAM
 #pragma target 3.0
 #pragma vertex vert
 #pragma fragment frag
 #include "UnityCG.cginc"
  
 uniform float _ResX;
 uniform float _ResY;
 uniform float _Anim;
  
 struct v2f {
 float4 pos : POSITION;
 float4 color : COLOR0;
 float4 fragPos : COLOR1;
 };
  
 v2f vert (appdata_base v)
 {
 v2f o;
 o.pos = mul (UNITY_MATRIX_MVP, v.vertex);
 o.fragPos = o.pos;
 o.color = float4 (1.0, 1.0, 1.0, 1);
 return o;
 }
  
 half4 frag (v2f i) : COLOR
 {
 float4 outColor = i.color;
 // main code, *original shader by: 'Plasma' by Viktor Korsun (2011)
 float x = i.fragPos.x;
 float y = i.fragPos.z;
 float mov0 = x+y+cos(sin(_Anim)*2.)*100.+sin(x/100.)*1000.;
 float mov1 = y / _ResY / 0.2 + _Anim;
 float mov2 = x / _ResX / 0.2;
 float c1 = abs(sin(mov1+_Anim)/2.+mov2/2.-mov1-mov2+_Anim);
 float c2 = abs(sin(c1+sin(mov0/1000.+_Anim)+sin(y/40.+_Anim)+sin((x+y)/100.)*3.));
 float c3 = abs(sin(c2+cos(mov1+mov2+c2)+cos(mov2)+sin(x/1000.)));
 outColor.rgba = float4(c1,c2,c3,1);
 return outColor;
 }
 ENDCG
 }
 }
 FallBack "VertexLit"
 }

Answer 1

Best Answer

Answer by robertbu · Aug 11, 2013 at 07:40 AM

I'm just ramping up on CG programming this week, and am still at the stumbling/crawling stage. Here is a shader that I think gives you what you are looking for. Your calculation for blue is commented out in favor of something I found a bit more interesting.

 Shader "Custom/Pattern" {
     Properties {
         _Mod1 ("Mod1", Float) = 20.0
         _Mod2 ("Mod2", Float) = 10.0
     }
     
     SubShader {
         Pass {
             CGPROGRAM

                 #pragma exclude_renderers gles
                 // pragmas
                 #pragma fragment frag
                 
                 uniform float _Mod1;
                 uniform float _Mod2;
                 
                 //user defined variables
                 struct input {
                         float2 texcoord : TEXCOORD0;
                 };
                 
                 // fragment function
                 float4 frag(input i) : COLOR {
                     float4 clr = float4(0,0,0,0);
                     clr.r =  (sin(i.texcoord.x * _Mod1) + 1.0) / 2.0 ;
                     clr.b =  (cos(i.texcoord.y * _Mod2) + 1.0) / 2.0 ;
 
                     //clr.b = i.texcoord.y*i.texcoord.y;
                     return normalize(clr);
                 }
             ENDCG
         }
     }
     
     fallback "Diffuse"
 }

With Mod values of 70 and 30 you get this:

Take a look at stdlib here for CG functions:

http://http.developer.nvidia.com/Cg/index.html

pattern.png (71.2 kB)

Add comment · Show 8 · Share

MountDoomTeam · Aug 11, 2013 at 09:13 AM 0

Share

Thanks, but i am looking for a shader code that makes stripes or a color graph, rather than the list of shader maths functions. is there one somewhere? sorry, i edited the title accordingly.

Benproductions1 · Aug 11, 2013 at 09:20 AM 0

Share

Usually people don't just go around handing out code. Unless someone has already made a shader like the one you are "requesting", it is very unlikely anyone will spend their time doing it here for you :)

Also I suggest asking another question, as this one was originally about sin functions. You should not change the topic of a question just because it got answered :)

MountDoomTeam · Aug 11, 2013 at 09:24 AM 0

Share

originally i posted a code to modify 2-3 lines to, but then i realised that it was bending a texture gradient to make the color graph, and that i probably needed an actual RGB graph, so i took the code out. anyways, here is the types of things i want to graph: https://www.youtube.com/watch?v=sVteR9TEYF8

MountDoomTeam · Aug 11, 2013 at 07:45 PM 0

Share

Thanks very much! that was exactly what i was hoping for. i ll be able to do some avant guard texure generation. ty!!!

robertbu · Aug 11, 2013 at 08:15 PM 0

Share

I played a bit more. Was able to generate some interesting things, but I kept running up against a too many instructions error when I tried to do anything complex.

Show more comments

Answer 2

I asked on the shaderlab forum and i have an answer... apparently i had to have a v2f vertex thing happening in the CG code, so here is some code that can graph things with many instructions. it can be handy for tron type worlds etc.

 Shader "Custom/Pattern" {
     Properties {
        v1 ("Mod1", Float) = 300.0
        v2 ("Mod2", Float) = 1.0
        v3 ("Mod3", Float) = 1.0
     }
  
     SubShader {
         Pass {
             CGPROGRAM
 
 
                 #pragma vertex vert
                 #pragma fragment frag 
                 #pragma target 3.0 
                 #pragma exclude_renderers gles
                 #include "UnityCG.cginc"
  
                 uniform half v1;
                 uniform half v2;
                 uniform half v3;
 
                 //user defined variables
                 struct input {
                         float2 texcoord : TEXCOORD0;
                 };
                  struct v2f {
                     float4 pos : SV_POSITION;
                     float3 color : COLOR0;
                     float2 texcoord : TEXCOORD0;
                 };
 
                 v2f vert (appdata_base v)
                 {
                     v2f o;
                     o.pos = mul (UNITY_MATRIX_MVP, v.vertex);
                     o.color = v.normal * 0.5 + 0.5;
                     o.texcoord = v.texcoord;
                     return o;
                 }
                 // fragment function
                 float4 frag(input i) : COLOR {
                 
                     half4 clr = half4(0.0,.0,.0,0.0);
                     
                     half2 xy0 = i.texcoord + half2(-0.5, -0.5); 
                     half c0 = length(xy0); //sqrt of xx+yy, polar coordinate radius math            
                     clr.b=  (sin(c0 * v1)  ) ;
 
      if (abs(clr.b) < .3){clr.b =1.0;}else{clr.b=0.0;} 
                     
                     //clr.g = clr.b ;
 
                     return normalize(clr);
                 }
             ENDCG
         }
     }
  
     fallback "Diffuse"
 }

How to make a color graph in a SM3 Shader?

2 Replies

Your answer

Follow this Question

Related Questions