WebGL 2 Signed Distance Font Renderer is a WebGL 2 demo which shows how to render text in OpenGL using modern graphic techniques.
- Automatic font mesh generation
- Included .fnt to .json converter
- More options on the font mesh generator
- Tryout-Area where the text can be changed and different fonts can be selected
- Show FPS (Frames per Second) as Text rendered with this project
WebGL 2 Signed Distance Font Renderer with Vertex Displacement Shader uses a number of WebGL elements to function properly:
- Vertex and fragment shader
- Textures
- Index buffering
- Vertex displacement shader
WebGL 2 Signed Distance Font Renderer requires npm
to run.
Clone this repository, run npm install
and npm start dev
in the created folder to get the development server under http://localhost:8080/ running.
To build for production release, run npm run build
. Simply serve the public/
folder.
Want to contribute? Great!
Written by Gero Gerke
- Arial Font Copyright Robin Nicholas and Patricia Saunders
- Comic Sans Font Copyright Microsoft
Free Software, Hell Yeah!