logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

[UnityShader3]2D描边效果

 勤奋不止 2017-10-10

参考链接：

http:///thread-6502-1-1.html

http://www.jianshu.com/p/1d9d439c28fa


1.


[csharp] view plain copy
  1. Shader "Custom/Edge"  
  2. {  
  3.     Properties  
  4.     {  
  5.         _MainTex ("Texture", 2D) = "white" {}  
  6.         _OffsetUV ("OffsetUV", Range(0, 1)) = 0.1  
  7.         _EdgeColor ("EdgeColor", Color) = (1, 0, 0, 1)  
  8.         _AlphaTreshold ("Treshold", Range(0, 1)) = 0.5    
  9.     }  
  10.     SubShader  
  11.     {  
  12.         Tags { "Queue" = "Transparent" }  
  13.         Blend SrcAlpha OneMinusSrcAlpha  
  14.   
  15.         Pass  
  16.         {  
  17.             CGPROGRAM  
  18.             #pragma vertex vert  
  19.             #pragma fragment frag  
  20.             #include "UnityCG.cginc"  
  21.   
  22.             struct appdata  
  23.             {  
  24.                 float4 vertex : POSITION;  
  25.                 fixed2 uv : TEXCOORD0;  
  26.             };  
  27.   
  28.             struct v2f  
  29.             {             
  30.                 float4 vertex : SV_POSITION;  
  31.                 fixed2 uv[5] : TEXCOORD0;  
  32.             };  
  33.   
  34.             sampler2D _MainTex;  
  35.             float4 _MainTex_ST;  
  36.             fixed _OffsetUV;  
  37.             fixed4 _EdgeColor;  
  38.             fixed _AlphaTreshold;  
  39.   
  40.             v2f vert (appdata v)  
  41.             {  
  42.                 v2f o;  
  43.                 o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);  
  44.                   
  45.                 o.uv[0] = v.uv;    
  46.                 o.uv[1] = v.uv + fixed2(0, _OffsetUV); //up    
  47.                 o.uv[2] = v.uv + fixed2(-_OffsetUV, 0); //left    
  48.                 o.uv[3] = v.uv + fixed2(0, -_OffsetUV); //bottom    
  49.                 o.uv[4] = v.uv + fixed2(_OffsetUV, 0); //right   
  50.   
  51.                 return o;  
  52.             }  
  53.               
  54.             fixed4 frag (v2f i) : SV_Target  
  55.             {  
  56.                 fixed4 original = tex2D(_MainTex, i.uv[0]);    
  57.                 fixed alpha = original.a;  
  58.     
  59.                 fixed p1 = tex2D(_MainTex, i.uv[1]).a;    
  60.                 fixed p2 = tex2D(_MainTex, i.uv[2]).a;    
  61.                 fixed p3 = tex2D(_MainTex, i.uv[3]).a;    
  62.                 fixed p4 = tex2D(_MainTex, i.uv[4]).a;    
  63.         
  64.                 alpha = p1 + p2 + p3 + p4 + alpha;    
  65.                 alpha /= 5;    
  66.     
  67.                 if (alpha < _AlphaTreshold) original.rgb = _EdgeColor.rgb;    
  68.           
  69.                 return original;   
  70.             }  
  71.             ENDCG  
  72.         }  
  73.     }  
  74. }  


2.


