WebGL Distance Fields Save

Fast Euclidean distance field generation and rendering demo. Run it in the browser.

Usage

The demo performs realtime distance field generation from text drawn on a HTML5 canvas. Type something to add letters, hit backspace or delete to remove letters, use mousewheel to zoom.

How It Works

The technique is based on Chapter 12 of OpenGL Insights by Stefan Gustavson. Refer to the generator code, shaders and readme.

Anti-aliased input (128x128):

Output rendered at (~700x700):

Notes

• The demo was inspired by Paul Houx's text rendering sample for Cinder.
• Written using Haxe and three.js.
• Uses the actuate and Sure haxelibs.

License

• The distance field shaders are in the public domain. The rest of the code is provided under the MIT license, unless noted otherwise.
• Got an idea or suggestion? Open an issue on GitHub, or send Sam a message on Twitter.