# Fonts and Text #

The rendering of fonts and text in VR is tricky as text elements (glyphs) are rendered in 3D.

#### Options #

One option is to use geometry fonts as used in three.js TextGeometry however this can be computationally expensive for large quantities of text. A second option is to use the browser to generate text blocks and then make these available through html5 canvas bitmaps to OpenGLES textures used by React VR. However, the difficulty with this approach is determining an ideal rendering size that strikes a proper balance between minimizing blur and managing the amount of texture memory required.

#### React VR #

For these reasons, React VR takes a slightly different approach, one which attempts to maximize for the common usage, but in turn has its own constraints. React VR text rendering makes use of the same method as the Oculus Mobile SDK and uses Signed Distance Field fonts.

Using distance field fonts allows the font to remain crisp and sharp even when dynamically rendered to the screen in 3D. Because the fonts are rendered using bitmap textures, a minimal amount of geometry is used. We get dynamic font content and placement with minimal geometry and texture usage.

The constraint is that because glyphs are not generated dynamically, the full unicode character set often present in browsers is not available.

#### Character sets #

The React VR default character set is based on 387 glyphs covering EFIGS languages. Also included are pregenerated textures for Japanese and Korean although these understandably are larger downloads.

It is also possible to generate your own font set textures using the fontue tool in the Oculus Mobile SDK. The tool has a dependency on FreeType, and can be found in the Oculus Mobile SDK `Tools/fontue` directory, along with a `readme.txt` describing its operation.

The base command line for the efigs font is:

OculusSans-Medium.otf efigs\efigs -co -0.01 -ts 1.0 -hpad 128 -vpad 128 -sdf 256 1024 1024 -cf data\strings\values\strings.xml -cf data\strings\values-de\strings.xml -cf data\strings\values-en-rGB\strings.xml -cf data\strings\values-es\strings.xml -cf data\strings\values-es-rES\strings.xml -cf data\strings\values-fr\strings.xml -cf data\strings\values-it\strings.xml -cf data\EFIGS_extended.txt

Further characters can be added using additional `-cf` entries.

← Prev Next →

You can edit the content above on GitHub and send us a pull request!