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.



Why did I start Math Touch Book ?

I started mathtouchbook after I did my first video game on mobile, one year ago.
I was researching new kinds of interfaces on tablets, and also sometimes I needed to do some maths on a rough book.
I slowly realized that the equations and functions you usually draw there could gain a lot if it was managed on a haptic screen:

When you do math on a paper, you often write the first shape of an expression, then you write a second modified shape, then a third,… you constantly invert, simplify, develop, factorise what you write. Consequently, you can hardly imagine how big the result will be on the page, and mathematicians spend their lives struggling with page layouts.
Fortunately, Equations can also be seen in “four dimensions”, transforming through time.
Clearly, a mobile application could manage that aspect.

I think I could be able to program an engine using graphical processing units (gpu) that would draw equations in a vectorial space, and would be able to do morphing between those shapes.

Doing my previous video game, I actually made a Glyph Engine flexible enough to do that. Then a bit of tricks into the graph theory paradigm would be enough to make it a useful living mathematical tool.

A second important aspect of such a tool would be automatic alignment. One of the key for learning mathematics is to write clear, correctly aligned expressions. Automatizing this could help newcomers. Plus, every math tools force the users to type one line expressions with a lot of parenthesis that are hardly understandable. A vectorized space could avoid that.
Another idea came while I was reading a book about the life of Richard Feynman. He told how he could see equations in colors when he was a young boy, and how it helped him to learn.  Synesthesia, something great and easy to implement.

At this point, I knew I could make a tool within a year of work, with a quite precise workflow. So the development began.