[csharp] view plain copy
  1. Shader "Custom/Edge"  
  2. {  
  3.     Properties  
  4.     {  
  5.         _Edge ("Edge", Range(0, 0.2)) = 0.043  
  6.         _EdgeColor ("EdgeColor", Color) = (1, 1, 1, 1)  
  7.         _MainTex ("MainTex", 2D) = "white" {}  
  8.     }  
  9.     SubShader  
  10.     {  
  11.         Pass  
  12.         {  
  13.             CGPROGRAM  
  14.             #pragma vertex vert  
  15.             #pragma fragment frag  
  16.             #include "UnityCG.cginc"  
  17.   
  18.             fixed _Edge;  
  19.             fixed4 _EdgeColor;  
  20.             sampler2D _MainTex;  
  21.   
  22.             struct appdata  
  23.             {  
  24.                 float4 vertex : POSITION;  
  25.                 fixed2 uv : TEXCOORD0;  
  26.             };  
  27.   
  28.             struct v2f  
  29.             {  
  30.                 float4 vertex : SV_POSITION;  
  31.                 float4 objVertex : TEXCOORD0;  
  32.                 fixed2 uv : TEXCOORD1;  
  33.             };  
  34.   
  35.             v2f vert (appdata v)  
  36.             {  
  37.                 v2f o;  
  38.                 o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);  
  39.                 o.objVertex = v.vertex;  
  40.                 o.uv = v.uv;  
  41.   
  42.                 return o;  
  43.             }  
  44.               
  45.             fixed4 frag (v2f i) : SV_Target  
  46.             {     
  47.                 fixed x = i.uv.x;  
  48.                 fixed y = i.uv.y;  
  49.                       
  50.                 if((x < _Edge) || (abs(1 - x) < _Edge) || (y < _Edge) || (abs(1 - y) < _Edge))   
  51.                 {  
  52.                     return _EdgeColor * abs(cos(_Time.y));  
  53.                 }  
  54.                 else   
  55.                 {  
  56.                     fixed4 color = tex2D(_MainTex, i.uv);  
  57.                     return color;  
  58.                 }  
  59.   
  60.                 //return i.objVertex;  
  61.                 //return fixed4(i.uv, 0, 1);  
  62.             }  
  63.             ENDCG  
  64.         }  
  65.     }  
  66. }  



3.如下图，左边是一个Image，右边是一个Plane。


[csharp] view plain copy
  1. // Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)'  
  2.   
  3. Shader "Custom/Edge"    
  4. {    
  5.     Properties    
  6.     {    
  7.         _Edge ("Edge", Range(0, 0.2)) = 0.043    
  8.         _EdgeColor ("EdgeColor", Color) = (1, 1, 1, 1)    
  9.         _FlowColor ("FlowColor", Color) = (1, 1, 1, 1)   
  10.         _FlowSpeed ("FlowSpeed", Range(0, 10)) = 3  
  11.         _MainTex ("MainTex", 2D) = "white" {}    
  12.     }    
  13.     SubShader    
  14.     {    
  15.         Tags { "Queue"="Transparent" "RenderType"="Transparent" "IgnoreProjector"="True" }   
  16.   
  17.         Pass    
  18.         {    
  19.             ZWrite Off    
  20.             Blend SrcAlpha OneMinusSrcAlpha   
  21.   
  22.             CGPROGRAM    
  23.             #pragma vertex vert    
  24.             #pragma fragment frag    
  25.             #include "UnityCG.cginc"    
  26.     
  27.             fixed _Edge;    
  28.             fixed4 _EdgeColor;    
  29.             fixed4 _FlowColor;  
  30.             float _FlowSpeed;  
  31.             sampler2D _MainTex;  
  32.   
  33.             struct appdata    
  34.             {    
  35.                 float4 vertex : POSITION;    
  36.                 fixed2 uv : TEXCOORD0;    
  37.             };    
  38.     
  39.             struct v2f    
  40.             {    
  41.                 float4 vertex : SV_POSITION;    
  42.                 fixed2 uv : TEXCOORD1;    
  43.             };    
  44.     
  45.             v2f vert (appdata v)    
  46.             {    
  47.                 v2f o;    
  48.                 o.vertex = UnityObjectToClipPos(v.vertex);     
  49.                 o.uv = v.uv;    
  50.                 return o;    
  51.             }    
  52.                 
  53.             fixed4 frag (v2f i) : SV_Target    
  54.             {       
  55.                 fixed x = i.uv.x;    
  56.                 fixed y = i.uv.y;    
  57.               
  58.                 if((x < _Edge) || (abs(1 - x) < _Edge) || (y < _Edge) || (abs(1 - y) < _Edge))     
  59.                 {    
  60.                     //点旋转公式：  
  61.                     //假设对图片上任意点(x,y)，绕一个坐标点(rx0,ry0)逆时针旋转a角度后的新的坐标设为(x0,y0)，有公式：  
  62.                     //x0 = (x - rx0) * cos(a) - (y - ry0) * sin(a) + rx0 ;  
  63.                     //y0 = (x - rx0) * sin(a) + (y - ry0) * cos(a) + ry0 ;  
  64.   
  65.                     float a = _Time.y * _FlowSpeed;   
  66.                     float2 rotUV;  
  67.   
  68.                     x -= 0.5;  
  69.                     y -= 0.5;  
  70.                     rotUV.x = x * cos(a) - y * sin(a) + 0.5;  
  71.                     rotUV.y = x * sin(a) + y * cos(a) + 0.5;  
  72.                       
  73.                     fixed temp = saturate(rotUV.x - 0.5);//-0.5作用是调整流动颜色的比例  
  74.                     return _EdgeColor * (1 - temp) + _FlowColor * temp;  
  75.                 }    
  76.                 else     
  77.                 {    
  78.                     //fixed4 color = tex2D(_MainTex, i.uv);    
  79.                     return fixed4(1, 1, 1, 0);    
  80.                 }     
  81.             }    
  82.             ENDCG    
  83.         }    
  84.     }    
  85. }    


