正弦余弦曲线在游戏和软件中的应用也比较常见，刚好又发现了一个shader，就拿来学习学习。在学习的过程中越来越感觉到数学魅力的强大。

这个shader的效果如下：

http://s11/mw690/002wvREMgy6QDML67uW1a&690

一，基础知识：

1.正弦，余弦曲线

http://s5/mw690/002wvREMgy6QugTqdKIa4&690
正弦曲线公式可表示为y=Asin(ωx+φ)+k：
A，振幅，最高和最低的距离

W，角速度，用于控制周期大小，单位x中的起伏个数

K，偏距，曲线整体上下偏移量

φ，初相，左右移动的值

2.背景单元格的绘制原理

1. // 单元格宽，想象全屏幕高宽为1   
2. float cellWidth = 0.05;    
3. // 公式：取余  
4. // C1=0,1,2,3,4,5,6,7,8,9,0,1,2,3,4......  
5. float c1 = fmod(uv.x, 2.0 * cellWidth);    
6. // 公式：如果a>x结果是0, 否则是1  
7. // C1=0,0,0,0,0,1,1,1,1,1,0,0,0.....  
8. c1 = step(cellWidth, c1);    
9.   
10. // C2=0,1,2,3,4,5,6,7,8,9,0,1,2,3,4......  
11. float c2 = fmod(uv.y, 2.0 * cellWidth);    
12. // C2=0,0,0,0,0,1,1,1,1,1,0,0,0.....  
13. c2 = step(cellWidth, c2);   
14. // C1*C2，可表示下图：所以0为背景色，1为单元格色  
15. // 0,0,0,0,0  
16. // 0,1,0,1,0  
17. // 0,0,0,0,0  
18. // 0,1,0,1,0  
19. bgColor = lerp(uv.x * colorBg, uv.y * colorCell, c1*c2);    
20. // 综上所述：对单元格x2取余，然后将单元格与余数对比取0或1，可形成虚线效果  

二，代码如下：

1. Shader "shadertoy/Waves" {  //see https://www.shadertoy.com/view/4dsGzH    
2.     Properties {   
3.         _MainTex ("Base (RGB)", 2D) = "white" {}  
4.         _A ("振幅(最大和最小的幅度)", Range(0, 1)) = 0.3     
5.         _W ("角速度(圈数)", Range(0, 50)) = 10     
6.         _Speed ("移动速度", Range(0, 30)) = 10  
7.     }  
8.     SubShader {      
9.         Pass {      
10.             CGPROGRAM      
11.             #pragma vertex vert      
12.             #pragma fragment frag      
13.             #include "UnityCG.cginc"  
14.             #pragma target 3.0    
15.   
16.             float _A;     
17.             float _W;     
18.             float _Speed;     
19.   
20.             struct vertOut {      
21.                 float4 pos:SV_POSITION;      
22.                 float4 srcPos;     
23.             };    
24.     
25.             vertOut vert(appdata_base v) {    
26.                 vertOut o;    
27.                 o.pos = mul (UNITY_MATRIX_MVP, v.vertex);  
28.                 // 将顶点转换到屏幕位置  
29.                 o.srcPos = ComputeScreenPos(o.pos);    
30.                 return o;    
31.             }    
32.     
33.             fixed4 frag(vertOut i) : COLOR0 {    
34.                 // 背景颜色  
35.                 fixed3 colorBg = fixed3(0.0,0.0,0.3);  
36.                 // 单元格颜色  
37.                 fixed3 colorCell = fixed3(0.0,0.5,0.0);   
38.                 // 单元格宽，想象全屏幕高宽为1   
39.                 float cellWidth = 0.05;    
40.                 // 可以想象成UV平铺到屏幕  
41.                 float2 uv = (i.srcPos.xy/i.srcPos.w);    
42.                 // 定义输出色，背景色，波浪色  
43.                 fixed3 finalColor = fixed3(1.0);    
44.                 fixed3 bgColor = fixed3(0.0);  
45.                 fixed3 waveColor = fixed3(0.0);    
46.                 // 公式：取余  
47.                 // C1=0,1,2,3,4,5,6,7,8,9,0,1,2,3,4......  
48.                 float c1 = fmod(uv.x, 2.0 * cellWidth);    
49.                 // 公式：如果a>x结果是0, 否则是1  
50.                 // C1=0,0,0,0,0,1,1,1,1,1,0,0,0.....  
51.                 c1 = step(cellWidth, c1);    
52.   
53.                 // C2=0,1,2,3,4,5,6,7,8,9,0,1,2,3,4......  
54.                 float c2 = fmod(uv.y, 2.0 * cellWidth);    
55.                 // C2=0,0,0,0,0,1,1,1,1,1,0,0,0.....  
56.                 c2 = step(cellWidth, c2);   
57.                 // C1*C2，可表示下图：所以0为背景色，1为单元格色  
58.                 // 0,0,0,0,0  
59.                 // 0,1,0,1,0  
60.                 // 0,0,0,0,0  
61.                 // 0,1,0,1,0  
62.                 bgColor = lerp(uv.x * colorBg, uv.y * colorCell, c1*c2);    
63.                 // 综上所述：对单元格x2取余，然后将单元格与余数对比取0或1，可形成虚线效果  
64.   
65.                 float waveWidth = 0.01;  
66.                 // 为了方便曲线公式计算  
67.                 // 将UV的值域[0,1]变成[-1,1]  
68.                 uv = -1.0 + 2.0 * uv;    
69.   
70.                 // 这个时候其实所以的点都在进行曲线运动  
71.                 uv.y += (_A * sin(_W * uv.x + _Speed * _Time.y));  
72.                 // 绝对值，让靠近中心的颜色值才显示  
73.                 // y值域为[-1,1]，所以越靠近中心wave_width值越大  
74.                 waveWidth = abs(1.0 / (50.0 * uv.y));   
75.                 // 乘以一定的系数，只是为了上些颜色  
76.                 waveColor += fixed3(waveWidth * 0.5, waveWidth * 1.8, waveWidth * 1.5);     
77.                 // 融合  
78.                 finalColor = bgColor + waveColor;    
79.                 return fixed4(finalColor, 1.0);    
80.             }    
81.             ENDCG      
82.         }//endpass     
83.     }//endsubshader  
84.     FallBack Off      
85. }
86. 
    

原shader参考：

http://blog.csdn.net/stalendp/article/details/21993227