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)

enter image description here

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);

            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.

  • \$\begingroup\$ Your offsets are off, too. The upper-right and lower-left "clones" don't line up vertically (or horizontally) with the upper-left and lower-right "clones". Also, _OutlineColor.r (and .g and .b, ditto val.r) should also work, which makes it easier to read. I suspect that you aren't adjusting the alpha value correctly for the places where the white character is semi-transparent but the outline characters aren't. \$\endgroup\$ Oct 30, 2019 at 13:34
  • \$\begingroup\$ @Draco18s thank for suggest , I edit my code to be more readable. yes the problem probably is the semi-transparent place how to blend , If I split two pass (one pass draw black ) ( one pasee draw white color ) , it will solve my problem ( But drawcall go up) \$\endgroup\$
    – TimChang
    Oct 31, 2019 at 2:20
  • 1
    \$\begingroup\$ Right now it appears that you are adding together all of the alpha values, you probably either want to multiply them or use only the largest. \$\endgroup\$ Oct 31, 2019 at 2:49
  • \$\begingroup\$ @Draco18s I think I slove my problem and I post a answer thanks a lot! \$\endgroup\$
    – TimChang
    Oct 31, 2019 at 3:15

1 Answer 1


Thanks @Draco18s suggest , I think I Slove this problem , this problem is a about alpha value missing. So just choose the larget alpha. like this:

            half orginA = color.a;
            color = (val * (1.0 - color.a)) + (color * color.a);
            color.a = max(orginA,val.a);// choosing larger one

enter image description here


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .