3
\$\begingroup\$

I'm trying to display text with a texture and font description created with BMFont in OpenGL 3.3, but whenever I display the text there is some overlap between certain characters.

Here is the text at normal 1.0x scale:

1.0x scale

As you can see, the 'e' in "Hello" overlaps the next 'l' a bit (with the same happening for the 'r' in "world") and the 'w' in "world" overlaps the 'o' quite a bit. Here is a 3.5x scale image to make the overlap a bit more apparent:

3.5x scale

I was wondering if someone would be able to explain to me why this is occurring and, if possible, explain how to fix it.

My method for generating the vertex mesh is as follows: (C++)

// position control variables
const float tscalex = 1.0f / _font.GetTexture().GetSize().x;
const float tscaley = 1.0f / _font.GetTexture().GetSize().y;
const float hspace  = _font.FindGlyph( ' ' ).XAdvance;
const float vspace  = _font.GetInfo().LineHeight;
float x = 0.0f;
float y = 0.0f;

// generate a quad for each character
char pchar = 0;
for ( uint i = 0; i < _text.length(); ++i )
{
    // apply kerning
    char cchar = _text[ i ];
    x += _font.FindKerning( pchar, cchar );
    pchar = cchar;

    // handle special characters
    switch ( cchar )
    {
        case ' ':
            x += hspace;
            continue;
        case '\t':
            x += hspace * 4;
            continue;
        case '\n':
            y += vspace;
            x = 0.0f;
            continue;
    }

    // get the character's glyph
    const Font::Glyph& glyph = _font.FindGlyph( cchar );

    int width  = glyph.Width;
    int height = glyph.Height;
    int left   = glyph.X;
    int top    = glyph.Y;
    int right  = glyph.X + width;
    int bottom = glyph.Y + height;
    float yy   = y + glyph.YOffset;

    float u1 = float( left   ) * tscalex;
    float u2 = float( right  ) * tscalex;
    float v1 = float( top    ) * tscaley;
    float v2 = float( bottom ) * tscaley;

    // create the quad
    uint16 count = uint16( _mesh.Vertices.Size() );
    _mesh.Vertices.Add( Vertex( Vec3( x,         yy,          0 ) * _scale, Vec3(), Vec2( u1, v1 ) ) );
    _mesh.Vertices.Add( Vertex( Vec3( x,         yy + height, 0 ) * _scale, Vec3(), Vec2( u1, v2 ) ) );
    _mesh.Vertices.Add( Vertex( Vec3( x + width, yy + height, 0 ) * _scale, Vec3(), Vec2( u2, v2 ) ) );
    _mesh.Vertices.Add( Vertex( Vec3( x + width, yy,          0 ) * _scale, Vec3(), Vec2( u2, v1 ) ) );
    _mesh.Indices.Add( count + 0 );
    _mesh.Indices.Add( count + 1 );
    _mesh.Indices.Add( count + 2 );
    _mesh.Indices.Add( count + 2 );
    _mesh.Indices.Add( count + 3 );
    _mesh.Indices.Add( count + 0 );

    // advance
    x += glyph.XAdvance;
}
\$\endgroup\$
  • 3
    \$\begingroup\$ You either haven't enabled alpha blending, haven't loaded the alpha channel, or have set the depth comparison function to GL_LESS rather than the standard GL_LESS_EQUAL. \$\endgroup\$ – user41442 Sep 16 '14 at 21:24
  • 1
    \$\begingroup\$ @Jason: Setting the depth function to GL_LEQUAL is what fixed it, thank you! \$\endgroup\$ – fastinvsqrt Sep 16 '14 at 22:27
  • \$\begingroup\$ Why are you rendering 2d text with depth test enabled? \$\endgroup\$ – glampert Sep 17 '14 at 1:16
  • \$\begingroup\$ To be honest, turning it off didn't even occur to me. \$\endgroup\$ – fastinvsqrt Sep 17 '14 at 1:19
  • 1
    \$\begingroup\$ Depth test is not necessary because the Z is always zero. \$\endgroup\$ – glampert Sep 17 '14 at 1:26
3
\$\begingroup\$

Here is the why comment:

Per Jason:
You either haven't enabled alpha blending, haven't loaded the alpha channel, or have set the depth comparison function to GL_LESS rather than the standard GL_LESS_EQUAL.

Here is the "how to fix it" comment:

Per fastinvsqrt:
Setting the depth function to GL_LEQUAL is what fixed it

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.