Shader实例（流光实现）

Shader实例（流光实现）

流光效果

首先来看一下流光效果。流光效果是一个非常常见的效果，不仅仅是游戏，一些广告之类的也都会有这种效果。流光的原理还是比较简单的：首先就是需要一张流光图，这张流光图的大部分都是黑色，然后有一条亮线，然后我们在采样的时候，最终输出叠加上这张图的采样值，并根据时间调整采样的UV就可以有流光的效果啦。下面是一个比较简单的流光效果实现：

下面看属性参数：

接下来是SubShader中的一些参数定义

顶点函数处理

光照处理

以上是对于2D图像常用的流光实现方式，如果是3D物体用这种方式的话，可能会出现问题，所以对于3D物体，采用按照物体的世界坐标按时间偏移查询纹理贴图就行了

具体参数按需求改下就好了

按照方向消失或重现效果

我们再来看一个用模型空间坐标作为采样的uv的栗子，也是一种比较好玩的效果。比如我们需要一个模型身体按照一定的方向逐渐消失，直至全部消失掉的一个效果。下面说一下思路，与世界空间采样的流光效果一样，我们在vertex阶段记录一下vertex坐标，传递给fragment阶段，在fragment阶段用这个值和一个设定好的阈值进行比较，不满足条件的像素点直接discard，逐渐调整阈值，就可以得到让模型按照某个方向消失的效果了。代码如下：

[csharp]  view plain  copy

1. //按照方向消失的效果  
2. //by:CJB_King  
3. //2017.12.23 
4. Shader "SelfShader/DissolveEffectX"   
5. {  
6.     Properties  
7.     {  
8.         _MainTex("MainTex(RGB)", 2D) = "white" {}  
9.         _DissolveVector("DissolveVector", Vector) = (0,0,0,0)  
10.     }  
11.       
12.     CGINCLUDE  
13.     #include "Lighting.cginc"  
14.     uniform sampler2D _MainTex;  
15.     uniform float4 _MainTex_ST;  
16.     uniform float4 _DissolveVector;  
17.   
18.     struct v2f   
19.     {  
20.         float4 pos : SV_POSITION;  
21.         float3 worldNormal : NORMAL;  
22.         float2 uv : TEXCOORD0;  
23.         float3 worldLight : TEXCOORD1;  
24.         float4 objPos : TEXCOORD2;  
25.     };  
26.   
27.     v2f vert(appdata_base v)  
28.     {  
29.         v2f o;  
30.         o.pos = mul(UNITY_MATRIX_MVP, v.vertex);  
31.         o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);  
32.         //顶点转化到世界空间  
33.         o.objPos = v.vertex;  
34.         o.worldNormal = UnityObjectToWorldNormal(v.normal);  
35.         o.worldLight = UnityObjectToWorldDir(_WorldSpaceLightPos0.xyz);  
36.         return o;  
37.     }  
38.               
39.     fixed4 frag(v2f i) : SV_Target  
40.     {  
41.         half3 normal = normalize(i.worldNormal);  
42.         half3 light = normalize(i.worldLight);  
43.         fixed diff = max(0, dot(normal, light));  
44.         fixed4 albedo = tex2D(_MainTex, i.uv);  
45.         //不满足条件的discard  
46.         clip(i.objPos.xyz - _DissolveVector.xyz);  
47.         fixed4 c;  
48.         c.rgb = diff * albedo;  
49.         c.a = 1;  
50.         return c;  
51.     }  
52.     ENDCG  
53.   
54.     SubShader  
55.     {  
56.           
57.         Pass  
58.         {  
59.             Tags{ "RenderType" = "Opaque" }  
60.               
61.             CGPROGRAM  
62.             #pragma vertex vert  
63.             #pragma fragment frag  
64.             ENDCG     
65.         }  
66.     }  
67.     FallBack "Diffuse"  
68. }  

还有一个小问题，其实上图中的例子里面，模型从上到下，理想情况应该是调整Y轴，不过例子里面调整的确实X轴，原因应该与Unity导入之后会绕着X轴旋转90度有关，也就是原本在max里面的Y轴变成Unity里面的X轴。

下面，我们再看一下增加了边缘高亮的消失效果，为了让模消失的型边缘高亮，我们通过将用于clip的factor值与另一个高亮阈值值进行比较，如果factor小于高亮阈值，则返回一个高亮的颜色值，否则正常渲染。这样模型就总共有三种显示状态：clip状态，高亮状态，正常状态。代码如下：

[csharp]  view plain  copy

