Rendering Nice Characters In a 3D Engine

Let me tell you a developer story:Capture d’écran 2016-01-30 à 15.43.02

I always thought most vectorial font engines where limited when it comes to dynamise things a bit. I mean, drawing texts in applications: Everything is always static and monochrome.
With a Graphical API like OpenGL, and even more so, OpenGL ES for mobile, there is little hope to find a really interesting library that fits my needs.

Basically, I want all characters fitting one OpenGl texture, possibly colored, I also want my text drawing routine to make the characters dance, and finally I want to be able to create my own special characters within an existing font.
So I investigated on the best way to develop such a font engine…

Surprisingly, I found a way to not spend years creating my own font format. The two key words here are SVG and batik.

Capture d’écran 2016-01-30 à 15.19.33 SVG is a format for vectorial images, it is widely used to create nice colored vector images, and nice free applications like Inkscape are available to draw such images.
Batik is a set of open-source libraries maintained by Apache to draw and manipulate SVG, written in Java.

The interesting detail is that SVG is meant to have an inner Font format, some way to define a complete set of characters, within a SVG document. it seems obsolete, because none of the SVG tool I know use this “define my own font” feature. But there is an Open-Source “ttf to SVG Font” converter within batik. Here we are…

Capture d’écran 2016-01-30 à 15.16.41

I patched the java batik ttf converter to output another kind of SVG, that splits characters into Inkscape layers: So I can redraw  and optimize an existing font using Inkscape, and add my own characters in it.

Then I did a second tool, that converts SVG characters to a format I can draw on opengl textures. At this level, SVG helps again because it only contains simple quadratic bezier curves.Capture d’écran 2016-01-30 à 15.32.33.png

 Then I can directly use that for the real time rendering !
This engine was used to draw more funky texts in my previous game, and now it allows me to add specific mathematical symbols in my app. It inits the bitmaps very quickly, and allows each equations of Math Touch book to be drawn in one OpenGl call.
It was actually some weeks of work, but it really opened a lots of possibilities and works with all minimal OpenGl Configurations.

 

Advertisements