读stalendp文章的笔记之【Shader实例分析（一）－Wave】

本文链接：http://blog.csdn.net/a237653639/article/details/46375317

作者： 攀大小熊猫    邮箱： [e-mail]

最近一直在学习shader，有幸看到了stalendp的shader文章，感谢stalendp的分享。

在stalendp上对应本文的链接为：http://blog.csdn.net/stalendp/article/details/21993227

再次感谢stalendp。

但是以防链接失效，且也为了方便查看，所以我就先copy下咯。（真有点不好意思^^）

转发请保持地址：http://blog.csdn.net/stalendp/article/details/21993227

这篇文章主要分析一个Shader，从而感受shader的魅力，并学习相关shader的函数的用法。

先看Shader运行的效果：

下面是代码：

[cpp] view plaincopy

1. Shader "shadertoy/Waves" {  //see https://www.shadertoy.com/view/4dsGzH  
2.   
3.     CGINCLUDE    
4.   
5.         #include "UnityCG.cginc"                
6.         #pragma target 3.0    
7.         struct vertOut {    
8.             float4 pos:SV_POSITION;    
9.             float4 srcPos;   
10.         };  
11.   
12.         vertOut vert(appdata_base v) {  
13.             vertOut o;  
14.             o.pos = mul (UNITY_MATRIX_MVP, v.vertex);  
15.             o.srcPos = ComputeScreenPos(o.pos);  
16.             return o;  
17.         }  
18.   
19.         fixed4 frag(vertOut i) : COLOR0 {  
20.   
21.             fixed3 COLOR1 = fixed3(0.0,0.0,0.3);  
22.             fixed3 COLOR2 = fixed3(0.5,0.0,0.0);  
23.             float BLOCK_WIDTH = 0.03;  
24.   
25.             float2 uv = (i.srcPos.xy/i.srcPos.w);  
26.   
27.             // To create the BG pattern  
28.             fixed3 final_color = fixed3(1.0);  
29.             fixed3 bg_color = fixed3(0.0);  
30.             fixed3 wave_color = fixed3(0.0);  
31.   
32.             float c1 = fmod(uv.x, 2.0* BLOCK_WIDTH);  
33.             c1 = step(BLOCK_WIDTH, c1);  
34.             float c2 = fmod(uv.y, 2.0* BLOCK_WIDTH);  
35.             c2 = step(BLOCK_WIDTH, c2);  
36.             bg_color = lerp(uv.x * COLOR1, uv.y * COLOR2, c1*c2);  
37.   
38.             // TO create the waves   
39.             float wave_width = 0.01;  
40.             uv = -1.0 + 2.0*uv;  
41.             uv.y += 0.1;  
42.             for(float i=0.0; i<10.0; i++) {  
43.                 uv.y += (0.07 * sin(uv.x + i/7.0 +  _Time.y));  
44.                 wave_width = abs(1.0 / (150.0 * uv.y));  
45.                 wave_color += fixed3(wave_width * 1.9, wave_width, wave_width * 1.5);  
46.             }  
47.             final_color = bg_color + wave_color;  
48.   
49.             return fixed4(final_color, 1.0);  
50.         }  
51.   
52.     ENDCG    
53.   
54.     SubShader {    
55.         Pass {    
56.             CGPROGRAM    
57.   
58.             #pragma vertex vert    
59.             #pragma fragment frag    
60.             #pragma fragmentoption ARB_precision_hint_fastest     
61.   
62.             ENDCG    
63.         }    
64.   
65.     }     
66.     FallBack Off    
67. }  

下面进行分析：

1. ComputeScreenPos的解析：

用于把三维的坐标转化为屏幕上的点。有两种方式，请参考 官方例子

ComputeScreenPos在UnityCG.cginc文件中定义如下：

[csharp] view plaincopy

1. // Projected screen position helpers  
2. #define V2F_SCREEN_TYPE float4  
3. inline float4 ComputeScreenPos (float4 pos) {  
4.     float4 o = pos * 0.5f;  
5.     #if defined(UNITY_HALF_TEXEL_OFFSET)  
6.     o.xy = float2(o.x, o.y*_ProjectionParams.x) + o.w * _ScreenParams.zw;  
7.     #else  
8.     o.xy = float2(o.x, o.y*_ProjectionParams.x) + o.w;  
9.     #endif  
10.      
11.     #if defined(SHADER_API_FLASH)  
12.     o.xy *= unity_NPOTScale.xy;  
13.     #endif  
14.       
15.     o.zw = pos.zw;  
16.     return o;  
17. }  

原理解析（待续）

2. 背景的绘制

2.1) fmod用于求余数，比如fmod(1.5, 1.0) 返回0.5；

2.2) step用于大小的比较，step(a,x) :  0 if x<a; 1 if x>=a; 比如: step(1, 1.2), 返回1; step(1, 0.8) 返回0；

