Correct way to parse and draw glyph data

[prashant-saxena]

Hi,
I have exported the font data(CSV format) and texture into external files and using the code below to build vertex buffers but was not able to calculate offset_x and offset_y. Here is the code, please let me know if anyone finds any other mistake in the code.

typedef struct Glyph
{
unsigned int code;
float advance;
float pleft; // plane left
float pright; // plane right
float ptop; // plane top
float pbottom; //plane left
float aleft; // atlasleft
float aright; // atlasright
float atop; //atlastop
float  abottom; //atlasbottom
float kerning; // Not supported right now
} Glyph;

// font->gdata is std::vector<Glyph> where are the glyph info is stored

void add_text_msdf(FTGL *font, VertexBuffer *vb, const char* text, float x, float y)
{
   // Number of glyphs in text
    size_t num_glyph = 0;
   // Position to draw
    int xpos = x;
    int ypos = y;
      
    while (*text) { 
	    if (*text >= 32 && *text < 128) {
            // Calculate kerning if supported
            /*
            float kerning = 0.0f;
            if( num_glyph > 0) {
                kerning = font->gdata[*text-32-1].kerning - font->gdata[*text-32].kerning;
            }
            xpos += kerning;
            */

            // Width and Height of Glyph;
            float width = font->gdata[*text-32].aright - font->gdata[*text-32].aleft;
            float height = font->gdata[*text-32].abottom - font->gdata[*text-32].atop; 
	        
            // Quad Coordinates
            float x0  = xpos + ?; // How to calculate offset_x
            float y0  = ypos + ?; // How to calculate offset_y
            float x1  = x0 + width ;
            float y1  = y0 - height;
            
            // UV Coordinates
            float s0 = font->gdata[*text-32].aleft / 512.0; // atlas width
            float t0 = font->gdata[*text-32].atop / 512.0; // atlas height
            float s1 = width / 512.0; // atlas width
            float t1 = height / 512.0; // atlas height
            
            GLuint ioff = num_glyph * 4;
        
            GLuint indices[] = {0+ioff, 1+ioff, 3+ioff, // first triangle
                                1+ioff, 2+ioff, 3+ioff}; // Second triangle
                            
            GLfloat vertices[] = {
                x0, y0, 0,  s0, t0,  // top left
                x0, y1, 0,  s0, t1, // top right
                x1, y1, 0,  s1, t1, // bottom right
                x1, y0, 0,  s1, t0 }; // bottom left
            
            vb->push_back(vertices, 20, indices, 6);
            xpos += font->gdata[*text-32].advance * 20.0; // Multiply by font size, am I correct?
            num_glyph++;
	    }
    ++text;
	}
}
//

[Chlumsky]

Possibly as

const Glyph &glyph = font->gdata[*text-32];
float x0  = xpos + glyph.pleft * 20; // since you multiply advance by 20
float y0  = ypos + glyph.ptop * 20;
float x1  = xpos + glyph.pright * 20;
float y1  = ypos + glyph.pbottom * 20;

[prashant-saxena]

Hi,
Here is new function to render the glyphs based on the library.

void add_text_msdf2(Font *font, VertexBuffer *vb, const char* text, float xpos, float ypos)
{
    msdfgen::FontMetrics fontMetrics = font->fontGeometry.getMetrics();
    double fsScale = 1.0/(fontMetrics.ascenderY-fontMetrics.descenderY);
    size_t num_glyph = 0;
    for (const char *cp = text; *cp; ++cp) {
        if (*cp == '\r')
            continue;
        const GlyphGeometry *glyph = font->fontGeometry.getGlyph(*cp);
        if (glyph) {
            if (!glyph->isWhitespace()) {
                double pl, pb, pr, pt;
                double il, ib, ir, it;
                glyph->getQuadPlaneBounds(pl, pb, pr, pt);
                glyph->getQuadAtlasBounds(il, ib, ir, it);
            
                float x0  = xpos + pl * font->font_size; // 24.0
                float y0  = ypos + pt * font->font_size;
                float x1  = xpos + pr * font->font_size;
                float y1  = ypos - pb * font->font_size;;

                // UV Coordinates
                float s0 = il / font->atlasWidth;
                float t0 = it / font->atlasHeight;
                float s1 = ir / font->atlasWidth;
                float t1 = ib / font->atlasHeight;

                GLuint ioff = num_glyph * 4;
        
                GLuint indices[] = {0+ioff, 1+ioff, 3+ioff, // first triangle
                                    1+ioff, 2+ioff, 3+ioff}; // Second triangle
                            
                GLfloat vertices[] = {
                    x0, y0, 0,  s0, t0, // top left
                    x0, y1, 0,  s0, t1, // top right
                    x1, y1, 0,  s1, t1, // bottom right
                    x1, y0, 0,  s1, t0}; // bottom left
            
                vb->push_back(vertices, 20, indices, 6);
            }
            double advance = glyph->getAdvance();
            xpos+= advance * font->font_size;
            num_glyph++;
                   
        }
    }
}

