You must have both FontForge and msdf-atlas-gen installed and on your PATH
(the letter may also just be in the current working directory).
To use it: fontforge -lang=py -script generator.py BASEFONT FONT...
BASEFONT
should be a regular font, like Arial, Roboto, Courier New, or anything you might get from https://www.fonts101.com/FONT
can be any kind of font, including icon-fonts, emoji-fonts (without colors!) and other symbol-sets.
To render text with the resulting MSDF, you can use this shader:
in vec2 texCoord;
out vec4 color;
uniform sampler2D msdf;
uniform vec4 bgColor;
uniform vec4 fgColor;
uniform float pxRange = 4; // set to distance field's pixel range
float screenPxRange() {
vec2 unitRange = vec2(pxRange)/vec2(textureSize(msdf, 0));
vec2 screenTexSize = vec2(1.0)/fwidth(texCoord);
return max(0.5*dot(unitRange, screenTexSize), 1.0);
}
float median(float r, float g, float b) {
return max(min(r, g), min(max(r, g), b));
}
void main() {
vec3 msd = texture(msdf, texCoord).rgb;
float sd = median(msd.r, msd.g, msd.b);
float screenPxDistance = screenPxRange()*(sd - 0.5);
float opacity = clamp(screenPxDistance + 0.5, 0.0, 1.0);
color = mix(bgColor, fgColor, opacity);
}
Building the text geometry is a bit more involved, but uses the same principles as any other bitmap font, and thus left as an exercise to the reader.