Vertex and fragment shader 8 - 2D過場淡入淡出(Fade in/out) - 圓圈陣列(清楚/模糊)

　　這個就是類似之前的方塊陣列，只不過再加上之前使用的圓形切除，來達到這樣的效果，也可以讓這類型的效果不會太過單調。

呈現的效果大概是這樣

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

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

在輸出的時候由切分後各自的區塊去判斷半徑，減去_Amount之後小於零就切除或是保留，看你_Direction的方向。

float2 coord = input.screenPos.xy;
clip((1-_Direction*2)*(_Amount*2-length(frac(float2(_DensityX*coord.x,_DensityY*coord.y))*2-1.0)));

　　最後在Unity當中使用的時候，調整 _Amount 調整切除的量，調整 _Density 來決定ＸＹ軸的切分數量，調整 _Direction 調整切除方向。


注意，因為使用的是螢幕座標，所以會是以遊戲顯示畫面的高寬去等分。所以也可能會因為螢幕大小而變形，當然也可以改為使用材質座標。


這個也可以使用之前圓形模糊的效果，基本上也是切分等分後，由各自的區塊中心去判斷半徑然後計算Alpha值來做模糊。

float a = clamp(length(frac(float2(_DensityX*coord.x,_DensityY*coord.y))*2-1.0)*(1-_Amount)/_Amount,0.0,1.0);
float4 color = lerp(float4(0.0, 0.0, 0.0, _Direction),float4(textureColor.rgb,1-_Direction*2),a) * _Color;
if((1-_Direction*2)*(_Amount*2-length(frac(float2(_DensityX*coord.x,_DensityY*coord.y))*2-1.0)) < 0) {
   color = lerp(float4(textureColor.rgb,_Direction),float4(textureColor.rgb,1-_Direction*2),a) * _Color;
}

呈現的效果大概是這樣

完整Shader Code

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

   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 _Amount;
         uniform float _Direction;
         uniform float _DensityX;
         uniform float _DensityY;

         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
         {
            float4 textureColor = tex2D(_MainTex, input.uv);
            float2 coord = input.screenPos.xy;
            float a = clamp(length(frac(float2(_DensityX*coord.x,_DensityY*coord.y))*2-1.0)*(1-_Amount)/_Amount,0.0,1.0);
            float4 color = lerp(float4(0.0, 0.0, 0.0, _Direction),float4(textureColor.rgb,1-_Direction*2),a) * _Color;
            if((1-_Direction*2)*(_Amount*2-length(frac(float2(_DensityX*coord.x,_DensityY*coord.y))*2-1.0)) < 0) {
               color = lerp(float4(textureColor.rgb,_Direction),float4(textureColor.rgb,1-_Direction*2),a) * _Color;
            }
            return color;
         }
         ENDCG
      }
   }
   Fallback "Diffuse"
} 

如果有任何想法歡迎提出。