Unity UGUI Outline it create fourfold vertexs, So I wirte shader to optimization ( vertex only create once ), And I want to Keep one pass . (one drawcall)

There are four character , all character font size are same. but this character edge look a little small.

I write shader like this

 fixed4 frag(v2f IN) : SV_Target
        {
            fixed4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;
    
            float4 pClipRect = float4 (IN.uvOriginXY, IN.uvOriginZW);
            color.w *= IsInRect(IN.texcoord, pClipRect);
            half4 val = half4(_OutlineColor.x, _OutlineColor.y, _OutlineColor.z, 0);//(r,g,b,0)

            //black characters
            val.w += SampleAlpha(2, IN);
            val.w += SampleAlpha(5, IN);
            val.w += SampleAlpha(8, IN);
            val.w += SampleAlpha(11, IN);

            val.w = clamp(val.w, 0, 1);

            //blend
            color = (val * (1.0 - color.a)) + (color * color.a);

            return color;
        }

And the lower right picture is create by UGUI Outline it look like white color overlap black color , How can I do like this ?

The problem probably from here : color = (val * (1.0 - color.a)) + (color * color.a);

What should I do to make it look like UGUIOutline? thanks.

Unity UGUI Outline it create fourfold vertexs, So I wirte shader to optimization ( vertex only create once ), And I want to Keep one pass . (one drawcall)

There are four character , all character font size are same. but this character edge look a little small.

I write shader like this

 fixed4 frag(v2f IN) : SV_Target
        {
            fixed4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;
    
            float4 pClipRect = float4 (IN.uvOriginXY, IN.uvOriginZW);
            color.a *= IsInRect(IN.texcoord, pClipRect);
            half4 val = half4(_OutlineColor.r, _OutlineColor.g, _OutlineColor.b, 0);//(r,g,b,0)

            //black characters
            val.a += SampleAlpha(2, IN);
            val.a += SampleAlpha(5, IN);
            val.a += SampleAlpha(8, IN);
            val.a += SampleAlpha(11, IN);

            val.a = clamp(val.a, 0, 1);

            //blend
            color = (val * (1.0 - color.a)) + (color * color.a);

            return color;
        }

And the lower right picture is create by UGUI Outline it look like white color overlap black color , How can I do like this ?

The problem probably from here : color = (val * (1.0 - color.a)) + (color * color.a);

What should I do to make it look like UGUIOutline? thanks.