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 :P)

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.

3283819--254080--upload_2017-11-10_16-6-21.png

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.

2 Likes

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.

2 Likes

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

We’d also still love to have this by the way :smile:

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.

4 Likes

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 ?

2 Likes

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.