Search Unity

  1. New Unity Live Help updates. Check them out here!

    Dismiss Notice

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:
    22
    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

    Unity Technologies

    Joined:
    Feb 26, 2017
    Posts:
    3,971
    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
    TimHeijden2 likes 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

    Unity Technologies

    Joined:
    Feb 26, 2017
    Posts:
    3,971
    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

    Unity Technologies

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

    samfss

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

    TimHeijden2

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

    Stephan_B

    Unity Technologies

    Joined:
    Feb 26, 2017
    Posts:
    3,971
    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.
     
    TimHeijden2 and DarekRusin like this.
  12. cAyouMontreal

    cAyouMontreal

    Joined:
    Jun 30, 2011
    Posts:
    303
    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!
     
unityunity