unity-shader 2D精灵图描边效果

今天我们来实现一个简单的2D精灵图描边效果，效果图如下：

准备工作：

首先我们先打开unity新建一个场景，导入一个图片，并把该图片设置为Sprite类型，如图：

  

实现思路：

可以通过判断该像素周围是否有透明度为 0的值，如果有，则说明该像素位于边缘。
所以我们需要打开alpha blend，即： Blend SrcAlpha OneMinusSrcAlpha，并且加入渲染队列，

Tags{
     "Queue" = "Transparent"
}
Blend SrcAlpha OneMinusSrcAlpha

下面我们开始编写片元着色器，顶点着色器就是常规的顶点坐标变换，这里就不贴代码了，主要来看看片元着色器：

  fixed4 frag (v2f i) : SV_Target
  {
      fixed4 col = tex2D(_MainTex, i.uv);
      //计算该像素的邻近像素
      float2 up_uv = i.uv + float2(0,1) * _lineWidth * _MainTex_TexelSize.xy;
      float2 down_uv = i.uv + float2(0,-1) * _lineWidth * _MainTex_TexelSize.xy;
      float2 left_uv = i.uv + float2(-1,0) * _lineWidth * _MainTex_TexelSize.xy;
      float2 right_uv = i.uv + float2(1,0) * _lineWidth * _MainTex_TexelSize.xy;
		
      float w = tex2D(_MainTex,up_uv).a *tex2D(_MainTex,down_uv).a *tex2D(_MainTex,left_uv).a *tex2D(_MainTex,right_uv).a;
      //如果有像素透明度为0，说明该像素位于边缘，颜色值为边框颜色。
	  if(w == 0){
      	col.rgb = _lineColor;
      }
      return col;
  }

_MainTex_TexelSize：贴图像素尺寸大小
我们可以通过该属性计算出周围（上下左右）的像素坐标，然后判断有没有透明度为0的值。
如果为0就返回边框颜色。
效果如下：

虽然我们实现了该功能，但是我们仔细观察会发现边缘锯齿很严重，不平滑。我们可以做下优化，利用插值来平滑过渡：

   fixed4 frag (v2f i) : SV_Target
 {
     fixed4 col = tex2D(_MainTex, i.uv);
     float2 up_uv = i.uv + float2(0,1) * _lineWidth * _MainTex_TexelSize.xy;
     float2 down_uv = i.uv + float2(0,-1) * _lineWidth * _MainTex_TexelSize.xy;
     float2 left_uv = i.uv + float2(-1,0) * _lineWidth * _MainTex_TexelSize.xy;
     float2 right_uv = i.uv + float2(1,0) * _lineWidth * _MainTex_TexelSize.xy;

     float w = tex2D(_MainTex,up_uv).a *tex2D(_MainTex,down_uv).a *tex2D(_MainTex,left_uv).a *tex2D(_MainTex,right_uv).a;
     // if(w == 0){
     //    col.rgb = _lineColor;
     // }
     col.rgb = lerp(_lineColor,col.rgb,w);
     return col;
 }

完整代码可以在github找到！