WebGL Font Rendering

An experiment with font rendering techniques. (Olle Alvin (2020) did an awesome literature review for this topic.)

The current implementation is based on the signed distance field text rendering technique introduced by Chirs Green (2007). I would also like to implement the multi-channel signed distance field text rendering method proposed by Viktor Chlumský (2015) later.

Live Demo

• Use mouse wheel to zoom in/out

• Use mouse drag to pan around

  Note
  Only supports displaying Extended ASCII characters for the moment

To-Do

1. Move the font texture generation procedure into a worker thread
2. Replace tinySDF with msdfgen-wasm to get better rendering result

Building

yarn
yarn build
yarn preview --port 8080 # Check out http://localhost:8080

Testing

yarn test

Further Reading

Resolution-independent font rendering:

• Easy Scalable Text Rendering on the GPU
• GPU Text Rendering with Vector Textures
• GPU-Centered Font Rendering Directly from Glyph Outlines