First of all text (Lord of The Rings) is flipped secondly it's not at all rendered properly. I'm using Roboto-Light.ttf and generate the glyphs data I'm using the same code "Generating the whole atlas at once" in README file of this project. The only thing that I've changed is this:

packer.setScale(font_size);
 //packer.setMinimumScale(font_size);

I'm using font_size = 24. For the shader part as you have suggested

Here, screenPxRange() represents the distance field range in output screen pixels. For example, if the pixel range was set to 2 when generating a 32x32 distance field, and it is used to draw a quad that is 72x72 pixels on the screen, it should return 4.5 (because 72/32 * 2 = 4.5). For 2D rendering, this can generally be replaced by a precomputed uniform value.

My application doesn't support zoom, glyphs will be rendered of the same size as they are in the atlas, thus I have changed screenPxRange() to 2.0. Am I correct? App is 2D and I'm using an orthogonal matrix. Top-Left is (0,0) There is not much info available about this library although it looks very promising. Sadly there is no detailed documentation available but that is fairly understood. Once everything is cleared, I'll provide a complete example to render text using this library.
Cheers

[prashant-saxena]

Even with 4 pluses, it's still the same, no difference.

[prashant-saxena]

Well I have found the mistake. It's this condition that was causing the problem

if (!glyph->isWhitespace()) {

After remove this the text is rendering correctly keeping the flipped problem aside.

The first two are Roboto-Light.ttf and LuckiestGuy.ttf and they are rendering correctly. Next are Roboto-Regular.ttf and Vera.ttf and they are not. The problem is with texture coordinates. It seems API is broken. If you would like to test, then you can download the fonts from here
Regarding the flipping problem, do I have change something in the default glyph generation code which you have mentioned in the README?

[Chlumsky]

Sure, it's the API that's broken, because there is no way there could be something wrong in your code, right? Try this glPixelStorei(GL_UNPACK_ALIGNMENT, 1);

[prashant-saxena]

Hello Chlumsky,
I didn't mean to offend anybody and I apologize for my words. Your suggestion has resolved the problem and the texts are rendered correctly. The last thing left is the flipping problem which also I have resolved by flipping the y coordinates.

float x0  = xpos + pl * font->font_size;
float y0  = ypos - pt * font->font_size;
float x1  = xpos + pr * font->font_size;
float y1  = ypos - pb * font->font_size;

As I have said earlier the app is using units = screen pixels, origin at the top left and y increases downwards. Here is the setup code for orthographic projection:

glm::vec3 eye = glm::vec3(0.0f, 0.0f, 2.0f);
glm::vec3 target = glm::vec3(0.0f, 0.0f, 0.0f);
glm::vec3 up = glm::vec3(0.0f, 1.0f, 0.0f);

glm::mat4 model = glm::mat4(1.0);
glm::mat4 view = glm::lookAt(eye, target, up);
projection =  glm::ortho(0.0f, 800.0f, 600.0f, 0.0f, 0.1f, 100.0f);
glm::mat4 mvp;// = projection * view * model;

I think the library is writing coordinates considering Y increases upwards. Am I right? If that is the case is there any way to change this while generating the glyph data?
BTW I really like this project and I am grateful to you for providing it to the public domain.
Cheers

[Chlumsky]

The library always uses bottom-to-top Y coordinates (so does OpenGL). Adjusting the generated values to the desired coordinate system after the fact is the correct approach.