Unity Shader 实现UGUI下图片的倒影效果

Baste 发表于 2023-3-9 16:59

效果图

实现原理很简单，首先创建两个Image一个作为原图另一个作为倒影图。倒影图跟原图旋转180度，然后呢让倒影图随着y坐标值修改透明值。这样感觉就出来了。
Shader代码：
Shader &#34;Unlit/UIShadow&#34;
{
Properties
{
   _MainTex(&#34;Sprite Texture&#34;, 2D) = &#34;white&#34; {}
   _Color(&#34;Tint&#34;, Color) = (1,1,1,1)
   _StencilComp(&#34;Stencil Comparison&#34;, Float) = 8
   _Stencil(&#34;Stencil ID&#34;, Float) = 0
   _StencilOp(&#34;Stencil Operation&#34;, Float) = 0
   _StencilWriteMask(&#34;Stencil Write Mask&#34;, Float) = 255
   _StencilReadMask(&#34;Stencil Read Mask&#34;, Float) = 255
   _ColorMask(&#34;Color Mask&#34;, Float) = 15
   _UseUIAlphaClip(&#34;Use Alpha Clip&#34;, Float) = 0

   _Pow(&#34;Pow&#34;,range(1,10)) = 1
}

   SubShader
   {
         Tags
         {
            &#34;Queue&#34; = &#34;Transparent&#34;
            &#34;IgnoreProjector&#34; = &#34;True&#34;
            &#34;RenderType&#34; = &#34;Transparent&#34;
            &#34;PreviewType&#34; = &#34;Plane&#34;
            &#34;CanUseSpriteAtlas&#34; = &#34;True&#34;
         }

         Stencil
         {
            Ref
            Comp
            Pass
            ReadMask
            WriteMask
         }

         Cull Off
         Lighting Off
         ZWrite Off
         ZTest
         Blend SrcAlpha OneMinusSrcAlpha
         ColorMask

         Pass
         {
         CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma target 2.0

            #include &#34;UnityCG.cginc&#34;
            #include &#34;UnityUI.cginc&#34;

            #pragma multi_compile __ UNITY_UI_CLIP_RECT
            #pragma multi_compile __ UNITY_UI_ALPHACLIP

            struct appdata_t
            {
               float4 vertex : POSITION;
               float4 color : COLOR;
               float2 texcoord : TEXCOORD0;
               UNITY_VERTEX_INPUT_INSTANCE_ID
            };

            struct v2f
            {
               float4 vertex : SV_POSITION;
               fixed4 color : COLOR;
               float2 texcoord: TEXCOORD0;
               float4 worldPosition : TEXCOORD1;
               UNITY_VERTEX_OUTPUT_STEREO
            };

            sampler2D _MainTex;
            fixed4 _Color;
            fixed4 _TextureSampleAdd;
            float4 _ClipRect;
            float4 _MainTex_ST;
            float _Pow;

            v2f vert(appdata_t v)
            {
               v2f OUT;
               UNITY_SETUP_INSTANCE_ID(v);
               UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
               OUT.worldPosition = v.vertex;
               OUT.vertex = UnityObjectToClipPos(OUT.worldPosition);

               OUT.texcoord = TRANSFORM_TEX(v.texcoord, _MainTex);

               OUT.color = v.color * _Color;
               return OUT;
            }

            fixed4 frag(v2f IN) : SV_Target
            {
               half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;

               color.a *= pow(1 - IN.texcoord.y, _Pow);

               #ifdef UNITY_UI_CLIP_RECT //这里是Mask裁剪用的
               color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);
               #endif

               #ifdef UNITY_UI_ALPHACLIP
               clip(color.a - 0.009);
               #endif

               return color;
            }
         ENDCG
         }
   }
}工程下载

页: [1]

Unity开发者联盟's Archiver

Unity Shader 实现UGUI下图片的倒影效果