Skip to content

WebGL 2 Signed Distance Font Renderer with Vertex Displacement Shader

Notifications You must be signed in to change notification settings

Empty2k12/WebGL2SDFText

Repository files navigation

WebGL 2 Signed Distance Font Renderer Build Status

WebGL 2 Signed Distance Font Renderer

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

Planned Features!

  • 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

Tech

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

Installation

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.

Development

Want to contribute? Great!

License

Written by Gero Gerke

  • Arial Font Copyright Robin Nicholas and Patricia Saunders
  • Comic Sans Font Copyright Microsoft

WTFPL License Greenkeeper badge

Free Software, Hell Yeah!