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\$ – Draco18s no longer trusts SE Oct 30 '19 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 '19 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\$ – Draco18s no longer trusts SE Oct 31 '19 at 2:49
  • \$\begingroup\$ @Draco18s I think I slove my problem and I post a answer thanks a lot! \$\endgroup\$ – TimChang Oct 31 '19 at 3:15

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


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.