Vertex and fragment shader 4 - 2D過場淡入淡出(Fade in/out) - 方塊陣列(三角、交錯)

　　同樣方塊陣列的切除，切除的方式稍微做些變化，同樣也是憑印象製作一些好像在以前的ＡＶＧ有看過的效果。

簡單三角切除的效果

簡單同時交錯切除的效果

簡單先後交錯切除的效果

同樣設定基本屬性，材質、顏色、密度以及切除的量

_MainTex ("Base (RGB)", 2D) = "white" {}
_Color ("Color", Color) = (1,1,1,1)
_DensityX ("Density X", Float) = 15.0
_DensityY ("Density Y", Float) = 15.0
_Amount ("Amount", Range (0,1)) = 0

簡單三角切除，Ｘ座標的值減去Ｙ座標的值，此時方形會有一半是負值，因此調整 _Amount 為(-1,1)，這時再減去 _Amount 小於0就不顯示，這樣子只要調整 _Amount 就可以有三角形的效果。

float4 textureColor = tex2D(_MainTex, input.uv);
clip (frac(input.screenPos.x * _DensityX) - frac(input.screenPos.y * _DensityY) - (1-_Amount*2) );
return textureColor * _Color;

簡單同時交錯切除，調整一下參數並使用(1-)來造成相反方向的切除。

if( frac(input.screenPos.y * _DensityX/2) > 0 && frac(input.screenPos.y * _DensityY/2) < 0.5 ) {
   clip (frac(input.screenPos.x * _DensityX) - _Amount);
} else {
   clip (frac(1-input.screenPos.x * _DensityY) - _Amount);
}

簡單先後交錯切除的效果，隨便做做直接用If來判斷目前的值來切除，需要Ｘ跟Ｙ的數值相同才有這樣的效果。

if( frac(input.screenPos.y * _DensityY/2) < 0.5 ) {
   if( frac(input.screenPos.x * _DensityX/2) < 0.5) {
      clip (frac(input.screenPos.x * _DensityX)-_Amount*2);
   } else {
      clip (frac(1-input.screenPos.x * _DensityX)+1-_Amount*2);
   }
} else {
   if( frac(input.screenPos.x * _DensityX/2) > 0.5 ) {
      clip (frac(input.screenPos.x * _DensityX)-_Amount*2);
   } else {
      clip (frac(1-input.screenPos.x * _DensityX)+1-_Amount*2);
   }
}

　　在Unity當中使用的時候，調整 _Amount 調整切除的量，調整 _DensityX 跟 _DensityY 來決定長寬切的數量，然後調整 _Color 給材質加成顏色。


注意，因為使用的是螢幕座標，所以會是以遊戲顯示畫面的高寬去等分。


完整Shader Code

Shader "Custom/Fading" 
{
   Properties
   {
      _MainTex ("Base (RGB)", 2D) = "white" {}
      _Color ("Color", Color) = (1,1,1,1)
      _DensityX ("Density X", Float) = 15.0
      _DensityY ("Density Y", Float) = 15.0
      _Amount ("Amount", Range (0,1)) = 0
   }

   SubShader {
      Pass {
         Cull Off
         Lighting Off
         ZWrite Off
         Blend SrcAlpha OneMinusSrcAlpha

         CGPROGRAM

         #pragma vertex vert
         #pragma fragment frag

         uniform sampler2D _MainTex;
         uniform float4 _Color;
         uniform float _DensityX;
         uniform float _DensityY;
         uniform float _Amount;

         struct vertexInput {
            float4 vertex : POSITION;
            float4 texcoord : TEXCOORD0;
         };
         struct vertexOutput {
            float4 pos : SV_POSITION;
            float2 uv : TEXCOORD0;
            float4 screenPos : TEXCOORD5;
         };

         vertexOutput vert(vertexInput input)
         {
            vertexOutput output;

            output.uv = input.texcoord;
            output.pos = mul(UNITY_MATRIX_MVP, input.vertex);
            output.screenPos = output.pos * 0.5 + 0.5;
            return output;
         }

         half4 frag(vertexOutput input) : COLOR
         {
            half4 textureColor = tex2D(_MainTex, input.uv);
            if( frac(input.screenPos.y * _DensityY/2) < 0.5 ) {
               if( frac(input.screenPos.x * _DensityX/2) < 0.5) {
                  clip (frac(input.screenPos.x * _DensityX)-_Amount*2);
               } else {
                  clip (frac(1-input.screenPos.x * _DensityX)+1-_Amount*2);
               }
            } else {
               if( frac(input.screenPos.x * _DensityX/2) > 0.5 ) {
                  clip (frac(input.screenPos.x * _DensityX)-_Amount*2);
               } else {
                  clip (frac(1-input.screenPos.x * _DensityX)+1-_Amount*2);
               }
            }
            return textureColor * _Color;
         }
         ENDCG
      }
   }
   Fallback "Diffuse"
} 

目前都只是初學，使用簡單的計算，如果有任何想法歡迎提出。