1. //消失效果  
2. //by：CJB_King
3. //2017.12.23 
4.   
5. Shader "SelfShader/DissolveEffectX"  
6. {  
7.     Properties{  
8.         _Diffuse("Diffuse", Color) = (1,1,1,1)  
9.         _DissolveColor("Dissolve Color", Color) = (0,0,0,0)  
10.         _MainTex("Base 2D", 2D) = "white"{}  
11.         _ColorFactor("ColorFactor", Range(0,1)) = 0.7  
12.         _DissolveThreshold("DissolveThreshold", Float) = 0    
13.     }  
14.       
15.     CGINCLUDE  
16.     #include "Lighting.cginc"  
17.     uniform fixed4 _Diffuse;  
18.     uniform fixed4 _DissolveColor;  
19.     uniform sampler2D _MainTex;  
20.     uniform float4 _MainTex_ST;  
21.     uniform float _ColorFactor;  
22.     uniform float _DissolveThreshold;    
23.       
24.     struct v2f  
25.     {  
26.         float4 pos : SV_POSITION;  
27.         float3 worldNormal : TEXCOORD0;  
28.         float2 uv : TEXCOORD1;  
29.         float4 objPos : TEXCOORD2;   
30.     };  
31.       
32.     v2f vert(appdata_base v)  
33.     {  
34.         v2f o;  
35.         o.pos = mul(UNITY_MATRIX_MVP, v.vertex);  
36.         o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);  
37.         o.worldNormal = mul(v.normal, (float3x3)unity_WorldToObject);  
38.         o.objPos = v.vertex;    
39.         return o;  
40.     }  
41.       
42.     fixed4 frag(v2f i) : SV_Target  
43.     {  
44.         float factor = i.objPos.x - _DissolveThreshold;  
45.         clip(factor);   
46.         //Diffuse + Ambient光照计算  
47.         fixed3 worldNormal = normalize(i.worldNormal);  
48.         fixed3 worldLightDir = normalize(_WorldSpaceLightPos0.xyz);  
49.         fixed3 lambert = saturate(dot(worldNormal, worldLightDir));  
50.         fixed3 albedo = lambert * _Diffuse.xyz * _LightColor0.xyz + UNITY_LIGHTMODEL_AMBIENT.xyz;  
51.         fixed3 color = tex2D(_MainTex, i.uv).rgb * albedo;  
52.         //等价于下面注释代码的操作  
53.         fixed lerpFactor = saturate(sign(_ColorFactor - factor));  
54.         return lerpFactor * _DissolveColor + (1 - lerpFactor) * fixed4(color, 1);  
55.         /* 
56.         if (factor < _ColorFactor) 
57.         { 
58.             return _DissolveColor; 
59.         } 
60.         return fixed4(color, 1);*/  
61.     }  
62.     ENDCG  
63.       
64.     SubShader  
65.     {  
66.         Tags{ "RenderType" = "Opaque" }  
67.         Pass  
68.         {  
69.             //不让模型穿帮，关掉了背面裁剪  
70.             Cull Off  
71.             CGPROGRAM  
72.             #pragma vertex vert  
73.             #pragma fragment frag     
74.             ENDCG  
75.         }  
76.     }  
77.     FallBack "Diffuse"  
78. }  

溶解效果进阶版

之前的文章里，我们研究过 溶解效果，不过这个效果是基于全身的，我们来尝试一下，把上面按照方向消失的效果与溶解效果结合起来，做成一个按照某个方向逐渐溶解的效果。要得到随机的溶解效果，我们需要采样一张噪声图，然后在原本会直接clip掉的部分根据采样的噪声图进行clip，就能得到按照方向的溶解效果啦。

[csharp]  view plain  copy

