TextMesh Pro TMPro: Draw (external) outline before faces

I'm working on a mobile in which we want outlines. Specifically, we want the outlines to be "external" to make the text pop. In addition, we don't want characters to overlap one another. In other words, rendering the outline before the faces such that the outline will always be completely behind the faces.

After trying out various settings with TMPro, it doesn't seem like there is a simple way to achieve this other than creating 2 TextMeshProUGUI components for each single text. (outline version + face version) Sadly, doing this is very inefficient and requires a lot of rendering performance, so I would much prefer being able to achieve the same effect with just one component.

I almost can't believe there is no such effect in TMPro, as there are a lot more effects in there that Unity doesn't over. At the same time, Unity's outline exactly what we want! (excl. text + outline performance for instance )

Because of that, I feel like I'm missing something obvious... Is there a setting for this? If not, is it possible to make a custom implementation for it without having the source code? We were able to create our own outline for unity's text system using BaseMeshEffect.

I added 2 images that I hope make it clear what I'm talking about. The first image is what happens when using underlay, because every face is drawn first you see overlap between characters. (geometry sorting determining which way they overlap) The second image shows the effect we want, but uses two textmesh components.

 

Some technical background data:
The ability to dynamically add Dilation and / or Outline, Shadow, Bevel, etc comes for the fact that TMP is using Signed Distance Field which makes it possible to do these things at the shader level and by simply changing material properties. This makes it very efficient and has no impact on the underlying geometry. By contrast, the UI - Effect - Outline and / or Shadow end up potentially increasing the geometry count by 5 to 10X, doesn't look good and has horrible performance.

So why the overlap?
Each character is contained within a quad. As your pointed out, these quads are drawn in the order that they appear in the mesh / geometry. So based on your image, the 'C' is first, followed by 'h' and then 'a' where 'a' overlaps 'h' because it was drawn after 'h'. If you look in the Extra Settings panel in TMP, you can change this order.



So with that technical stuff out of the way, how could we get the result you seek?

Short term and as you have done, you could use a 2nd TMP text object or even more to layer these to create more complex FX. Although this is not ideal since we are duplicating geometry, it is still much more efficient than using UI - Effect - Outline which increases geometry count by 5X and still looks bad.

A better way to handle this long term would be to actually combine the Signed Distance Field data where these FX would be applied as a whole per word or block of text where the resulting geometry would be a quad per word or block of text. This would achieve the result you seek but due to added complexity in terms of the geometry handling and all would result in some added performance overhead. I don't know yet how much impact this could add which could be marginal but I was thinking of adding the ability to make text objects "static" where this would combine the individual character quads to a quad per word. This would still provide the functionality you seek and even lower geometry count and improve performance. We could combine all the characters of a block of text into a single quad but I am concerned about the empty / overdraw space so I think the sweet spot might be at the word level.

In terms of this functionality, although this hasn't been requested that much over the past few years, I think it will be essential as we add support for script languages like Arabic where the outline overlap will be glaring. I don't have an ETA on this but it is most certainly on my list of features / improvements for the new text system.

P.S. Short term, some tool to allow users to easily create composite / combine multiple text objects to create these FX could be cool. That could be a cool asset for TMP users.

 

Any news on this front? Could definitely use this functionality to apply FX per block of text instead of per character.

 

In order to have an Outline for instance affect a block of text, the signed distance field information of this block of text needs to be combined. Ie. instead of a quad per character, we would have to generate geometry for this block (or per word).

This is a feature planned for the new text system. I don't have an eta yet but most certainly something that I want to provide in terms of functionality.

 

Any news on that front?

 

Hoping to have an update within the next week or so.

 

Any news? Been looking forward to a proper solution to this for a loooong time.

 

We'd also still love to have this by the way

 

Ditto bump. Our style guide uses nice plump text outlines but these overlap unless we space characters too far apart.

 

Bump! Any news @Stephan_B ?

 

We do have a new set of Shader Graph / URP / HDRP compatible shaders that users will be able to modify to support multiple outlines, shadows, glows, etc.

The ability to have outline / shadow per word / word segment / block of text is not ready yet but being worked on.

There is some functionality missing from Shader Graph like the ability to use custom material inspectors that is being worked on. We could release some non editable shader graph shaders with SRP / HDRP support with custom inspectors.

Currently looking at how to release this new set of shaders. These won't make the next release but they should be available within the next 30 - 60 days. The sooner the better of course.

 

That's sounds promising! Being able to make our own shaders for tmpro will UNLEASH the possibilities, I can't wait to play with it. Will it have per letter UVs? This will finally open the world of custom text (apart from the already made effects, lit outline or lit things that are already there).

