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

Typically a semi transparent box around the text is the result of the sampling point size to padding being too small. You should normal aim for a ratio of about 10%.

In the image above, it doesn't look like this box is semi transparent so perhaps the incorrect shader is assigned to the material?

Can you post an image showing the Face Info of your font asset?

Can you also post an image of the Material inspector on the text object making sure that I can also see the setting in the Debug section of the material.

 

Still need to see the Face Info on the font asset but I suspect your ratio of sampling point size to padding is too small given your padding is 6 and the atlas texture 8K x 8K which is likely excessive in terms of size.

With regards to the atlas texture size and given the new Dynamic SDF system is available, you should aim for 1024 X 1024 or a maximum of 2048 x 2048 where you would have a static primary font asset that contains the known text in the project with a dynamic fallback assigned to it as a catch all for user input.

 

Your Sampling Point Size is 1352 and your padding is 6 for a ratio of 0.4% which is why you are seeing this grey box around the text. Your Sampling Point Size to Padding ratio should be about 10%

Rule of thumb, also aim for a Sampling Point Size of about 72 to 96 points. 1352 is way too high.

Regenerate your font asset with more reasonable values. Use an atlas texture size of 1024 x 1024 if all you are adding to the font asset is Extended ASCII.

 

Make sure your take the time to watch the Font Asset Creation video as well as the Working with Material Presets.

I'll need to update those videos at some point but their content still remains pretty relevant today.

 

Perspective filtering can also cause a similar issue but most of the time, the above is related to the Sampling Point Size to Padding ratio being too small. So step one should always to check this Ratio to make sure it is about 10%.

If that doesn't resolve the behavior then next check Perspective Filtering.

 

The resulting point size and padding ratio is displayed in the Result Window of the Font Asset Creator as seen below.



Next opportunity that I have to work on the Font Asset Creator, I will add tooltips to these properties.

I will also explore revising the padding where it can be defined as a fix value or percentage of sampling point size where it would be 10% by default.

I certainly agree the documentation is lacking on this which will be addressed.

 

Can you post an image of your font asset so I can see the Generation Settings?

Also post an image of the text with this square box around it.

 

The TMP shaders were updated several months ago to include a new property to control culling. Updating the shaders by re-importing the TMP Essential Resources should resolve that. You can choose to only import the shaders.

 

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.

 

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.

 

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.

 

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.

 

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.

 

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%.



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.

 

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.