TextMesh Pro Problem: gray background in custom font (padding issue and possible solution?)

I have a problem with custom fonts in Unity 2020.3.6f1 and TextMeshPro 3.0.6

Although in the Editor the font is drawn and seen perfectly, in Play Mode each letter appears in a box with a gray background:
https://www.dropbox.com/s/t4jed7r2mos28oe/LLOGVR_20210519_752.png?dl=0

If the camera is too close to the letter, it disappears:
https://www.dropbox.com/s/4gyl334q6xwykjy/LLOGVR_20210519_753.png?dl=0

I have read an old thread on the subject:
https://forum.unity.com/threads/textmesh-pro-unintended-background-on-text.510435/

I have tried increasing the ratio of Padding to Sampling Point Size (greater than 10%), but without success.

I'm going a little crazy after so many tests. Please, any tips to get it right the first time?

Thank you very much in advance

 

My project is VR, with latest XR interaction toolkit.

This visual problem also appears in the texts of the WorldInteractionDemo scene that comes as an example in the XR Interaction Toolkit Project

 

What is the Sampling Point Size and Padding that you are using on this font asset?

Does your scene use a Canvas with Canvas Scaler?

When the camera gets close to the text object, this issue is likely the result of the clipping plane setting on the Camera.

 

Same visual effect without Canvas Scaler. GameObject and Canvas scale set to 1,1,1. Rect Transform scale is 1,1,1.
In font asset creator, sampling point size = 90, Padding = 9. Atlas resolution = 2048x2048. Render mode = Smooth Hinted. My custom font is Xolonium Regular. Material is TextMeshPro/DistanceField

Camera clipping plane from 0.01 to 1000.

The display problem is related to the distance from the camera and / or the size of the text. If you are a little out of the way or the text is small, the gray shading appears. If you are close or the text is very large, it will be seen perfectly.

 

After a trillion tests, I think I found a solution into TextMeshPro UGUI Material / Distance Field
Debug Settings Mode/ Sharpness —-> 1

I will continue to test to ensure that the source and its material "is stable" and looks good at any distance.

 

Try switching to one of the SSD shaders. These are included in the TMP Essential Resources and have the suffix SSD in their name. Let me know if the text renders correctly with those?

 

Thanks for your help and time. shader TMP_SDF SSD does not work well for me, it causes a pink material. I have not been able to update it to URP single rendering pass.

 

Pink Material means a shader error.

The SSD shaders should be working and were already updated to support single pass stereo rendering.

Please re-import them from the TMP Essential Resources as you should not be getting any error or pink material.

 

----

This was the solution. It completely resolved the issue. I also tried it at 0.5, and it still seemed to work. Thanks, mate.

 

I use URP and VR as well, and for me, the solution to get the best results was to:

• Change shader to Distance Field SSD
• Change Sharpness to 1
• Change Perspective Filter to 0
• Toggle Extra Padding off (from each TextMeshPro - Text (UI) component -> Extra Settings)

 

This is old but I came in here with the same issue and the solutions did not work for me, what fixed:

I ended up fixing it by importing this specific font with the Render Mode as "SMOOTH_HINTED" in the asset creator (Window > Text Mesh Pro > Font Asset Creator), all other 11 languages in my game were imported with "SDFAA" without any issues but Polish language would always come with the grey square

 

I also found setting the Shader to TextMeshPro/Bitmap can fix it.

 

Any idea how to fix this in the new UI toolkit? I dont see where shaders are applied in the UI builder and all my custome fonts have a light gray behind the characters?

Note: UI toolkit can't use TextMeshPro so these are created as standard font assets.

Update it was the padding

Padding
Characters in the font texture need padding between them so they can be rendered separately. This padding is specified in pixels. Padding also creates room for the SDF gradient. The larger the padding, the smoother the transition, which allows for higher-quality rendering and larger effects, like thick outlines. Use a padding of 5 for a 512x512 texture. A good rule of thumb is to have a sampling to padding ration of 1:10.