Text Mesh Pro Shader - How To Dim Based On Distance?

Hi all,
I am quite new to shaders, but find it really useful for my current project. I have (many) objects that consist of a mesh and a text element (using Text Mesh Pro). For the mesh I managed to tweak my simple instanced unlit shader in order to achieve an effect of dimming the output color depending on how far from the camera the vertex is:

Shader "SimplestInstancedShaderDistDim"
{
    Properties
    {
        _Color ("Color", Color) = (1, 1, 1, 1)
        //_Dim ("Radius", Range(0, 1)) = 0.5
        _Radius1 ("Radius1", Range(0.001, 30)) = 1
        _Radius2 ("Radius2", Range(0.001, 30)) = 10
    }

    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma multi_compile_instancing
            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                UNITY_VERTEX_INPUT_INSTANCE_ID
            };

            struct v2f
            {
                float4 vertex : SV_POSITION;
                float4 worldPos : TEXCOORD1;
                UNITY_VERTEX_INPUT_INSTANCE_ID // necessary only if you want to access instanced properties in fragment Shader.
            };

            UNITY_INSTANCING_BUFFER_START(Props)
                UNITY_DEFINE_INSTANCED_PROP(float4, _Color)
            UNITY_INSTANCING_BUFFER_END(Props)
        
            v2f vert(appdata v)
            {
                v2f o;

                UNITY_SETUP_INSTANCE_ID(v);
              UNITY_TRANSFER_INSTANCE_ID(v, o); // necessary only if you want to access instanced properties in the fragment Shader.

                o.vertex = UnityObjectToClipPos(v.vertex);
                o.worldPos = mul(unity_ObjectToWorld, v.vertex);
                return o;
            }

            //float _Dim;
            float _Radius1;
            float _Radius2;
        
            fixed4 frag(v2f i) : SV_Target
            {
              UNITY_SETUP_INSTANCE_ID(i); // necessary only if any instanced properties are going to be accessed in the fragment Shader.
                float pos = distance(i.worldPos, _WorldSpaceCameraPos);
                float clampPos = clamp(pos, _Radius1, _Radius2);
                float dim = 1-(clampPos-_Radius1)/(_Radius2-_Radius1);
                fixed3 color = UNITY_ACCESS_INSTANCED_PROP(Props, _Color);
                return fixed4(color*dim, 1);
            }
            ENDCG
        }
    }
}

I want to make the same linear dimming effect for the Text Mesh Pro elements, but I have no idea how to edit that shader (it looks much different in structure to my shader). Here is the TMP shader:

// Simplified SDF shader:
// - No Shading Option (bevel / bump / env map)
// - No Glow Option
// - Softness is applied on both side of the outline

