koobas.hobune.stream
Fix TextMesh Pro UI outline shader artifacts
I'm using TextMesh Pro 2.1.1 in Unity 2019.4.19 to render my UI text elements. For some reason, these half-transparent black rectangles are being rendered behind the characters (see image on the right). When I zoom in to the label on the scene it is as sharp as you would expect it to be (see image on the left), without these weird artifacts. However, zooming out causes the same problem to appear even in the scene viewport.
I have no idea what causes them but they are probably related to the black outline of the font as the problem disappears when I turn down the face dilation of the font atlas material shader.
Screenshot in Unity: Scene viewport (left), Game view (right)
Screenshot of Inspector: TextMesh Pro UI and shader settings
Does anyone know what causes this problem or how to fix it? Any help is greatly appreciated.
If this helped you fix this problem please rate this up, so it can help other people thank you.
I have found the answer! (It's simple...) After coming across the same artifacts with text mesh pro and frustratedly stumbling across this thread I spent many hours trying all sorts of ideas to try an solve this problem and none of them worked, But, I now know on how to solve this problem!
The developers of test mesh pro has already answered this question before, but it's in the dark depths of unity's forums. No worries though, I will just tell you here(sources included).
How to fix! When you create a TextMeshPro font asset what happens is it creates a texture with all the characters spread out with a padding of 5 (default). So, when trying to add an outline you start to see these weird artifacts due to there not being enough padding between the characters on the texture sheet.
So, how do I add more padding? Easy.
You need to open the Font Asset Creator (Window > TextMeshPro > Font Asset Creator)
How much padding should I use? Well, the more of a thick outline you want the more the padding you'll need and also a bigger Atlas Resolution too. 
Sources:
Question 2 of FAQ: https://forum.unity.com/threads/useful-information-download-links.458634/#post-7347818 Video
Showcase of Font Asset Creator: https://www.youtube.com/watch?v=qzJNIGCFFtY
@sebastianfeistl @xinuxano I hope that I also solved the problem for you guys too not just for myself :)
THANK YOU!
Works like a charm. Mobile shader, Font with thick outline, and no more background artifacts. TY.
Can you please show us the settings in Inspector? That might help in getting you an answer.
Thank you for your reply! I updated the question and added a screenshot of the settings in the Inspector.
Well I checked this against what I have in a current project and it mostly matches. However, you seem to have a some settings I don't see in $$anonymous$$e. One is "Colorizable (Script)" that is checked off, but not expanded, so take a look there. It might also be worth checking what the settings are for Underlay, Lighting, and Glow (you have to click on them to expand them). Lighting has more subsections that can be expanded as well.
Just for grins, if you can't find a cause there, see if changing the font to something else still acts the same way. That will at least tell you it is a setting and not the font itself.
If those aren't the cause maybe someone else can recognize what causes this. It acts light the background for the particular character is being filled in with a type of highlight, but it is interesting how it does it for the comma. It is a rectangle, but not the full height for the font and it goes down to cover the descender part of the comma. I will be interested in knowing what is causing it.
I have the same problem with custom fonts. I have tried to change the Padding with a proportion greater than 10% of the font point size, but I can't solve it. I thank you in advance for any help.
I know what might be causing the problem, but I have never figured out how to fix it in similar scenarios. What I do know is a problem with the shader properties. I once had problems with a sprite in the same sense. When an image has transparency and you put numerous copies of it superimposed on top of one another, it starts to look not-so-transparent. All the dirt in the image starts to stand out. You can test this theory in an image editor that uses transparency. But that's what I know.
Perhaps a Font (the material that constitutes it) with a transparency can solve it. From what I've seen, TextMeshPro uses an image with a completely black background. I don't know if changing this can solve the problem and/or cause another one.
Also note that text created by Unity's default editor does not cause this problem, which may also be a limitation of TextMeshPro.
