Techniques

• Fonts, techniques and methods .

  • Good video.

Bitmap Font

• Each glyph is stored as a pixel grid  (bitmap) for one specific size.

• Key concepts :

  • Simple, fast, easy to render.

  • Become blocky  or blurred  when scaled.

• Bitmap Atlas :

  • A single texture image containing many smaller subimages (e.g. glyph bitmaps) packed together. Instead of loading one texture per character, a bitmap atlas lets the renderer sample from different regions to draw arbitrary text with fewer texture bindings.

Vector Fonts

• Represented by quadratic Bézier curves.

• Performs an 'inside/outside test' to fill the area of the curves.

  • Normally a ray is cast from left to right and an evaluation is made based on the parity of the number of "collisions with curves" that occurred.

    • Even: outside. Odd: inside.

  • This is very slow. Because of this a Font Atlas is created, which acts as a cache  of the calculations performed.

    • In other words, a vector font is then converted into a bitmap font. This is called RASTERIZATION .

Key concepts

• Perfectly scalable.

• Too slow to draw and resize.

SDF (Signed Distance Fields)

• It's like a bitmap font, but instead of storing 'color', it stores a value proportional to the distance to the nearest edge of the glyph.

• A glyph is divided into multiple segments, where each segment has a color. This is done so that the rendering of one segment does not interfere with the rendering of another segment.

Key concepts

• Has difficulty at high scales, producing rounded edges.

Calculation

• Parameters :

  • Threshold

  • Smoothness

Technique

• Create the SDF texture at runtime and pass it to a shader.

• Create the SDF texture externally and use it in the shader.

• Signed Distance Fields (SDF) - Shapes, Fonts and Glyphs .

• Signed Distance Fields (SDF) - SDF and Ray Marching Tutorial .

  • Signed Distance Fields (SDF) - Geometry Functions .

MSDF (Multi-Channel Signed Distance Fields)

• MSDFgen .

  • Only generates 1 char.

  • .\msdfgen.exe msdf -font "Righteous-Regular.ttf" 'M' -o msdf.png -dimensions 32 32 -pxrange 4 -testrender msdf-render.png 1024 1024

• MSDF-Atlas-Gen .

  • .\msdf-atlas-gen.exe -font "Righteous-Regular.ttf" -type msdf -format png -imageout msdf-atlas.png -fontscale 8 -allglyphs

    • All glyphs.

  • .\msdf-atlas-gen.exe -font "Righteous-Regular.ttf" -type msdf -format png -imageout msdf-atlas.png -fontscale 8 -charset chars.txt

    • Only glyphs defined in the file chars.txt

Calculation

• Parameters :

  • Threshold

  • Smoothness

• It also uses value and median for the final calculation.

Expected results

• Ray in the RayLib Discord: "SDF can still generate artifacts, MSDF is better, but adds complexity".

• Medium/Large Text :

  • Looks nearly perfect (sharp with smooth curves).

• Small Text :

  • Slightly blurry or pixelated (distance field approximation).

• Sharp Corners:

  • May appear rounded (SDF smoothes edges).