TMPro: Artifacts/Lines (not padding problem)

Hey,

sorry to bother, but i tried for so long now fix this, i watched many of the Zolran youtube videos, googled and searched here but didnt find a solution yet and thats why i have to make a thread bout it. Maybe im just genuinely missusing the underlay option, thats why i didnt mark it as Bug.

It’s not the padding, i played around with padding, size, SDFAA-SDF8-32 texture sizes etc for like 2 hours.
I also found the debug - perspective filter and extra padding advise somewhere, but that didnt help.

The Artifact even appear und disappear in the editor when i move the editor camera.

edit: also while im at it, is there a way to choose in which order the letters overlap each other? cause right now the right latter overlapps the left latter, which isnt the effect i want with the underlay, can i change it the other way?
this really makes me think, im missusing the underlay function :smile:

The artifact is what seems to appear above the letter “s” correct?

If so, this is padding related in the sense that as material property values for Underlay Offset get closer to -1 or 1, you are at the edge of the adjacent character where you get a piece of the adjacent character most likely due to bilinear filtering.

Increase the sampling point size to padding ratio will give you a larger effective range for those material properties. As such, this will allow you to use a smaller values in the Underlay Offset to get the same visual range but will keep you further away from the adjacent character.

What is your current Sampling Point Size for the font asset and what is your current Padding?

In terms of Sorting Order, in the Extra Settings panel of the text object, you can reverse that order.

Hello Stephen thanks for your time and help.

Yes for example over the letter s, or at the right side of “play” for example, really happened on several locations though if u watch it in original size.

Ok, if i understand you right there, then it shouldnt be happening when im further away from -1 or 1? But it still does, i just tried it out:
6102963--663903--Screenshot 2020-07-17 23.19.50.png

Yes, i’ve read that advise several times, zolran was mentioning that in his videos several times i think. So i really tried a lot of ratios in many steps, i even increased it to absurd 40% and it was still happening. Thats why i hinted in the title, that i dont think its the usual padding ratio problem.

6102639--663855--Screenshot 2020-07-17 23.28.18.png

But i promise you, before i even started the thread i was fiddling around with the setting for like 1 hour. Different Sample sizes, different padding, different sample/padding ratio, SDFAA, SDF8, SDF16, SDF32. from 512² to 4096².
Problem was still occuring to me. Also what i found odd, when i had really thick padding, it actually changed the font. like the e would get to thick so you wouldnt have the little hole anymore. Is that normal? cause i understood the padding just as a reserved space outside the actual letter, without changing it. But it actually did that for me.

Oh my gosh, i even looked there but i was searching for something with “layer” cause for the sprites etc. its called Sorting Layer, but yeah Geometry Sorting is close enough that i should have noticed it. Sorry, my bad.

PS: Really appreciate this tool, thanks a lot!

Try with SDFAA and see if it still happens.

If it does, can you provide me with a repro project so I can take a closer look?

The easiest way might be for you to submit a bug report with the project. If you do so, please provide me with the Case # once you have it via email from Unity.

Yes it definetly happens with SDFAA, as i stated i tried them all, and thats the default one anyway.
But here i just did it again to show you:

Also just did a higher ratio again, to proof that it’s still showing and it somehow deforms my characters:

I can give you access to the git if u want, it’s nothing special. otherwise i ll do the bug report, which could take a while to upload with my slow internet.

finished submitting:
(Case 1264030)

Thank you for taking the time to submit the bug report.

I had a chance to take a look at it and the issue is related to Sampling Point Size to Padding ratio.

Your current font asset uses a Sampling Point Size of 62 with Padding of 8 for a ratio of 12.9%.

You are using Underlay Offset X = -1 and Offset Y = -1 (max range) in addition you are using Dilation of 1 which ends up exceeding the range.

