https://github.com/tw1ddle/webgl-distance-fields

:star: Realtime Euclidean distance field generation and rendering
https://github.com/tw1ddle/webgl-distance-fields

distance-fields distance-measures glsl haxe sdf shaders signed-distance-field webgl webgl-distance-fields

Last synced: 5 months ago
JSON representation

:star: Realtime Euclidean distance field generation and rendering

• Host: GitHub
• URL: https://github.com/tw1ddle/webgl-distance-fields
• Owner: Tw1ddle
• License: mit
• Created: 2016-01-04T18:22:02.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2021-12-13T21:41:33.000Z (over 3 years ago)
• Last Synced: 2023-04-03T23:30:05.556Z (about 2 years ago)
• Topics: distance-fields, distance-measures, glsl, haxe, sdf, shaders, signed-distance-field, webgl, webgl-distance-fields
• Language: JavaScript
• Homepage: https://samcodes.co.uk/code/
• Size: 6.3 MB
• Stars: 60
• Watchers: 5
• Forks: 12
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![Project logo](screenshots/webgl_distance_fields_logo.png?raw=true "WebGL Distance Fields Logo")

[![License](https://img.shields.io/:license-mit-blue.svg?style=flat-square)](https://github.com/Tw1ddle/WebGL-Distance-Fields/blob/master/LICENSE)

[![Build Status Badge](https://ci.appveyor.com/api/projects/status/github/Tw1ddle/WebGL-Distance-Fields)](https://ci.appveyor.com/project/Tw1ddle/WebGL-Distance-Fields)

Fast Euclidean distance field generation and rendering demo. Run it [in the browser](https://tw1ddle.github.io/WebGL-Distance-Fields/).

## 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](https://github.com/Tw1ddle/WebGL-Distance-Fields/blob/master/screenshots/realtime.gif?raw=true "WebGL Distance Fields Realtime Screenshot")](https://tw1ddle.github.io/WebGL-Distance-Fields/)

## How It Works

The technique is based on Chapter 12 of [OpenGL Insights](https://openglinsights.com/) by Stefan Gustavson. Refer to the [generator code](https://github.com/Tw1ddle/WebGL-Distance-Fields/blob/master/sdf/generator/SDFMaker.hx), shaders and [readme](https://github.com/Tw1ddle/WebGL-Distance-Fields/tree/master/sdf).

Anti-aliased input (128x128):

![Screenshot](https://github.com/Tw1ddle/WebGL-Distance-Fields/blob/master/screenshots/screenshot1.png?raw=true "WebGL Distance Fields Screenshot 1")

Output rendered at (~700x700):

![Screenshot](https://github.com/Tw1ddle/WebGL-Distance-Fields/blob/master/screenshots/screenshot2.png?raw=true "WebGL Distance Fields Screenshot 2")

## Notes

* The demo was inspired by Paul Houx's [text rendering sample](https://github.com/paulhoux/Cinder-Samples) for Cinder.

* Written using [Haxe](https://haxe.org/) and [three.js](https://threejs.org/).

* Uses the actuate and Sure [haxelibs](https://lib.haxe.org/).

## 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](https://twitter.com/Sam_Twidale).