1. //溶解效果  
2. //by：CJB_King
3. //2017.12.23
4.   
5. Shader "SelfShader/DissolveEffectX"  
6. {  
7.     Properties{  
8.         _Diffuse("Diffuse", Color) = (1,1,1,1)  
9.         _DissolveColor("Dissolve Color", Color) = (1,1,1,1)  
10.         _MainTex("Base 2D", 2D) = "white"{}  
11.         _DissolveMap("DissolveMap", 2D) = "white"{}  
12.         _DissolveThreshold("DissolveThreshold", Range(0,1)) = 0  
13.         _DissolveSpeedFactor("DissolveSpeed", Range(0,5)) = 2  
14.         _DissolveControl("ColorFactorB", Float) = 0  
15.     }  
16.       
17.     CGINCLUDE  
18.     #include "Lighting.cginc"  
19.     uniform fixed4 _Diffuse;  
20.     uniform fixed4 _DissolveColor;  
21.     uniform sampler2D _MainTex;  
22.     uniform float4 _MainTex_ST;  
23.     uniform sampler2D _DissolveMap;  
24.     uniform float _DissolveThreshold;  
25.     uniform float _DissolveSpeedFactor;  
26.     uniform float _DissolveControl;   
27.       
28.     struct v2f  
29.     {  
30.         float4 pos : SV_POSITION;  
31.         float3 worldNormal : TEXCOORD0;  
32.         float2 uv : TEXCOORD1;  
33.         float4 objPos : TEXCOORD2;   
34.     };  
35.       
36.     v2f vert(appdata_base v)  
37.     {  
38.         v2f o;  
39.         o.pos = mul(UNITY_MATRIX_MVP, v.vertex);  
40.         o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);  
41.         o.worldNormal = mul(v.normal, (float3x3)unity_WorldToObject);  
42.         o.objPos = v.vertex;    
43.         return o;  
44.     }  
45.       
46.     fixed4 frag(v2f i) : SV_Target  
47.     {  
48.         fixed4 dissolve = tex2D(_DissolveMap, i.uv);  
49.         //Diffuse + Ambient光照计算  
50.         fixed3 worldNormal = normalize(i.worldNormal);  
51.         fixed3 worldLightDir = normalize(_WorldSpaceLightPos0.xyz);  
52.         fixed3 lambert = saturate(dot(worldNormal, worldLightDir));  
53.         fixed3 albedo = lambert * _Diffuse.xyz * _LightColor0.xyz + UNITY_LIGHTMODEL_AMBIENT.xyz;  
54.         fixed3 color = tex2D(_MainTex, i.uv).rgb * albedo;  
55.         float factor = i.objPos.x - _DissolveControl;  
56.         if(factor < 0)  
57.         {  
58.             clip(_DissolveThreshold - dissolve.r * abs(factor) * _DissolveSpeedFactor);  
59.         }  
60.         return fixed4(color, 1);  
61.     }  
62.     ENDCG  
63.       
64.     SubShader  
65.     {  
66.         Tags{ "RenderType" = "Opaque" }  
67.         Pass  
68.         {  
69.             Cull Off  
70.             CGPROGRAM  
71.             #pragma vertex vert  
72.             #pragma fragment frag     
73.             ENDCG  
74.         }  
75.     }  
76.     FallBack "Diffuse"  
77. }  

Shader "SelfShader/Dissolve"
{
	Properties
	{
		_MainColor("MainColor",COLOR)=(1,1,1,1)
		_MainTex ("Texture", 2D) = "white" {}
		_Noise("Noise",2D)="white"{}
		_Dissolve("Dissolve",Vector)=(0.2,0.5,0.8)
		_DissolveThread("DissolveThread",float)=0.2
		_DissolveColor("DissolveColor",COLOR)=(1,1,1,1)
		_DissolveColFactor("_DissolveColFactor",float)=2
		_FlyFactor("FlyFactor",float)=3
	}
	SubShader
	{
		Tags { "RenderType"="Opaque" }
		LOD 100

		Pass
		{
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			
			#include "UnityCG.cginc"
			#include "Lighting.cginc"
			struct a2v
			{
				float4 vertex : POSITION;
				float2 uv : TEXCOORD0;
				fixed3 normal:NORMAL;
			};

			struct v2f
			{
				float2 uv : TEXCOORD0;
				float4 pos : SV_POSITION;
				fixed3 worldNormal:TEXCOORD1;
				fixed3 worldPos:TEXCOORD2;
				fixed3 objPos:TEXCOORD3;
			};
			sampler2D _Noise;
			sampler2D _MainTex;
			float4 _MainTex_ST;
			fixed4 _MainColor;
			fixed4 _Dissolve;
			float _DissolveThread;
			fixed4 _DissolveColor;
			float _DissolveColFactor;
			float _FlyFactor;
			v2f vert (a2v v)
			{
				v2f o;
				o.pos = UnityObjectToClipPos(v.vertex);
				o.worldPos=mul((float3x3)unity_ObjectToWorld,v.vertex);
				o.worldNormal=UnityObjectToWorldNormal(v.normal);
				o.objPos=v.vertex;
				o.uv = TRANSFORM_TEX(v.uv, _MainTex);
				o.pos.xyz+=v.normal*saturate(_DissolveThread-_FlyFactor)*_FlyFactor;
				return o;
			}
			
			fixed4 frag (v2f i) : SV_Target
			{
				fixed3 worldNor=normalize(i.worldNormal);
				fixed3 lightDir=normalize(_WorldSpaceLightPos0.xyz);
				fixed4 albedo = tex2D(_MainTex, i.uv)*_MainColor;
				fixed4 noiseColor=tex2D(_Noise,i.uv);
				float factor=noiseColor.r-_DissolveThread;
				clip(factor);
				fixed3 ambient=UNITY_LIGHTMODEL_AMBIENT.xyz*albedo.rgb;
				fixed3 diffuse=_LightColor0.rgb*albedo.rgb*(0.5*dot(lightDir,worldNor)+0.5);
				float lerpFactor=saturate(sign(_DissolveColFactor-factor));
				return lerp(fixed4(ambient+diffuse,1),_DissolveColor,lerpFactor);
			}
			ENDCG
		}
	}
}