Search Unity

TextMesh Pro TMPro: Draw (external) outline before faces

Discussion in 'UGUI & TextMesh Pro' started by TimHeijden2, Nov 10, 2017.

  1. TimHeijden2

    TimHeijden2

    Joined:
    Aug 11, 2016
    Posts:
    86
    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.
     

    Attached Files:

  2. Stephan_B

    Stephan_B

    Joined:
    Feb 26, 2017
    Posts:
    6,595
    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.

    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.
     
    Last edited: Nov 11, 2017
    Hexenwerk and TimHeijden2 like this.
  3. tswierkot

    tswierkot

    Joined:
    Feb 15, 2017
    Posts:
    25
    Any news on this front? Could definitely use this functionality to apply FX per block of text instead of per character.
     
  4. Stephan_B

    Stephan_B

    Joined:
    Feb 26, 2017
    Posts:
    6,595
    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.
     
  5. ralf_w

    ralf_w

    Joined:
    Aug 29, 2018
    Posts:
    1
    Any news on that front?
     
  6. Stephan_B

    Stephan_B

    Joined:
    Feb 26, 2017
    Posts:
    6,595
    Hoping to have an update within the next week or so.
     
    TimHeijden2 and DarekRusin like this.
  7. samfss

    samfss

    Joined:
    Apr 10, 2019
    Posts:
    16
    Any news? Been looking forward to a proper solution to this for a loooong time. :)
     
  8. TimHeijden2

    TimHeijden2

    Joined:
    Aug 11, 2016
    Posts:
    86
    We'd also still love to have this by the way :D
     
  9. spiritanimalinc

    spiritanimalinc

    Joined:
    Aug 24, 2019
    Posts:
    1
    Ditto bump. Our style guide uses nice plump text outlines but these overlap unless we space characters too far apart.
     
  10. cAyouMontreal

    cAyouMontreal

    Joined:
    Jun 30, 2011
    Posts:
    315
  11. Stephan_B

    Stephan_B

    Joined:
    Feb 26, 2017
    Posts:
    6,595
    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.
     
  12. cAyouMontreal

    cAyouMontreal

    Joined:
    Jun 30, 2011
    Posts:
    315
    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!
     
  13. paradizIsCool

    paradizIsCool

    Joined:
    Jul 10, 2014
    Posts:
    178
    Hi, any news about this feature ?
     
    cultureulterior and DarekRusin like this.
  14. samfss

    samfss

    Joined:
    Apr 10, 2019
    Posts:
    16
    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.
     
  15. madGlory

    madGlory

    Joined:
    Jan 12, 2016
    Posts:
    44
    +1 we also need this feature on translated text!
     
  16. tetriser016

    tetriser016

    Joined:
    Jan 3, 2014
    Posts:
    100
    I'm also waiting for the new text system for the improved outlines
     
  17. Zebbi

    Zebbi

    Joined:
    Jan 17, 2017
    Posts:
    521
    Outlines for pixel-fonts is an absolute pain, please say this is coming soon.
     
  18. samfss

    samfss

    Joined:
    Apr 10, 2019
    Posts:
    16
    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?
     
  19. OnatKorucu

    OnatKorucu

    Joined:
    Apr 18, 2018
    Posts:
    8
    Any updates on this issue? Our artist is really upset that she can not see the same result in Unity and Photoshop.
     
  20. Stephan_B

    Stephan_B

    Joined:
    Feb 26, 2017
    Posts:
    6,595
    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.
     
  21. feds

    feds

    Joined:
    Nov 8, 2017
    Posts:
    8
    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.
     

    Attached Files:

    Last edited: Nov 1, 2021
  22. feds

    feds

    Joined:
    Nov 8, 2017
    Posts:
    8
    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.
     

    Attached Files:

    Sokolovkyi and Rachan like this.
  23. Crokett

    Crokett

    Joined:
    May 14, 2021
    Posts:
    48
    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.

    upload_2022-1-21_19-7-55.png

    Thanks a lot!!!
     
    Unifikation likes this.
  24. ChaosResolution

    ChaosResolution

    Joined:
    Jan 22, 2013
    Posts:
    80
    Works great! However, seems to throw an error whenever a property is adjusted:

     
  25. Josema1rj

    Josema1rj

    Joined:
    Apr 30, 2021
    Posts:
    1
    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
     
  26. aaversa

    aaversa

    Joined:
    Sep 5, 2016
    Posts:
    41
    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.

     
  27. borovak

    borovak

    Joined:
    Mar 17, 2015
    Posts:
    1
    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.

    2023-03-15 12_25_17-Haru - MainScene - Windows, Mac, Linux - Unity 2021.3.9f1 Personal_ _DX11_.png
     
  28. eduartsdo

    eduartsdo

    Joined:
    Aug 24, 2022
    Posts:
    1
    Hi! Have you found a solution to that problem? I got the same issue over here :(

    Thanks!
     
  29. THE2FUN

    THE2FUN

    Joined:
    Aug 25, 2015
    Posts:
    63
    It helped, now my thin outlines are much larger and bolder
     
  30. CDF

    CDF

    Joined:
    Sep 14, 2013
    Posts:
    1,311
    FYI, This shader won't work in URP, as URP doesn't support multi-pass shaders.
     
  31. Xaxup

    Xaxup

    Joined:
    Nov 27, 2017
    Posts:
    3
    It is insane how TMP doesnt support EXTERNAL outline in the end of 2023...
     
    GuirieSanchez and DarekRusin like this.
  32. yigitkanat

    yigitkanat

    Joined:
    Feb 13, 2023
    Posts:
    3
    You can make it like this


    1. Pass { Name "Pass A"
    2. Tags { "LightMode" = "UniversalForward" }

    3. // ...
    4. }

    5. Pass { Name "Pass B"
    6. Tags { "LightMode" = "SRPDefaultUnlit" }

    7. // ...
    8. }
     
  33. mizunokazumi_unity

    mizunokazumi_unity

    Joined:
    Jun 30, 2022
    Posts:
    1
    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)