Text Mesh Pro - "box" around text unwanted effect / bug

Click on the Import and Import all TMP Essentials
6832127--794360--upload_2021-2-12_17-41-7.png
6832127--794366--upload_2021-2-12_17-43-44.png

If your TMP version was older also use the Project Files GUID Remapping Tool and scan the whole project (It may take a while) and Save Modified Project Files
6832127--794363--upload_2021-2-12_17-43-3.png

1 Like

I fixed the issue by changing the padding and regenerating font atlas while font size will be about 72 to 96 points.
Weird this problem appears after updated text mesh pro resources.

I also had a similar issue in another project and resolved it by changing the rendering mode, so you can try different ones to see if it helps
6833315--794600--upload_2021-2-12_23-31-53.png

These visual artifacts are the result of the Sampling Point Size to Padding ratio being too small.

Changing the sampling mode on its own should not affect this but changing the sampling mode where it happens to also result in a change of the sampling point size and padding would appear to fix it.

The default ratio of sampling point size to padding should be 10%. This is why the default sampling point size is 90 and padding 9. Sampling Point Size of 90 might be a bit on the big side but again just make sure you keep the ratio the same.

1 Like

These artifacts can also happen with certain combinations of different shaders + material settings and rendering modes when using the default sampling.
6833543--794633--upload_2021-2-13_0-50-22.png

Yes. But this is also related to the Sampling Point Size to Padding Ratio as the effective range of material properties like Dilation, Outline, Underlay, etc. are determined by this ratio.

The larger the ratio the more range you get on that Underlay Offset for instance. So what ends up happening is users start adjusting material property values to offset that Underlay where when that ratio is small doesn’t give you much range. As such, they end up using a max value of 1.0 where we are now at the edge between two glyphs in the texture which can result in that same visual artifact.

The solution is to increase that ratio of sampling point size to padding which in turn give you more range and equality important staying away from using max values.

As a general rule whenever you end up pushing these values near their max, it is a sign that your sampling point size to padding might be too small. I rarely use font assets with a ratio smaller than 10%. Sometimes I use 20% for visual FX styling where I want a large underlay offset or glow range. I try to always keep the material property values below 0.8 where most of the time, they end up below 0.5. Ie. an Outline of 0.5 when the ratio is 10% is a big outline.

Important Note: When creating fallback font assets, it is important to make sure their sampling point size to padding ratio is the same as their primary. This will ensure the visual appearance of those FX like outline are consistent in width (in the case of an outline) relative to the primary font asset. Although the sampling point size to padding ratio should be the same, the actual sampling point size and padding can be different as well as texture size. For instance, if the primary has 100 sampling point size with padding of 10, the fallback can have a sampling point size of 50 with padding of 5.

3 Likes

Thanks for clarifying.

1 Like

I have a 90 point font with a 9 pixel padding and still have this issue, but only in the Game view when the text is small enough to be mipmapped. This confuses me -surely if it can render without artefacts in the Editor view, it can do it in the Game view?

Game view (blown up a bit for ease):
7622734--948103--upload_2021-11-2_13-11-0.png

Editor view at similar size. Note the outline colour is also grey ingame, when it should be black:
7622734--948109--upload_2021-11-2_13-12-3.png

I presume it’s because when mipmapped, the SDF forms bridges between characters and never reaches zero. But I can’t see any way to disable mipmaps on the atlas or control mipmap bias. I am guessing that the editor view does not mipmap, because the small editor font looks to be sampled straight from the top LOD rather than filtered.

Mipmapping doesn’t work with SDF. As such SDF Atlas textures are created with Mipmapping disabled so unless something else is re-enabling mipmapping on those texture it should not be enabled.

Are you using any type of scaling of the Gameview or CanvasScaler in the scene? If so, try testing with one of the SDF SSD shaders which are included with the TMP Essential Resources. Let me know if you still get the visual artifacts with one of those shaders.

1 Like

The SSD shaders are not available unfortunately, presumably because I’m on URP (they’re pink in the Inspector)
There is scaling because my UI designer wants to target 4K as a reference resolution meaning that the Canvas Scaler usually scales the parent UI window by between 0.2 and 0.5 - also the font is created at 90pt which seems excessive.

I can fix it by regenerating the font with a lower point size, which reduces the need for mipmapping.

The SSD shaders should work with URP. Check to make sure all of your TMP shaders are contained in the same folder which is now outside of the Resources folder. It is possible that your SSD shaders were imported in the new location in “TextMesh Pro/Shaders/…” but your .cginc files are still contained in “TextMesh Pro/Resources/Shaders/…” this would result in the shaders not compiling.

Ah, thanks for that. Moved all the shaders + cgincs into the new folder, but the SSD ones still don’t appear in the shader dropdown :frowning:
As I say though, smaller point size has fixed the mipmapping so I’m happy :smile:

Did you re-import the TMP Essential Resources? You can do so by going to “Window - TextMeshPro - Import TMP Essential Resources”. This will bring up the asset importer where you can see and select what will be imported.

1 Like

It was the Perspective Filter under the debug settings (can get to it blow lighting,glow etc)
setting it to 0 removed the boxes behind my letters

Two years later and there is still no simple “You should aim for around 10% Ratio” hint anywhere in the font asset creator, a small change that could prevent a lot of users investigating the same problem.

1 Like

When font assets are created via the context menu create option, the default sampling point size is 90 and padding is 9 for a 10% ratio.

In the latest preview releases of TMP, the font asset creator now has two modes for padding, an absolute mode and a relative / percentage mode where it defaults to 10%.

8007230--1030109--upload_2022-3-30_12-57-25.png

The above should help minimize new users potentially running into this issue. This issue is covered in the following FAQ Question 2 in the sticky post above.

Changing the font shader to Distance Field SSD fixed the issue for me.

1 Like

Hi @Stephan_B
I also have semi transparent box around the text when I’m walking 1 meter from the text (world space canvas) and the boxes disapear when I’m closer.
No scaling on the objet (only on the root canvas), and 10% ratio (also tried Perspective Filter to 0 but didn’t do anything)
My only solution for now is using Distance Field SSD shader like @jbartelt (I’m using the mobile version for performance)
So now it works but I don’t really know why, any clue ?
Thanks ! :wink:

I have the same issue and changing the font shader to Distance Field SSD also fixed the issue for me.

1 Like

In order for text to render correctly when using Signed Distance Field, scaling information (SDF Scale) has to be passed to the shader for each individual characters. This SDF Scale represents the relationship between the actual rendered scale of the glyph relative to the sampling point size in the texture. With normal SDF shaders, this scale information is encoded in the UV0.W (in version 3.2.0-pre.x) This scale is handled in the vertex shader. This is very efficient from a performance point of view but requires making sure this scale is correct.

By contract, the SSD shaders use Screen Space Derivative to compute this scale. This is convenient since we no longer have to pass this scale but this operation is done in the fragment shader / per pixel which is more costly from a performance point of view. Please note that on some devices this SSD has been optimized where the costs are marginal but this is not the case on all platforms. On desktop devices, the performance different is marginal but like I said it can be more significant on mobile devices.

When using the normal shaders, TMP does its best to track potential scale changes to update the SDF Scale but this is not always possible as changes to resolution for instance are not easily tracked or manipulation of scales of objects outside of what TMP can detect. In those types of cases, using the SSD shaders makes life easier but always be sure to check / test to make sure everything appears to be running as you expect.