4.通过观察上面的效果图，会发现右边的Plane出现了锯齿。而解决锯齿一般的方法就是做模糊处理，模糊处理一般又有贴图处理和代码处理之分，这里使用的是贴图处理。贴图处理需要提供一张边界模糊的贴图。



如上图，左下是内边反锯齿的图，右上是未经处理的图。

[csharp] view plain copy
  1. // Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)'    
  2.     
  3. Shader "Custom/Edge2"      
  4. {      
  5.     Properties      
  6.     {      
  7.         _Edge ("Edge", Range(0, 0.2)) = 0.043      
  8.         _EdgeColor ("EdgeColor", Color) = (1, 1, 1, 1)      
  9.         _FlowColor ("FlowColor", Color) = (1, 1, 1, 1)     
  10.         _FlowSpeed ("FlowSpeed", Range(0, 10)) = 3    
  11.         _MainTex ("MainTex", 2D) = "white" {}      
  12.     }      
  13.     SubShader      
  14.     {      
  15.         Tags { "Queue"="Transparent" "RenderType"="Transparent" "IgnoreProjector"="True" }     
  16.     
  17.         Pass      
  18.         {      
  19.             ZWrite Off      
  20.             Blend SrcAlpha OneMinusSrcAlpha     
  21.     
  22.             CGPROGRAM      
  23.             #pragma vertex vert      
  24.             #pragma fragment frag      
  25.             #include "UnityCG.cginc"      
  26.       
  27.             fixed _Edge;      
  28.             fixed4 _EdgeColor;      
  29.             fixed4 _FlowColor;    
  30.             float _FlowSpeed;    
  31.             sampler2D _MainTex;    
  32.     
  33.             struct appdata      
  34.             {      
  35.                 float4 vertex : POSITION;      
  36.                 fixed2 uv : TEXCOORD0;      
  37.             };      
  38.       
  39.             struct v2f      
  40.             {      
  41.                 float4 vertex : SV_POSITION;      
  42.                 fixed2 uv : TEXCOORD1;      
  43.             };      
  44.       
  45.             v2f vert (appdata v)      
  46.             {      
  47.                 v2f o;      
  48.                 o.vertex = UnityObjectToClipPos(v.vertex);       
  49.                 o.uv = v.uv;      
  50.                 return o;      
  51.             }      
  52.                   
  53.             fixed4 frag (v2f i) : SV_Target      
  54.             {               
  55.                 fixed4 color = tex2D(_MainTex, i.uv);  
  56.                 float alpha = color.a;  
  57.   
  58.                 fixed x = i.uv.x;      
  59.                 fixed y = i.uv.y;    
  60.                 float a = _Time.y * _FlowSpeed;     
  61.                 float2 rotUV;    
  62.     
  63.                 x -= 0.5;    
  64.                 y -= 0.5;    
  65.                 rotUV.x = x * cos(a) - y * sin(a) + 0.5;    
  66.                 rotUV.y = x * sin(a) + y * cos(a) + 0.5;    
  67.                         
  68.                 fixed temp = saturate(rotUV.x - 0.5);//-0.5作用是调整流动颜色的比例    
  69.                 fixed4 finalColor = _EdgeColor * (1 - temp) + _FlowColor * temp;                  
  70.   
  71.                 finalColor.a = alpha;  
  72.                 return finalColor;     
  73.             }      
  74.             ENDCG      
  75.         }      
  76.     }      
  77. }   

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 勤奋不止 > 《游戏引擎unity》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多