Text prefab with optimized dimension and rendering quality

[cre8ivepark]

Text is the one of the most important component in Holographic apps. To display text, there are two types of text components you can use in Unity — UI Text and 3D Text Mesh. However, there are two problems with these.
1. They are blurry in default. You need to tweak some of the variables to get the sharp high-quality text.
2. They are too big in default. You need to scale down a lot to get manageable size in HoloLens.

How can we get better rendering quality and proper dimension? Below describes the way to find the scaling factor to get proper dimension with UI Text and 3D Text Mesh.

Working with Fonts in Unity

Unity assumes all new elements added to a scene is 1 Unity Unit in size, or 100% Transform scale, which translates to about 1 meter on the HoloLens. In the case of fonts, the bounding box for a 3D TextMesh comes in, by default at about 1 meter in height.

Font Scale and Font Sizes

Most visual designers use Points to define font sizes in the real world, as well as their design programs. There are about 2835 (2,834.645666399962) points in 1 meter. Based on the point system conversion to 1 meter and Unity's default TextMesh Font Size of 13, the simple math of 13 divided by 2835 equals 0.0046 (0.004586111116 to be exact) provides a good standard scale to start with, though some may wish to round to 0.005.

Either way, scaling the Text object or container to these values will not only allow for the 1:1 conversion of font sizes from a design program, but also provides a standard to maintain consistency throughout the application or game.

UI Text

When adding a UI or canvas based Text element to a scene, the size disparity is greater still. The differences in the two sizes is about 1000%, which would bring the scale factor for UI based Text components to 0.00046 (0.0004586111116 to be exact) or 0.0005 for the rounded value.

Disclaimer: The default value of any font may be effected by the texture size of that font or how the font was imported into Unity. These tests were performed based on the default Arial font in Unity, as well as one other imported font.

Based on these scaling factors, we have created two prefabs - UI Text and 3D Text Mesh. Developers can use these prefabs to get sharp text and consistent font size. Since default font material does not support occlusion, we also want to include simple shader that supports occlusion.

Blurry default text - UI Text and 3D Text Mesh

Sharper text rendering quality with proper dimension.

Text examples with the prefabs

Default font shader vs shader with occlusion

[robertlevy]

Yes please! As a Unity newbie, crisp and consistent text rendering is the thing I've been most surprised to encounter as a stumbling block.

[StephenHodgson]

@cre8ivepark Thanks a lot for these tips.
I remember seeing your presentation on the WinHUGR youtube channel.

I think also having a SDF font would also go a long way to make text look and perform really well.

[cre8ivepark]

@HodgsonSDAS Thanks! I am also looking into SDF shaders but having trouble with some side effects such as rounded edges and fixed font size. We can add these prefabs with simple shaders for now and add SDF version later.

Rounded edge symptom with SDF shader:

Found this article on this issue:
https://lambdacube3d.wordpress.com/2014/11/12/playing-around-with-font-rendering/

[StephenHodgson]

Yeah, I agree, there are some issues. We're using text mesh pro and have seen good results using SDF with them.

There are other ways to ensure crisp edges using multi channel SDF:
https://dspace.cvut.cz/bitstream/handle/10467/62770/F8-DP-2015-Chlumsky-Viktor-thesis.pdf

https://github.com/Chlumsky/msdfgen

[jwittner]

More info on typography from the author of this issue: https://medium.com/microsoft-design/designing-typography-insight-for-hololens-a55fc5fe025#.xyk9bo3lg

=)

[NeerajW]

This work has been checked in. Closing stale issue.