Good news about per word outline, we have this specific issue in our internal project, where we want quite close letters but with some outline, and that's not possible right now because of letters overlapping.

Thank you for sharing inside dev updates, it's really kind of you!

 

Hi, any news about this feature ?

 

I would also like some idea on when this is coming, if at all. Ideally not tied into the SRPs as we're localising apps using the built-in pipeline, and the current outline implementation makes adding outlines to more flowing languages very difficult.

 

+1 we also need this feature on translated text!

 

I'm also waiting for the new text system for the improved outlines

 

Outlines for pixel-fonts is an absolute pain, please say this is coming soon.

 

This was something initially being looked at for 30-60 days from January 2020... I know it's been a rough year, but this is getting a little silly. Is there any update at all on this?

 

Any updates on this issue? Our artist is really upset that she can not see the same result in Unity and Photoshop.

 

No updates on the ability to combine SDF fields. This is still something that I would like to eventually support but don't have an ETA on.

Photoshop is a dedicated paint tool designed specifically for image manipulation. Although our text system when using SDF enables users to add all kinds of dynamic visual treatment to their text, we will never have the level of editing functionality that you find in Photoshop. The same would be true between Photoshop and After Effects as even Photoshop can't do it all either.

If you need heavily stylized titles and all, you can always use bitmap font assets and edit their atlas texture in photoshop or actually design the texture / image in photoshop and just map it on some object as a texture.

 

So, I wrote a shader to draw the outline externally but the problem I found was the outline was cropped by character's area and this is not controlled by shader but controlled by TMP directly, so in order to solve I need to do two steps:

1. First generate a new font and be sure you increase the padding size for the Atlas (explained why below), in my case I had padding 5 and increased to 20 to have a decent effect.
2. Use the custom shader attached here. (Path:
   TextMeshPro/Mobile/Distance Field External Outline)

That's it, should make the effect to work like this:

Explanation: A new Atlas is required because TMP calculates the area of the character based on size the character has on Atlas, so by simply adding padding to it you will see the outline already been drawn outside, the problem now is: the area of each character may cross the boundaries of the next char so some letters won't look great, so to fix it some people were using another text on top of that so the characters would be properly drowned.
Then the reason to use this custom shader is to make a more elegant approach for this solution, what the shader is doing is to draw the text with outline and a second one on top without outlines.

Tip: Increasing the padding will decrease the font's Point Size, pay attention on it to have a crispy font, if the point size is below 70 increase the Atlas resolution and generate again.

Tip 2: Do not generate a new Atlas for an existent font instead of generating a new font because you will break all texts using the old Atlas.

 

In case you need to use a texture (i.e. not Mobile optimised) here is the shader, remember to follow the steps from my previous post to increase the font padding.

 

Hello! First of all thank you very much for the shader. Is incredible! I had been looking for a way to achieve this result with TextMeshPro for quite some time.

I would also like to ask if it would be possible to modify it so that when using a color with an alpha channel, the entire set of the external line will be shown in a single tone without any type of overlapping color tones.



Thanks a lot!!!

 

Works great! However, seems to throw an error whenever a property is adjusted:

 

Hi, i'm having issues with your shader, when using the mobile shader you uploaded, i get the outline working only in the outside but each character still overlaps the others around and when using the not mobile shader it works exactly as the default distance field shader of textmeshpro, not only extenal outline and still overlapping

 

I also tried this shader and it doesn't seem to be doing what it's intended to do... I'm using a 96 point size font with outline at max and it looks like this.

 

I had the same problem at first. I played with settings a little bit and found a solution.

In the TMP_Font Asset inspector, if you change the "Atlas Population Mode" to "Dynamic" and the "Atlas Render Mode" to SDF8 (or 16 or 32), you can then change the "Sampling Point Size" until it fits what you want.

I hope it helps.

 

Hi! Have you found a solution to that problem? I got the same issue over here

Thanks!

 

It helped, now my thin outlines are much larger and bolder

 

FYI, This shader won't work in URP, as URP doesn't support multi-pass shaders.

 

It is insane how TMP doesnt support EXTERNAL outline in the end of 2023...

 

You can make it like this

1. Pass { Name "Pass A"
2. Tags { "LightMode" = "UniversalForward" }
3. 
   
4. // ...
5. }
6. 
   
7. Pass { Name "Pass B"
8. Tags { "LightMode" = "SRPDefaultUnlit" }
9. 
   
10. // ...
11. }

 

In 3.2.0-pre.3 they added a two-pass mobile shader "TextMeshPro/Mobile/Distance Field - 2 Pass" which does the same thing TMP_SDF External Outline.shader

Unity 2023 also has it (TextMeshPro 3.2.0 was added to com.unity.ugui 2.0)