Rendering FreeType fonts

Question

I have been trying to render FreeType2 fonts in OpenGL 3. I used NeHe's tutorial http://nehe.gamedev.net/tutorial/freetype_fonts_in_opengl/24001/ . however, I modified it a little for modern OpenGL 3+. Actually, I use glBufferData(...,GL_DYNAMIC_DRAW) to update vertex buffer for every character. The arrays of vertices are created during glyph loading as NeHe does with display lists:

    int width = next_p2(bitmap.width);
    int height = next_p2(bitmap.rows);

    float   x=(float)bitmap.width / (float)width,
        y= (float)bitmap.rows / (float)height;


    using namespace glm;
    glyphsVertices[c] = new pxgVertex2dT[4];
    glyphsVertices[c][0] = {  vec2(0,bitmap.rows), vec2(0,y) };
    glyphsVertices[c][1] = {  vec2(0,0), vec2(0,0) };
    glyphsVertices[c][2] = {  vec2(bitmap.width,0), vec2(x,0) };
    glyphsVertices[c][3] = {  vec2(bitmap.width,bitmap.rows), vec2(x,y) };

Where glyphVertices is two-dimentional array of such structure:

   struct Vertex2dT
   {
       glm::vec2 pos;
       glm::vec2 texCoord;
   };

Unfortunately, I get the following result:

So, what am I doing wrong?

Answer 1

As SAKrisT correctly pointed out, the problem was caused by incorrect offset by Y axis. Playing a bit with the code, I figured out the solution:

   if(FT_Load_Char(face, c, FT_LOAD_RENDER))
     return;

    FT_GlyphSlot g = face->glyph;

    int width = next_p2(g->bitmap.width);
    int height = next_p2(g->bitmap.rows);

    ...

    float   x=(float)g->bitmap.width / (float)width,
            y= (float)g->bitmap.rows / (float)height;



    float x2 = g->bitmap_left;
    float y2 = g->bitmap_top;
    float w = g->bitmap.width;
    float h = g->bitmap.rows;


    using namespace glm;
    glyphsVertices[c] = new pxgVertex2dT[4];
    glyphsVertices[c][0] = {  vec2(0,h-y2), vec2(0,y) };
    glyphsVertices[c][1] = {  vec2(0,-y2), vec2(0,0) };
    glyphsVertices[c][2] = {  vec2(w,-y2), vec2(x,0) };
    glyphsVertices[c][3] = {  vec2(w,h-y2), vec2(x,y) };

Now it works perfectly!

Answer 2

Two things happening: Your code assumes the origin of the viewport in the upper left, while in reality it's in the lower left, which means your image is vertically flipped.

FreeType renders the glyph images with the origin in the upper left as well, which counters the y-flip of the geometry, hence the characters look upright.