Fast Euclidean distance field generation and rendering demo. Run it in the browser.
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
Anti-aliased input (128x128):
Output rendered at (~700x700):
- 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.
- 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.