A C99 multi-channel signed distance field generator

Based on the C++ implementation by Viktor Chlumský, this project takes a TTF (or OTF) font file and generators a multi-channel signed distance field for use in rendering high quality text with low overhead and performance costs.

The output would be similar to the image below, which you can then push through your rendering pipeline and with the help of a little bit of math, get a high quality glyph rendered at any size.


The primary benefit is that you can use a small ‘msdf’ bitmap of perhaps 16x16 or 32x32 pixels, and render text at any given size without any loss of quality.

Here is how one might process it and render the final glyph, refer to the implementing I use in my engine here for a more thorough example.

// example fragment shader
// scale is render_width/glyph_width
// render_width being the width of each rendered glyph
float median(float r, float g, float b) {
    return max(min(r, g), min(max(r, g), b));

void main()
  vec3 sample = texture(u_texture, uv).rgb;
  float dist = scale * (median(sample.r, sample.g, sample.b) - 0.5);
  float o = clamp(dist + 0.5, 0.0, 1.0);
  color = vec4(vec3(1.0), o);