2D over 3D

So I implemented this tutorial from my favourite place.  While the results were good, I started to hack around them in order to create A Better Font Management System™.  It went on for days …

This first thing I did was dealing with the colour.  This is an old trick I learned with OpenGL: it’s easy to colour white fonts to any other colour simply by playing with the colour calls. Say you have, like most games today, a chat system with different colours for highlighting various functions: local chat, world chat, whisper, system messages …  Well, you’re not going to create a strip of coloured fonts for each of these functions.  Previously, it was all about using glColor() before each draw call.  Now with shaders, it’s just a matter of adding these 2 lines in a simple fragment shader for textures.

uniform vec3 Filter;
(...)
color = texture2D( myTextureSampler, UV ) - (vec4(1.0, 1.0, 1.0, 0.0) - vec4(Filter, 0.0));

This may not look like much, but this is actually the first time I modified a shader by myself for an original solution.  There are other ways to do it, but this one is mine. 🙂

 

fontcolors-thumb

The second thing to consider was the usual warnings about using foreign languages.   The tutorial repeats this fact but for the scope of the tutorial, it still uses the old ASCII-based grid trick for building the font map, which mean that it’s tailored for an anglo-saxon public. To create another mapping (and there are plenty out there), you must create another map of those fonts. Another problem I find with a fixed ASCII grid is that you may not want to write text at all but simply use numbers with commas, dots and colons and a few unusual dingbats for good humour.  In that case, all the other characters are wasted.  So instead of automagically mapping your UVs as mathematical offsets to your grid based on the ASCII code of your characters, it’s better to have a single strip of random characters, each isolated by a grid that remembers the Unicode number for each one.

Now Unicode isn’t that hard to learn. I found this article very useful to hack my own UTF-8 based system.

 

jpfont-thumb

So then it’s just a matter of scanning the strip to isolate the rectangles surrounding each character, packing them (using a solution similar to what I presented on my last post), and, finally, keeping a separate file for the UVs and any additional info necessary in a manageable format like XML or JSON.


json-thumb   packing-thumb
In this “game” (together with Oh, so beautiful Suzanne), I stored each rectangle positions in an STL map with the Unicode number as key.  Each time I scan a character, I search the key and it returns the correct rectangle in the map.

finalrender-thumb

I stumbled against a few blocks along the way. I panicked a bit when I saw that the rendering was not quite pixel-perfect … Did something go wrong in the packing ?  Are the characters packed too close ?  I found that for a successful 2D rendering, you must turn off filtering.  The fact that the tutorial used a TGA file instead of the usual PNG or DDS format may have been for the practical reason of isolating the filtering and mip-mapping routines that are so common in the other tutorials.  And I naïvely assume that I should write them as part of the loading process for any map.

 

pixelperfect-thumb

So that was fun.  I’m far from a complete solution, as there are many tricks to master: scaling, rotating, alignment, spacing … but there are other times when fonts are not necessary and rendered text on a quad is the best way to display an original message.

Also, my current system renders fonts with FreeType (they provide an excellent tutorial here) so you can see a bit of no-so-smooth contours.  It provides a nice quick solution but creating beautiful fonts is also an art – and my knowledge of FreeType is limited.  So retouching them with The Gimp improved things dramatically as you can see in the “18.018” image above.

I’ll be taking a break from the standard OpenGL tutorials and work on some new exciting stuff in terms of game engine.

See ya soon and Happy Hacking.

Packing it up

I got pretty busy last week trying to implement a tutorial on 2D text.  The experience was successful and I’ll be posting some results soon.  But the more I got into it, the more I saw possibilities to expand on it and I pulled out some old code from my OpenGL 2 library and started to geek out on an actual tool to map and pack 2D font textures (or any textures actually) into larger maps.

Discussing the “best” algorithm for packing is akin to Ukrainian mothers discussing their families’ Borscht recipe: everybody think theirs is the original and the best (or so I’ve been told by Ukrainian acquaintances).

There are different ways of naming the problem (whether it’s texture packaging or The Knapsack Problem), but pretty much everyone agrees that finding some kind of optimization to it is NP-Hard, which means that finding a fast solution to pack all your textures in the most efficient way will take more time that you’re willing to spare to code, test and execute this beast.  Which is why most lazy persons like myself use one that “just works” and move on.  One day, if the solution causes any trouble, then we put time and money on finding a better solution (and a chance of having a slightly better efficiency rate, say 3% like some guy I read earlier on Stack Overflow).

Basically, I like this developer’s solution.  It’s simple to understand and code and it gives great results, as you can see in the image below.  This was done with a set of 3 tiles ordered randomly; the recursive algorithm aborts when it meets it’s first tile that cannot be placed.  And I’m sure we could squeeze a few more green ones.  This was a simple test and already, this looks fine.  But in a real-life situation, tiles are first sorted from biggest to smallest before packing.  And for those that wouldn’t fit, it would be trivial to implement some sort of overflow tile.

See you next time when we discuss 2D text and see how all this fits together.

pack

Fiat lux

Unlike God in Genesis, I had to sort out my own chaos before summoning light.

Tutorials are not meant to do 100% of the job for you. But there are some aspects of OpenGL that remain puzzling even when they are are presented to you for the umpteenth time. In this tutorial, the “answer code” is filled with buffer creations and variables assignments that either

  • mimic more or less the flow of the tutorial.
  • are simply patched on the legacy code of previous tutorials.
  • have their own little section (in some sort of library) away for the main flow .

While the work is cut out for me in order to understand the math of lighting, it’s another business to actually create something that will be re-usable and useful in other circonstances without someone taking you by the hand every time. As I said before, since I’m not using most authors’ windowing system, I had built my own patched up version of their tutorials that fit my own window creation with mouse and keyboard control.  As I was failing this tutorial (and others for reason I’ll have to investigate)  I spent a couple of days just sorting out things in proper places for understanding how OpenGL ticks. And that bring me more satisfaction that an individual rendering (well, the rendering part is nice, too. 🙂 )

The code now looks more like the narratives I like to put in code when I create some class for future reading for myself or others.

  1. Generate all the necessary buffers for a given program.
  2. Set all needed Uniforms for this program.
  3. Collect data, bind it.
  4. Set the program as current and render.

The fact of creating buffer and setting all uniforms so early at this stage helps me understand the purpose of this program: what I need as resources, what to set, what to calculate and abstract that knowledge in a general point of view.

(FYI: programs, in OpenGL, are not individual binaries – like a program that you run on your computer – but a set of pipeline rules that objects – i.e. their vertices, normals and uv texturing coordinates  – go through before showing the final results on the screen.)

Enjoy the results featuring Suzanne, the famous Blender monkey.

no_lighting_thumb

no_lighting_wf_thumb

with_lighting_thumb

with_lighting_wf_thumb

return top