So in order to achieve the same visual look, you can increase the Sampling Point Size to Padding ratio to something like sampling point size of 62 with padding of 14. This will allow you to reduce the Offset down to half or -0.5 for X and Y and reduce the Dilation to 0.5 where the issue will no longer appear as we now have enough range in the padding. You might need to tweak those values a bit. Once you have your offset right, play with the dilation on the underlay. You will see that you can make the issue re-appear as you increase this value.

Basically, material properties the expand the text like Dilation, Offset, Glow Offer, Outline all take space in this padding region. These sort of stack up where it is possible to exceed this range.

1 Like

I’m sorry but that is not the case. As i stated before with this screenshot!

Here the values are not on the extreme and it still occurs.
And i also mentioned that i tried with different sizing/padding ratio and it still occurs.

Now i tried with the settings you suggest and it still happens:


Now it occurs less, but when i pan the camera around i see it still happening, but look how the big size/padding ratio deforms the letters!
The letters ‘e’ and ‘a’ have like almost completley closed up the hole.

Shall i maybe reupload the project in the current state?
Because u said its the extrem offset values, but i just reset them to that… but as i mentioned now again it’s still happening with some what lower values…

Here another example with really low offsets, but still a higher dilate (not 1 though):

you just have to pan the camera more around to find a spot where it happens with lower settings, but it is still happening.

It is to sum of all these offsets, outline thickness and dilation relative to the ratio of sampling point size to padding.

The larger the ratio the greater the visual effect. For instance, Outline width of .1 with a ratio of 10% will be half the thickness of 0.1 with padding ratio of 20%. As you increase this ratio, you need to reduce these values.

It happens as you pan because your property values (the sum of them) is pretty close to 1 which puts you at the edge.

Reduce the dilation and the artifact will go away.

Give me about an hour to post a few examples using the project you provided.

Note
If you disable the Use Ratios in the debug section of the Material Inspector, you can see exactly what the shader is trying to balance to prevent the material from blowing / having these visual artifacts.

Here is an image using your settings with Use Ratios disabled.

6102987--663963--upload_2020-7-17_17-42-49.png

The solid black is basically showing that we exceed valid ranges.

Reducing Underlay Dilation produces the following results.

6102987--663969--upload_2020-7-17_17-44-1.png

Notice the black sections above the letters “s”, this is where that artifact line comes from which is from the adjacent character in the texture.

I will continue to edit my post from above… but just realized something that I overlooked.

Your text object is using bold. Bold is achieved by either using another font asset that contains the true bold type / weight or by faking it with Dilation. So Bold also factors into this.

Since Dilation is affected by the Sampling Point Size to Padding ratio, this is why your type gets thicker and thicker as you increase this ratio.

The bold factor is defined in the font asset and as such, if you increase this ratio, the bold factor has to be adjusted accordingly. This is something that I will need to address as it is clearly not obvious. Especially given I didn’t catch it the first time.

So if you double the Sampling Point Size To Padding Ration, then you need to half the bold value in the Font Asset Inspector to get the same results.

It might be easier to first tune everything with bold disabled and then once everything looks fine, to re-enable bold and tweak its values.

Revised setting to keep the same visual style with increase ratio to make the visual artifact go away.

Revised Material Settings

6103116--663984--upload_2020-7-17_18-18-17.png

Oh thanks for putting so much effort into it! Really appreciate it. The Use Ratio tip is helpful, i ll keep that in mind for the future.

Yeah this topic of doing text properly is new to me, i have a set of weights, but i havent found a video about it yet how it uses it. I mean i guess its same procedure as the fallbacks, but i put them in the Weight category with the 200 - 900 sizes. But i wasnt sure how Textmeshpro would choose it.

And then again im using the thickest one and use bold on top.

hah, so my mistake had a positive impact for improvement, that makes me glad.

i also can counter adjust the letters getting thicker by decreasing the Face dilate, just figured that out…
kinda fiddlish workarounds though

Wow, as i was typing you posted that…

Thanks a lot for the effort! Im really grateful!

1 Like