2.3) 结合fmod和step可以得到一个虚线的效果。 比如要得到虚线段长度为1的代码如下：

c1 = fmod(x, 2*width); c1=step(width,c1); //其中width为1

那么如果x的范围是［0,1)，c1的值为0；范围为[1,2)，c1的值为1；2为一个周期；

那么fmod起到了制作周期的作用，step计算周期内的0和1；

2.4)把2.3中的知识运用到2维，就可以计算出方块。

lerp函数的用法：lerp( a , b ,f )， f为百分数（取值范围［0，1］）；如果f为0，则lerp返回a，f为1，则返回b。f为0到1之间，就返回a到b之间的值。

代码中的 lerp(uv.x * COLOR1, uv.y * COLOR2, c1*c2); 其中c1和c2的取值不是为1，就是为0，所以就可以变成网格的情况。 背景绘制如下：

3. 波纹的绘制

3.1 ) 坐标的转化

uv = -1.0 + 2.0*uv;  // 把原始的uv进行扩展和位移，得到新的uv。我们的操作就是在新的uv上进行的，最终显示时会映射到原来到uv，请参考下图

3.2 )  画一条直线：

由于上面把y轴移动到屏幕的中心，所以屏幕的上半部分为正的，下半部分为负的，代码如下：

[csharp] view plaincopy

1. wave_width = abs(1.0 / (50.0 * uv.y));  
2. wave_color = fixed3(wave_width * 1.9, wave_width, wave_width * 1.5);  

其中50.0是用来控制线的宽度的（数值越大，线越细），效果如下：

3.3）把直线变为曲线，并使其动起来：

[csharp] view plaincopy

1. uv.y += (0.07 * sin(uv.x*10 + _Time.y));  
2. wave_width = abs(1.0 / (50.0 * uv.y));  
3. wave_color = fixed3(wave_width * 1.9, wave_width, wave_width * 1.5);  

效果如下：

3.4）多画几条曲线，形成波浪：

[csharp] view plaincopy

1. for(float i=0.0; i<10.0; i++) {  
2.     uv.y += (0.07 * sin(uv.x + i/7.0 +  _Time.y));  
3.     wave_width = abs(1.0 / (150.0 * uv.y));  
4.     wave_color += fixed3(wave_width * 1.9, wave_width, wave_width * 1.5);  
5. }  

最终效果请见文章开头。

其实写shader，很多时候都是要通过不断地效果叠加并调试来达到效果。

下面该上我的笔记了：

所以如有大神路过，也恰好看到了本文有解释不当或错误的地方，还恳请指出！

