Fast Euclidean distance field generation and rendering demo with three.js.
Try it in your browser. Type something. Hit backspace or delete to remove letters. Mousewheel to zoom.
- Calculates distance fields in realtime on the GPU.
How It Works
Realtime distance field generation from canvas text (Nvidia GTX960):
Anti-aliased input (128x128):
Output rendered at (~700x700):
- This is based on Chapter 12 of OpenGL Insights by Stefan Gustavson.
- Inspired by Paul Houx's text rendering sample for Cinder.
- Written using Haxe and three.js.
- Uses actuate and Sure from haxelib.
The distance field shaders are in the public domain. The rest is MIT licensed, unless noted otherwise.