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

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

效果图

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

         Cull Off
         Lighting Off
         ZWrite Off
         ZTest[unity_GUIZTestMode]
         Blend SrcAlpha OneMinusSrcAlpha
         ColorMask[_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
         }
      }
}工程下载

		自动登录	找回密码
密码			立即注册

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

本帖子中包含更多资源