滑动条自定义shader

原创已于 2023-06-29 11:16:29 修改 · 374 阅读

本内容遵循CC 4.0 BY-SA版权协议

于 2023-06-29 11:14:55 首次发布

该文章介绍了在Unity中由于管线限制不能使用默认的post辉光效果，因此采用自定义Shader来创建滑动条的分割线。Shader通过两个Pass分别处理背景和辉光线，利用remap函数进行映射处理，实现了滑动条的动态效果，并调整了不透明度和偏移误差来优化视觉效果。

unity的滑动条分割过硬，加上需求是在默认管线下，post辉光也不让用，于是自定义分割线;

思路大概就是两个pass一个做底，一个做辉光线，挺简单的;

Shader "Unlit/UI_Effects"
{
    Properties
    {
        _MainTex ("UI背景", 2D) = "white" {}
        _MainTexLine ("UI分割线", 2D) = "white" {}
        _XToward ("进度条",Range(0,1)) = 0.5
        _Opacity ("不透明度",Range(0,1)) = 1
        [Header(UIBackGround)]
        _XoffsetFix("偏移误差(别动)",float) = 0
        _XMaxAndMin("映射区间(Max_Min/X_Y)",vector)=(0,0,0,0)
        [Header(UILine)]
        _XoffsetLine("分割线偏移误差(别动)",Range(0,1)) = 0.5
    }
    SubShader
    {
        Tags { "RenderType"="Opaque""Queue"="Transparent""IgnoreProjector"="True" }
        LOD 100

        Pass
        {   Name "UIBackGround"
            Blend SrcAlpha One
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            // make fog work
            #pragma multi_compile_fog

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                UNITY_FOG_COORDS(1)
                float4 vertex : SV_POSITION;
                float4 posObj : TEXCOORD1;      //float4 worldPos : TEXCOORD2;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST,_XMaxAndMin;float _XToward,_XoffsetFix,_Opacity;

            //映射方法
            half remap(half x, half t1, half t2, half s1, half s2)
            {
                return (x - t1) / (t2 - t1) * (s2 - s1) + s1;
            }

            v2f vert (appdata v)
            {
                v2f o;
                o.posObj = v.vertex;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);       //o.worldPos = mul(unity_ObjectToWorld,v.vertex);
                UNITY_TRANSFER_FOG(o,o.vertex);
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                fixed4 col = tex2D(_MainTex, i.uv);
                //横向Mask
                _XToward = remap(_XToward,0,1,_XMaxAndMin.x,_XMaxAndMin.y);
                float posObj_x =saturate(sign((i.posObj.x + _XoffsetFix) - _XToward));
                posObj_x = 1-posObj_x;
                col.a*= posObj_x;
                col.a*=_Opacity;
                // apply fog
                UNITY_APPLY_FOG(i.fogCoord, col);
                return col;
            }
            ENDCG
        }

        Pass
        {   Name "UILine"
            Blend SrcAlpha One
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            // make fog work
            #pragma multi_compile_fog

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                UNITY_FOG_COORDS(1)
                float4 vertex : SV_POSITION;
                float4 posObj : TEXCOORD1;      //float4 worldPos : TEXCOORD2;
            };

            sampler2D _MainTexLine,_MainTex;
            float4 _MainTexLine_ST,_MainTex_ST;float _XToward,_XoffsetLine,_Opacity;

            v2f vert (appdata v)
            {
                v2f o;
                o.posObj = v.vertex;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTexLine);       //o.worldPos = mul(unity_ObjectToWorld,v.vertex);
                UNITY_TRANSFER_FOG(o,o.vertex);
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {   fixed4 UIBackGround = tex2D(_MainTex, i.uv);
                //UI线条偏移
                i.uv.xy = float2((i.uv.x - (_XToward-_XoffsetLine)),i.uv.y);
                fixed4 col = tex2D(_MainTexLine, i.uv);
                col.a *=UIBackGround.a;
                col.a *=_Opacity;
                // apply fog
                UNITY_APPLY_FOG(i.fogCoord, col);
                return col;
            }
            ENDCG
        }
    }
}

标签

#unity