Shader "TextMeshPro/Mobile/Distance Field Dist Dim" {

Properties {
    _FaceColor            ("Face Color", Color) = (1,1,1,1)
    _FaceDilate            ("Face Dilate", Range(-1,1)) = 0

    _OutlineColor        ("Outline Color", Color) = (0,0,0,1)
    _OutlineWidth        ("Outline Thickness", Range(0,1)) = 0
    _OutlineSoftness    ("Outline Softness", Range(0,1)) = 0

    _UnderlayColor        ("Border Color", Color) = (0,0,0,.5)
    _UnderlayOffsetX     ("Border OffsetX", Range(-1,1)) = 0
    _UnderlayOffsetY     ("Border OffsetY", Range(-1,1)) = 0
    _UnderlayDilate        ("Border Dilate", Range(-1,1)) = 0
    _UnderlaySoftness     ("Border Softness", Range(0,1)) = 0

    _WeightNormal        ("Weight Normal", float) = 0
    _WeightBold            ("Weight Bold", float) = .5

    _ShaderFlags        ("Flags", float) = 0
    _ScaleRatioA        ("Scale RatioA", float) = 1
    _ScaleRatioB        ("Scale RatioB", float) = 1
    _ScaleRatioC        ("Scale RatioC", float) = 1

    _MainTex            ("Font Atlas", 2D) = "white" {}
    _TextureWidth        ("Texture Width", float) = 512
    _TextureHeight        ("Texture Height", float) = 512
    _GradientScale        ("Gradient Scale", float) = 5
    _ScaleX                ("Scale X", float) = 1
    _ScaleY                ("Scale Y", float) = 1
    _PerspectiveFilter    ("Perspective Correction", Range(0, 1)) = 0.875

    _VertexOffsetX        ("Vertex OffsetX", float) = 0
    _VertexOffsetY        ("Vertex OffsetY", float) = 0

    _ClipRect            ("Clip Rect", vector) = (-32767, -32767, 32767, 32767)
    _MaskSoftnessX        ("Mask SoftnessX", float) = 0
    _MaskSoftnessY        ("Mask SoftnessY", float) = 0

    _StencilComp        ("Stencil Comparison", Float) = 8
    _Stencil            ("Stencil ID", Float) = 0
    _StencilOp            ("Stencil Operation", Float) = 0
    _StencilWriteMask    ("Stencil Write Mask", Float) = 255
    _StencilReadMask    ("Stencil Read Mask", Float) = 255

    _ColorMask            ("Color Mask", Float) = 15
}

SubShader {
    Tags
    {
        "Queue"="Transparent"
        "IgnoreProjector"="True"
        "RenderType"="Transparent"
    }


    Stencil
    {
        Ref [_Stencil]
        Comp [_StencilComp]
        Pass [_StencilOp]
        ReadMask [_StencilReadMask]
        WriteMask [_StencilWriteMask]
    }

    Cull [_CullMode]
    ZWrite Off
    Lighting Off
    Fog { Mode Off }
    ZTest [unity_GUIZTestMode]
    Blend One OneMinusSrcAlpha
    ColorMask [_ColorMask]

    Pass {
        CGPROGRAM
        #pragma vertex VertShader
        #pragma fragment PixShader
        #pragma shader_feature __ OUTLINE_ON
        #pragma shader_feature __ UNDERLAY_ON UNDERLAY_INNER

        #pragma multi_compile __ UNITY_UI_CLIP_RECT
        #pragma multi_compile __ UNITY_UI_ALPHACLIP

        #include "UnityCG.cginc"
        #include "UnityUI.cginc"
        #include "TMPro_Properties.cginc"

        struct vertex_t {
            float4    vertex            : POSITION;
            float3    normal            : NORMAL;
            fixed4    color            : COLOR;
            float2    texcoord0        : TEXCOORD0;
            float2    texcoord1        : TEXCOORD1;

        };

        struct pixel_t {
            float4    vertex            : SV_POSITION;
            fixed4    faceColor        : COLOR;
            fixed4    outlineColor    : COLOR1;
            float4    texcoord0        : TEXCOORD0;            // Texture UV, Mask UV
            half4    param            : TEXCOORD1;            // Scale(x), BiasIn(y), BiasOut(z), Bias(w)
            half4    mask            : TEXCOORD2;            // Position in clip space(xy), Softness(zw)
        #if (UNDERLAY_ON | UNDERLAY_INNER)
            float4    texcoord1        : TEXCOORD3;            // Texture UV, alpha, reserved
            half2    underlayParam    : TEXCOORD4;            // Scale(x), Bias(y)
        #endif
        };


        pixel_t VertShader(vertex_t input)
        {
            float bold = step(input.texcoord1.y, 0);

            float4 vert = input.vertex;
            vert.x += _VertexOffsetX;
            vert.y += _VertexOffsetY;
            float4 vPosition = UnityObjectToClipPos(vert);

            float2 pixelSize = vPosition.w;
            pixelSize /= float2(_ScaleX, _ScaleY) * abs(mul((float2x2)UNITY_MATRIX_P, _ScreenParams.xy));
        
            float scale = rsqrt(dot(pixelSize, pixelSize));
            scale *= abs(input.texcoord1.y) * _GradientScale * 1.5;
          if(UNITY_MATRIX_P[3][3] == 0) scale = lerp(abs(scale) * (1 - _PerspectiveFilter), scale, abs(dot(UnityObjectToWorldNormal(input.normal.xyz), normalize(WorldSpaceViewDir(vert)))));

            float weight = lerp(_WeightNormal, _WeightBold, bold) / 4.0;
            weight = (weight + _FaceDilate) * _ScaleRatioA * 0.5;

            float layerScale = scale;

            scale /= 1 + (_OutlineSoftness * _ScaleRatioA * scale);
            float bias = (0.5 - weight) * scale - 0.5;
            float outline = _OutlineWidth * _ScaleRatioA * 0.5 * scale;

            float opacity = input.color.a;
        #if (UNDERLAY_ON | UNDERLAY_INNER)
                opacity = 1.0;
        #endif

            fixed4 faceColor = fixed4(input.color.rgb, opacity) * _FaceColor;
            faceColor.rgb *= faceColor.a;

            fixed4 outlineColor = _OutlineColor;
            outlineColor.a *= opacity;
            outlineColor.rgb *= outlineColor.a;
            outlineColor = lerp(faceColor, outlineColor, sqrt(min(1.0, (outline * 2))));

        #if (UNDERLAY_ON | UNDERLAY_INNER)

            layerScale /= 1 + ((_UnderlaySoftness * _ScaleRatioC) * layerScale);
            float layerBias = (.5 - weight) * layerScale - .5 - ((_UnderlayDilate * _ScaleRatioC) * .5 * layerScale);

            float x = -(_UnderlayOffsetX * _ScaleRatioC) * _GradientScale / _TextureWidth;
            float y = -(_UnderlayOffsetY * _ScaleRatioC) * _GradientScale / _TextureHeight;
            float2 layerOffset = float2(x, y);
        #endif

            // Generate UV for the Masking Texture
            float4 clampedRect = clamp(_ClipRect, -2e10, 2e10);
            float2 maskUV = (vert.xy - clampedRect.xy) / (clampedRect.zw - clampedRect.xy);

            // Structure for pixel shader
            pixel_t output = {
                vPosition,
                faceColor,
                outlineColor,
                float4(input.texcoord0.x, input.texcoord0.y, maskUV.x, maskUV.y),
                half4(scale, bias - outline, bias + outline, bias),
              half4(vert.xy * 2 - clampedRect.xy - clampedRect.zw, 0.25 / (0.25 * half2(_MaskSoftnessX, _MaskSoftnessY) + pixelSize.xy)),
            #if (UNDERLAY_ON | UNDERLAY_INNER)
                float4(input.texcoord0 + layerOffset, input.color.a, 0),
                half2(layerScale, layerBias),
            #endif
            };

            return output;
        }


        // PIXEL SHADER
        fixed4 PixShader(pixel_t input) : SV_Target
        {
            half d = tex2D(_MainTex, input.texcoord0.xy).a * input.param.x;
            half4 c = input.faceColor * saturate(d - input.param.w);

        #ifdef OUTLINE_ON
            c = lerp(input.outlineColor, input.faceColor, saturate(d - input.param.z));
            c *= saturate(d - input.param.y);
        #endif

        #if UNDERLAY_ON
            d = tex2D(_MainTex, input.texcoord1.xy).a * input.underlayParam.x;
          c += float4(_UnderlayColor.rgb * _UnderlayColor.a, _UnderlayColor.a) * saturate(d - input.underlayParam.y) * (1 - c.a);
        #endif

        #if UNDERLAY_INNER
            half sd = saturate(d - input.param.z);
            d = tex2D(_MainTex, input.texcoord1.xy).a * input.underlayParam.x;
          c += float4(_UnderlayColor.rgb * _UnderlayColor.a, _UnderlayColor.a) * (1 - saturate(d - input.underlayParam.y)) * sd * (1 - c.a);
        #endif

        // Alternative implementation to UnityGet2DClipping with support for softness.
        #if UNITY_UI_CLIP_RECT
            half2 m = saturate((_ClipRect.zw - _ClipRect.xy - abs(input.mask.xy)) * input.mask.zw);
            c *= m.x * m.y;
        #endif

        #if (UNDERLAY_ON | UNDERLAY_INNER)
            c *= input.texcoord1.z;
        #endif

        #if UNITY_UI_ALPHACLIP
            clip(c.a - 0.001);
        #endif

            return c;
        }
        ENDCG
    }
}

CustomEditor "TMPro.EditorUtilities.TMP_SDFShaderGUI"
}

