Vertex and fragment shader 11 - 2D過場淡入淡出(Fade in/out) - 翻頁效果(水平)

　　因為最近剛好用到有翻頁效果的遊戲，於是就嘗試來做一個簡單版本的翻頁效果，雖然簡單但是看起來還算可以。

呈現的效果大概是這樣

設定主要材質作為表面顯示，次要材質來做為背面顯示，以及前後加乘的顏色。

_MainTex ("Base (RGB)", 2D) = "white" {}
_SubTex ("Sub Texture(RGB)", 2D) = "white" {}
_FrontColor ("Front Color", Color) = (1,1,1,1)
_BackColor ("Back Color", Color) = (1,1,1,1)
_Amount ("Amount", Range (0,1)) = 0

　　這邊的概念就是從左邊依據 _Amount 開始切除不顯示，然後以切除的那個Ｘ座標點開始，往右取跟切除部分相同的長度，這部分輸出方向逆轉過來的背面材質，然後剩下的部分就顯示原本的材質，就可以簡單達到這樣的效果了。

if (coord.x < 2 * _Amount) {
   float2 invertUV = input.screenPos;
   invertUV.x = 2*_Amount-input.screenPos.x;
   float4 originalSubColor = tex2D(_SubTex, invertUV);
   color = originalSubColor*_BackColor;
}
clip (coord.x - _Amount);

完整Shader Code

Shader "Custom/Fading" 
{
   Properties
   {
      _MainTex ("Base (RGB)", 2D) = "white" {}
      _SubTex ("Sub Texture(RGB)", 2D) = "white" {}
      _FrontColor ("Front Color", Color) = (1,1,1,1)
      _BackColor ("Back Color", Color) = (1,1,1,1)
      _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 sampler2D _SubTex;
         uniform float4 _FrontColor;
         uniform float4 _BackColor;
         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
         {
            float4 originalColor = tex2D(_MainTex, input.uv);
            float2 coord = input.screenPos.xy;
            
            float4 color = tex2D(_MainTex, coord)*_FrontColor;
            if (coord.x < 2 * _Amount) {
               float2 invertUV = input.screenPos;
               invertUV.x = 2*_Amount-input.screenPos.x;
               float4 originalSubColor = tex2D(_SubTex, invertUV);
               color = originalSubColor*_BackColor;
            }
            clip (coord.x - _Amount);
            return color;
         }
         ENDCG
      }
   }
   Fallback "Diffuse"
} 

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