Vertex and fragment shader 5 - 2D過場淡入淡出(Fade in/out) - 漸進百葉窗(貼圖材質)

　　一般的百葉窗效果有些單調，然後印象中一些AVG遊戲也不單只是使用這種效果，有些是一片一片逐漸改變，造成漸進型的效果，這個就是修改原本百葉窗達到這樣的效果。

呈現的效果大概是這樣

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

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

這邊增加兩個參數來決定切除方向，

_MoveDirection ("Move Direction", Range(0,1)) = 1
_CutDirection ("Cut Direction", Range(0,1)) = 1

同樣在輸出的時候乘上密度取小數等於切分需要的等分，接著減去調整MoveDirection的值，使得百葉窗不會全部同時開關，最後再減掉Amount來切除。

half4 textureColor = tex2D(_MainTex, input.uv);
clip (_CutDirection+(1-_CutDirection*2)*frac(input.screenPos.x * _Density) - frac(input.screenPos.x * (1-_MoveDirection*2)) - (1-_Amount*2) );
return textureColor * _Color;

　　最後在Unity當中使用的時候，調整 _Amount 調整切除的量，調整 _Density 來決定Ｘ軸的切分數量，調整 _MoveDirection 可以調整從左到右或從右到左，也可以調整成同時，這樣也就是原本的百葉窗效果，然後調整 _CutDirection 來調整單一塊的切除方向。


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


完整Shader Code

Shader "Custom/Fading" 
{
   Properties
   {
      _MainTex ("Base (RGB)", 2D) = "white" {}
      _Color ("Color", Color) = (1,1,1,1)
      _Density ("Density", Float) = 15.0
      _Amount ("Amount", Range (0,1)) = 0
      _MoveDirection ("Move Direction", Range(0,1)) = 1
      _CutDirection ("Cut Direction", Range(0,1)) = 1
   }

   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 _Density;
         uniform float _Amount;
         uniform float _MoveDirection;
         uniform float _CutDirection;

         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);
            clip (_CutDirection+(1-_CutDirection*2)*frac(input.screenPos.x * _Density) - frac(input.screenPos.x * (1-_MoveDirection*2)) - (1-_Amount*2) );
            return textureColor * _Color;
         }
         ENDCG
      }
   }
   Fallback "Diffuse"
} 

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