Skip to content

Tw1ddle/WebGL-Distance-Fields

Repository files navigation

Project logo

License Build Status Badge

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.

Screenshot

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):

Screenshot

Output rendered at (~700x700):

Screenshot

Notes

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.