Thanks for any pointers on how to achieve such effect in the TMP shader.

On second look, the structure is not much different and I tried to adapt it, I will test this evening, but here is what I came up with (edit, I checked it and fixed a small thing and the shader below is working now):

// Simplified SDF shader:
// - No Shading Option (bevel / bump / env map)
// - No Glow Option
// - Softness is applied on both side of the outline

Shader "TextMeshPro/Mobile/Distance Field Dist Dim" {

Properties {
    _FaceColor            ("Face Color", Color) = (1,1,1,1)
    _FaceDilate            ("Face Dilate", Range(-1,1)) = 0

    _OutlineColor        ("Outline Color", Color) = (0,0,0,1)
    _OutlineWidth        ("Outline Thickness", Range(0,1)) = 0
    _OutlineSoftness    ("Outline Softness", Range(0,1)) = 0

    _UnderlayColor        ("Border Color", Color) = (0,0,0,.5)
    _UnderlayOffsetX     ("Border OffsetX", Range(-1,1)) = 0
    _UnderlayOffsetY     ("Border OffsetY", Range(-1,1)) = 0
    _UnderlayDilate        ("Border Dilate", Range(-1,1)) = 0
    _UnderlaySoftness     ("Border Softness", Range(0,1)) = 0

    _WeightNormal        ("Weight Normal", float) = 0
    _WeightBold            ("Weight Bold", float) = .5

    _ShaderFlags        ("Flags", float) = 0
    _ScaleRatioA        ("Scale RatioA", float) = 1
    _ScaleRatioB        ("Scale RatioB", float) = 1
    _ScaleRatioC        ("Scale RatioC", float) = 1

    _MainTex            ("Font Atlas", 2D) = "white" {}
    _TextureWidth        ("Texture Width", float) = 512
    _TextureHeight        ("Texture Height", float) = 512
    _GradientScale        ("Gradient Scale", float) = 5
    _ScaleX                ("Scale X", float) = 1
    _ScaleY                ("Scale Y", float) = 1
    _PerspectiveFilter    ("Perspective Correction", Range(0, 1)) = 0.875

    _VertexOffsetX        ("Vertex OffsetX", float) = 0
    _VertexOffsetY        ("Vertex OffsetY", float) = 0

    _ClipRect            ("Clip Rect", vector) = (-32767, -32767, 32767, 32767)
    _MaskSoftnessX        ("Mask SoftnessX", float) = 0
    _MaskSoftnessY        ("Mask SoftnessY", float) = 0
   
    _StencilComp        ("Stencil Comparison", Float) = 8
    _Stencil            ("Stencil ID", Float) = 0
    _StencilOp            ("Stencil Operation", Float) = 0
    _StencilWriteMask    ("Stencil Write Mask", Float) = 255
    _StencilReadMask    ("Stencil Read Mask", Float) = 255
   
    _ColorMask            ("Color Mask", Float) = 15

     _Radius1 ("Radius1", Range(0.001, 30)) = 0.001
     _Radius2 ("Radius2", Range(0.001, 30)) = 0.002
}

SubShader {
    Tags
    {
        "Queue"="Transparent"
        "IgnoreProjector"="True"
        "RenderType"="Transparent"
    }


    Stencil
    {
        Ref [_Stencil]
        Comp [_StencilComp]
        Pass [_StencilOp]
        ReadMask [_StencilReadMask]
        WriteMask [_StencilWriteMask]
    }

    Cull [_CullMode]
    ZWrite Off
    Lighting Off
    Fog { Mode Off }
    ZTest [unity_GUIZTestMode]
    Blend One OneMinusSrcAlpha
    ColorMask [_ColorMask]

    Pass {
        CGPROGRAM
        #pragma vertex VertShader
        #pragma fragment PixShader
        #pragma shader_feature __ OUTLINE_ON
        #pragma shader_feature __ UNDERLAY_ON UNDERLAY_INNER

        #pragma multi_compile __ UNITY_UI_CLIP_RECT
        #pragma multi_compile __ UNITY_UI_ALPHACLIP

        #include "UnityCG.cginc"
        #include "UnityUI.cginc"
        #include "TMPro_Properties.cginc"

        struct vertex_t {
            float4    vertex            : POSITION;
            float3    normal            : NORMAL;
            fixed4    color            : COLOR;
            float2    texcoord0        : TEXCOORD0;
            float2    texcoord1        : TEXCOORD1;
        };

        struct pixel_t {
            float4    vertex            : SV_POSITION;
            fixed4    faceColor        : COLOR;
            fixed4    outlineColor    : COLOR1;
            float4    texcoord0        : TEXCOORD0;            // Texture UV, Mask UV
            half4    param            : TEXCOORD1;            // Scale(x), BiasIn(y), BiasOut(z), Bias(w)
            half4    mask            : TEXCOORD2;            // Position in clip space(xy), Softness(zw)
        #if (UNDERLAY_ON | UNDERLAY_INNER)
            float4    texcoord1        : TEXCOORD3;            // Texture UV, alpha, reserved
            half2    underlayParam    : TEXCOORD4;            // Scale(x), Bias(y)
        #endif
            float4 worldPos : TEXCOORD5;
        };


        pixel_t VertShader(vertex_t input)
        {
            float bold = step(input.texcoord1.y, 0);

            float4 vert = input.vertex;
            vert.x += _VertexOffsetX;
            vert.y += _VertexOffsetY;
            float4 vPosition = UnityObjectToClipPos(vert);
            float4 worldPos = mul(unity_ObjectToWorld, vert);

            float2 pixelSize = vPosition.w;
            pixelSize /= float2(_ScaleX, _ScaleY) * abs(mul((float2x2)UNITY_MATRIX_P, _ScreenParams.xy));
          
            float scale = rsqrt(dot(pixelSize, pixelSize));
            scale *= abs(input.texcoord1.y) * _GradientScale * 1.5;
           if(UNITY_MATRIX_P[3][3] == 0) scale = lerp(abs(scale) * (1 - _PerspectiveFilter), scale, abs(dot(UnityObjectToWorldNormal(input.normal.xyz), normalize(WorldSpaceViewDir(vert)))));

            float weight = lerp(_WeightNormal, _WeightBold, bold) / 4.0;
            weight = (weight + _FaceDilate) * _ScaleRatioA * 0.5;

            float layerScale = scale;

            scale /= 1 + (_OutlineSoftness * _ScaleRatioA * scale);
            float bias = (0.5 - weight) * scale - 0.5;
            float outline = _OutlineWidth * _ScaleRatioA * 0.5 * scale;

            float opacity = input.color.a;
        #if (UNDERLAY_ON | UNDERLAY_INNER)
                opacity = 1.0;
        #endif

            fixed4 faceColor = fixed4(input.color.rgb, opacity) * _FaceColor;
            faceColor.rgb *= faceColor.a;

            fixed4 outlineColor = _OutlineColor;
            outlineColor.a *= opacity;
            outlineColor.rgb *= outlineColor.a;
            outlineColor = lerp(faceColor, outlineColor, sqrt(min(1.0, (outline * 2))));

        #if (UNDERLAY_ON | UNDERLAY_INNER)

            layerScale /= 1 + ((_UnderlaySoftness * _ScaleRatioC) * layerScale);
            float layerBias = (.5 - weight) * layerScale - .5 - ((_UnderlayDilate * _ScaleRatioC) * .5 * layerScale);

            float x = -(_UnderlayOffsetX * _ScaleRatioC) * _GradientScale / _TextureWidth;
            float y = -(_UnderlayOffsetY * _ScaleRatioC) * _GradientScale / _TextureHeight;
            float2 layerOffset = float2(x, y);
        #endif

            // Generate UV for the Masking Texture
            float4 clampedRect = clamp(_ClipRect, -2e10, 2e10);
            float2 maskUV = (vert.xy - clampedRect.xy) / (clampedRect.zw - clampedRect.xy);

            // Structure for pixel shader
            pixel_t output = {
                vPosition,
                faceColor,
                outlineColor,
                float4(input.texcoord0.x, input.texcoord0.y, maskUV.x, maskUV.y),
                half4(scale, bias - outline, bias + outline, bias),
               half4(vert.xy * 2 - clampedRect.xy - clampedRect.zw, 0.25 / (0.25 * half2(_MaskSoftnessX, _MaskSoftnessY) + pixelSize.xy)),
            #if (UNDERLAY_ON | UNDERLAY_INNER)
                float4(input.texcoord0 + layerOffset, input.color.a, 0),
                half2(layerScale, layerBias),
            #endif
                worldPos,
            };

            return output;
        }

          float _Radius1;
          float _Radius2;

        // PIXEL SHADER
        fixed4 PixShader(pixel_t input) : SV_Target
        {
            half d = tex2D(_MainTex, input.texcoord0.xy).a * input.param.x;
            half4 c = input.faceColor * saturate(d - input.param.w);

        #ifdef OUTLINE_ON
            c = lerp(input.outlineColor, input.faceColor, saturate(d - input.param.z));
            c *= saturate(d - input.param.y);
        #endif

        #if UNDERLAY_ON
            d = tex2D(_MainTex, input.texcoord1.xy).a * input.underlayParam.x;
           c += float4(_UnderlayColor.rgb * _UnderlayColor.a, _UnderlayColor.a) * saturate(d - input.underlayParam.y) * (1 - c.a);
        #endif

        #if UNDERLAY_INNER
            half sd = saturate(d - input.param.z);
            d = tex2D(_MainTex, input.texcoord1.xy).a * input.underlayParam.x;
           c += float4(_UnderlayColor.rgb * _UnderlayColor.a, _UnderlayColor.a) * (1 - saturate(d - input.underlayParam.y)) * sd * (1 - c.a);
        #endif

        // Alternative implementation to UnityGet2DClipping with support for softness.
        #if UNITY_UI_CLIP_RECT
            half2 m = saturate((_ClipRect.zw - _ClipRect.xy - abs(input.mask.xy)) * input.mask.zw);
            c *= m.x * m.y;
        #endif

        #if (UNDERLAY_ON | UNDERLAY_INNER)
            c *= input.texcoord1.z;
        #endif

        #if UNITY_UI_ALPHACLIP
            clip(c.a - 0.001);
        #endif

           float pos = distance(input.worldPos, _WorldSpaceCameraPos);
           float clampPos = clamp(pos, _Radius1, _Radius2);
           float dim = 1-(clampPos-_Radius1)/(_Radius2-_Radius1);

            return c*dim;
        }
        ENDCG
    }
}

CustomEditor "TMPro.EditorUtilities.TMP_SDFShaderGUI"
}
1 Like