1. 程式人生 > >Unity Shader - Sprite Shader之簡單摳圖效果

Unity Shader - Sprite Shader之簡單摳圖效果

Sprite摳圖效果:

  

                                                              摳掉白色

  

                                                    摳掉黑色

前言

在PhotoShop中我們經常會用到摳圖操作,現在就用Shader實現一個簡單的摳圖效果。

實現原理:

使用當前畫素顏色與需要摳掉的顏色相減作比較,然後與一個指定的閾值比較以決定是否將其顯示出來;

Unity Shader實現程式碼如下:

Shader "Demo/SpriteShader"
 {  
     Properties
     {
 	   	[PerRendererData]_MainTex ("Sprite Texture", 2D) = "white" {}    //   當前的Sprite圖(新增[PerRendererData]後在屬性面板中不可見) 
        _Color ("Alpha Color Key", Color) = (0,0,0,1)                               // 用於比較的基色(想過濾掉什麼顏色,這個顏色就設定為那種顏色)
        _Range("Range",Range (0, 1.01))=0.1          							// 決定摳圖範圍的域                                
        [MaterialToggle] PixelSnap ("Pixel snap", Float) = 0                     // 在屬性面板中以按鈕形式顯示(在此Shader中沒用到)
     }
     SubShader
     {
       //Sprite圖一般均為透明貼圖,需要做以下處理
         Tags 
         { 
         	"Queue"="Transparent" 
         	"IgnoreProjector"="True" 
         	"RenderType"="Transparent" 
         	"PreviewType"="Plane"
         	"CanUseSpriteAtlas"="True"
         }

         Pass
         {
           //Sprite圖一般均為透明貼圖,需要做以下處理
         	Cull Off
     		Lighting Off
     		ZWrite Off
     		Fog { Mode Off } 
     		Blend SrcAlpha OneMinusSrcAlpha    //Sprite圖一般均為透明貼圖,需要做以下處理

             CGPROGRAM
             #pragma vertex vert
             #pragma fragment frag

             sampler2D _MainTex;
             float4 _Color;
             half _Range;
             struct Vertex
             {
                 float4 vertex : POSITION;
                 float2 uv_MainTex : TEXCOORD0;
                 float2 uv2 : TEXCOORD1;
             };

             struct Fragment
             {
                 float4 vertex : POSITION;
                 float2 uv_MainTex : TEXCOORD0;
             };

             Fragment vert(Vertex v)
             {
                 Fragment o;

                 o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
                 o.uv_MainTex = v.uv_MainTex;

                 return o;
             }

             float4 frag(Fragment IN) : COLOR
             {
                 float4 o = float4(1, 1, 1, 1);

                 half4 c = tex2D (_MainTex, IN.uv_MainTex);
                 o.rgb = c.rgb;
                 //使用當前畫素顏色與基色相減,然後與域相比較以決定是否將其顯示出來
                 if(abs(c.r-_Color.r)<_Range && abs(c.g-_Color.g)<_Range && abs(c.b-_Color.b)<_Range)
                 {
                     o.a = 0;
                 }
                 else
                 {
                     o.a = 1;
                 }

                 return o;
             }

             ENDCG
         }
     }
 }
_Color是用於比較的基色 
_range是決定摳圖範圍的域 

可以看到使用當前畫素顏色與基色相減,然後與域相比較以決定是否將其顯示出來。

效果一:

  


效果二:


注:對應的原圖請檢視開頭效果圖處;


源工程下載:Unity Shader - Sprite Shader之簡單摳圖