Weird transformation when transforming glyphs on freetype

Question

I am trying to do a simple text rendering engine for a small game I am working on. I tried to follow various tutorials but I never got the position right on the Y coordinate.

Now I am following this tutorial: http://en.wikibooks.org/wiki/OpenGL_Programming/Modern_OpenGL_Tutorial_Text_Rendering_01

I know that the glyphs are being loaded properly because I checked by them manually. The problem is that the glyphs look now like this:

The white things are supposed to be the glyphs I am trying to draw, but the appear highly distorted.

I think the problem is in the transformation, which looks like this:

float x2 = x + g->bitmap_left * sx;
float y2 = -y - g->bitmap_top * sy;
float w = g->bitmap.width * sx;
float h = g->bitmap.rows * sy;

GLfloat box[4][4] = {
    {x2,     -y2    , 0, 0},
    {x2 + w, -y2    , 1, 0},
    {x2,     -y2 - h, 0, 1},
    {x2 + w, -y2 - h, 1, 1},
};

Because it doesn't really look like an transformation without rotation, I think its rotating the glyphs and scaling them on weird ways.

But if I try to use glm like this

glm::mat4 MVP(glm::scale(glm::rotate(glm::translate(glm::mat4(1.0f), glm::vec3(x2, y2, 0.0f)), 0.0f, glm::vec3(0.0f, 0.0f, 1.0f)), glm::vec3(w, h, 0.0f)));

The string looks almost correct but it doesn't have the correct Y position.

Can you please point me in the right direction?

Answer 1

I think it's because you aren't using the metric data properly to render each glyph. In this case I think you would need to get the 'baseline' which is taken from each glyph's bounding box.

Something like this should get it:

FT_GlyphSlot slot = ftFace->glyph;
FT_Glyph glyph;
FT_Get_Glyph(slot, &glyph);
FT_BBox bbox;
//get dimensions in pixels
FT_Glyph_Get_CBox(glyph, FT_GLYPH_BBOX_TRUNCATE, &bbox);
int baseLine = (int)bbox.yMin;

Oh, and add that baseline to your Y position.

Answer 2

I found out what was wrong, turns out I was understanding the tutorial on the wrong way and that this part:

float x2 = x + g->bitmap_left * sx;
float y2 = -y - g->bitmap_top * sy;
float w = g->bitmap.width * sx;
float h = g->bitmap.rows * sy;

GLfloat box[4][4] = {
    {x2,     -y2    , 0, 0},
    {x2 + w, -y2    , 1, 0},
    {x2,     -y2 - h, 0, 1},
    {x2 + w, -y2 - h, 1, 1},
};

Its not a transformation its really vertex information and its bound out like this:

glBufferData(GL_ARRAY_BUFFER, sizeof box, box, GL_DYNAMIC_DRAW);

That way you can get every glyph on the screen without the need of a transformation on the shader.