help.AddingFonts - tooll3/t3 GitHub Wiki

Background information:

There are many ways deal with text and render fonts. Internally Tooll already processes texts with UTF8. But these strings have to be visible in the Tooll Editor UI and eventually be rendered by Tooll with operators likes [lib.3d.Text].

The editor

Tooll's GUI is implemented with Dear ImGui and uses a font called Roboto. The UI font is processed on every startup into a font atlas texture. You can check this texture by using "Window→ImGUI Demo / Customization / Fonts / Atlas Texture". So extending support of other character ranges likes Chinese, Korean or Japanese should be possible and some people succeed with forks for that. Although the base-set for Chinese characters fits into a 16k atlas texture, there are some internal ImGui exceptions when trying to apply that list. More work is needed here.

Rendering Texts

There are many technical methods for rendering characters in a 3d application. Tooll primarily uses a method called Multi-Channel Signed Distance Field (MSDF). It combines the benefits of sharp corners and edges at very larges sizes (1000px and more) with relatively small atlas textures size and good rendering performance. It main disadvantage is the lack of support of colors fonts (like emojis).

For MSDF to work, you have to generate an Atlas-texture together with a description file that defines where each of your character is within the texture. This description file uses an established format and also includes information for kerning (but sadly not advanced typography like ligatures).

The software for generating new fonts is a free and open source and works for all True Type fonts and character ranges. Once you installed the software generating the atlas texture takes less than a minute.

Converting fonts to MSDF

  1. Install converter
    1. Install Node and the “necessary tools” coming with its installer (this might take several minutes)
    2. Install https://soimy.github.io/msdf-bmfont-xml/
npm install msdf-bmfont-xml -g
  1. Open terminal and change into directory
mkdir fontConversion
cd fontConversion
  1. Download character set (Using the 212 characters of the extended ascii character table might be excessive): https://www.dropbox.com/s/paunc0qyo8alys7/eascii%20%281%29.txt?dl=1
  • Alternatively you can copy and paste the following line into a file called eascii.txt (Don't forget to include the leading space):
 !'"#$%&()*,-./0123456789:;<>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~€‚ƒ„…ˆŠ‹ŒŽ‘’“”•–—˜™š›œžŸ¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿ
  1. Download fonts (e.g. from fonts.google.com)

Download and adjust the following bat:

:: Create atlas texture with...
::
:: -m 1024px dimension → Use 2048 for fonts with fine structures or curves 
:: -s 80 size → Increase if too much empty space in created image; decrease if two images were created
:: -r 4 Distance range → This will impact the softness of the font rendering and range of shadow. Too low causes aliasing. Too high artifacts.
:: -p 10 padding → I recommend 10 for 2048
::
:: Replace the <YourFontName> with the ttf filename
:: After conversion only copy .fnt and .png to your Tooll3-Resources folder

msdf-bmfont --reuse -i eascii.txt -m 1024,1024 -s 80 -r 4 -p 4 -t msdf -o <YourFontName>.png <YourFontName>.ttf
  • Optimize size and radius parameters to nicely fill a single atlas file.
  • Copy the .fnt and .png to T3/Resources/fonts/ folder.
  • Select .fnt file for [Text] operator.