MSDF Text Rendering

The q5 WebGPU text renderer uses the multi-channel signed distance fields (MSDF) approach for high performance and high quality text rendering. Text can be rapidly recolored, rotated, and scaled without any loss in quality or performance.

MSDF, introduced by Chlumsky Viktor in his master's thesis "Shape Decomposition for Multi-channel Distance Fields" (2015), improves upon the signed distance field (SDF) technique, popularized by Chris Green and Valve Software in "Improved Alpha-Tested Magnification for Vector Textures and Special Effects" (2007).

SDF	MSDF

For convenience, if no font is loaded before text is run, then q5's default "sans-serif" MSDF font is loaded: https://q5js.org/fonts/sans-serif-msdf.json

This 512x512 msdf texture (207kb) was made with the Microsoft YaHei font and stores every character visible on a standard English keyboard, letters with diacritics (accents) used in European languages, and mathematical symbols.

!"#$%&'()\*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^\_`abcdefghijklmnopqrstuvwxyz{|}~�¡¢£¥©®°²³´·¹º¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿ‘’“”ΑαΒβΓγΔδΕεΛλΠπΣσΩω∴∵─│┌┐└┘├┤┬┴┼▀▄█▌▐▓▒░←↑→↓↔↕↖↗↘↙«»µτΦΘ∞≡±≈∙√ⁿ

Do you think any other characters ought to be included in the default set? Let us know! https://github.com/q5js/q5.js/issues

Create a MSDF Font

You can choose a custom set of characters and convert fonts to MSDF format by using the msdf-bmfont-xml website, created by Don McCurdy.

Optionally, you can use q5's msdf-minifier node.js script to reduce the size of the MSDF json file.

Load a MSDF font

Fonts must be in MSDF format with the file ending "-msdf.json".

await Canvas(200);

loadFont('arial-msdf.json');

q5.draw = function() {
  fill(0.71, 0.92, 1);
  text('Hello, World!', mouseX, mouseY);
}

Displaying Emojis

Full color emoji characters can't be rendered using the MSDF technique, so draw them using textImage.