Shader "ShaderToy/wave_test" {CGINCLUDE  // Upgrade NOTE: excluded shader from DX11 and Xbox360; has structs without semantics (struct v2f members srcPos)#pragma exclude_renderers d3d11 xbox360#include "UnityCG.cginc"              #pragma target 3.0  //vertex to fragment，用来将vert中计算的值传给frag的结构体struct v2f {  //尽量用SV_POSITION，比POSITION适应的设备更广泛float4 pos:SV_POSITION;  float4 srcPos; };//appdata_base，内置结构体，包含三个成员: 顶点，法线，纹理坐标v2f vert(appdata_base v) {v2f o;//将顶点从模型坐标转到摄像机能看到的位置（自己的理解，比较含糊不清。如有完善的解释，请留言指出下，谢谢= =）o.pos = mul (UNITY_MATRIX_MVP, v.vertex);//计算出对应在屏幕上的坐标o.srcPos = ComputeScreenPos(o.pos);return o;}fixed4 frag(v2f i) : COLOR0 {//fixed3 COLOR1 = fixed3(0.0,0.0,0.3);//fixed3COLOR2 = fixed3(0.5,0.0,0.0);//为了好理解，把以上代码改为fixed3 COLOR1 = fixed3(0.0,0.0,1);//bluefixed3 COLOR2 = fixed3(1,0.0,0.0);//redfloat BLOCK_WIDTH = 0.03;//除以齐次坐标i.srcPos.w，得到真正在屏幕上对应像素的坐标，以左下角为原点，范围为[0, 1]float2 uv = (i.srcPos.xy/i.srcPos.w);// To create the BG pattern，创建背景fixed3 final_color = fixed3(1.0);fixed3 bg_color = fixed3(0.0);fixed3 wave_color = fixed3(0.0);//这里BLOCK_WIDTH为0.03，那么就是对0.06取余，产生的c1也就是[0, 0.06)float c1 = fmod(uv.x, 2.0* BLOCK_WIDTH);//这里的c1 = step(BLOCK_WIDTH, c1) 可以换成c1 = c1<BLOCK_WIDTH ? 0 : 1//也就是为了产生两片间隔的区域，一个在[0, 0.03)范围内，一个在[0.03, 0.06)范围内c1 = step(BLOCK_WIDTH, c1);//以下对y的解释和上面的相似float c2 = fmod(uv.y, 2.0* BLOCK_WIDTH);c2 = step(BLOCK_WIDTH, c2);//bg_color = lerp(uv.x * COLOR1, uv.y * COLOR2, c1*c2);//这里的uv.x和uv.y的作用只是为了混合颜色，好看而已。为了好理解我们选择去掉。/*以下代码可以通过试数来理解，比如开始uv.x = uv.y = 0，那么c1最终等于0，c2也等于0，c1*c2 = 0, 那么bg_color为蓝色（COLOR1）再来，uv.x = 0, uv.y = 0.04的情况，c1最终等于0，而c2等于1，c1*c2 = 0, 那么bg_color还是为蓝色再来，uv.x = 0.05, uv.y = 0.04的情况，c1最终等于1，c2也等于1，c1*c2 = 1, 那么bg_color就为红色了（COLOR2）这样，最终就会产生以蓝色为背景颜色，红色条纹被分割为一个个小方块的整个shader的背景*//*我为什么说是红色条纹被分割呢？我们试着把下面代码替换为bg_color = lerp(COLOR1, COLOR2, c1)，就一目了然了，通过这个替换也就知道了前面对 2.0* BLOCK_WIDTH 取余数和与 BLOCK_WIDTH 比较的意义了，结果是c1为1就是红色，为0就是蓝色*/bg_color = lerp(COLOR1, COLOR2, c1*c2);// To create the waves ，创建波浪float wave_width = 0.01;//将uv的范围从[0, 1]转到[-1, 1]uv = -1.0 + 2.0*uv;/*如果试着把uv.y += 0.1;去掉，会发现线条向下移动了，反之减去0.1，会向上移动。原因稍后解释。*/uv.y += 0.1;for(int i=0; i<10; i++) {/*这里是一个振动函数y=A sin(ωx+φ)+b，那么每一个数的意义就清楚了这里面的数你都可以更改来实现你喜欢的效果而sin函数的作用也就是为了随着uv.x的增大，而产生一系列对应的数，这些数连续起来就形成了一个sin的振动曲线了（也可以改成cos）这里的_Time是内置float4变量，Time (t/20, t, t*2, t*3), use to animate things inside the shaders._Time让曲线运动起来*/uv.y += (0.07 * sin(uv.x + i/7.0 ));wave_width = 150.0;//effectDegree是对当前uv坐标颜色值的影响程度，值越大，影响就越大//这里用abs是因为uv.y可能为负，不用abs会造成线条的下半部分为黑色/*下面是关键了，有几个关于创建波浪的问题。1. uv.y是怎么影响到颜色值的？2. wave_width为什么能控制线条的粗细？3. uv.x的作用是什么？答：1. 这里我们来反推，假如我们想使当前的像素点输出白色，那么我们要使wave_color为1。即让effectDegree的值为最大，而effectDegree是通过abs(1.0 / (wave_width * uv.y))计算得来的。又因为uv.y范围是[-1, 1]，y（简写为y）越大，effectDegree越小。所以我们想要使effectDegree最大，那么就是让abs(uv.y)为最小，那就是0咯，而对应一下屏幕坐标，y为0时对应的就是屏幕中间了。所以线条才显示到屏幕中间的。（y对应像素值还原回来就是:(0+1)/2 = 0.5，屏幕中间）这里再来解释上面提到的。uv.y+=0.1，导致原来计算结果uv.y为0(对应像素坐标y=0.5)的，现在为0.1了，也就是计算出的颜色不为白色了。而原来计算结果为-0.1(对应像素坐标y=0.45)的，现在为0了，计算结果就是白色了。对应一下像素坐标，上为正，下为负。 所以作用的效果就是线条向下移动了（但是最终实质是绘制的颜色变了而已，并不是真的移动了).2. 原理也和上面的一样，上面的uv.y是变值，对每一个像素点的影响就不同，而wave_width是定值，对每个像素点的影响都是一样的，所以加大wave_width，线条变细，反之，变粗。3. 随着uv.x的增大使sin产生连续的点，形成具有sin振动曲线特征的曲线*///float effectDegree = 1.0 / (wave_width * abs(uv.y));float effectDegree = abs(1.0 / (wave_width * uv.y));//wave_color += fixed3(effectDegree * 1.9, effectDegree, effectDegree * 1.5);//同样为了方便理解，我们去掉调试颜色效果的数值wave_color += fixed3(effectDegree, effectDegree, effectDegree);}/*wave_color的值很大时，导致最终颜色为白色，wave_color趋于0时，显示的就是背景颜色而在(0, 1)这个区间时，wave_color会与bg_color混合导致在线条周围有一个渐变的比较柔和的效果*/final_color = bg_color + wave_color;return fixed4(final_color, 1.0);}ENDCG  SubShader {  Pass {  CGPROGRAM  #pragma vertex vert  #pragma fragment frag  #pragma fragmentoption ARB_precision_hint_fastest   ENDCG  }  }   FallBack Off  }