I'm trying to implement font rendering and have got into some trouble with glyph metrics. Here's the code where I get the metrics:
Glyph gl;
gl.width = face->glyph->metrics.width / 64;
gl.height = face->glyph->metrics.height / 64;
gl.character = i;
gl.advance = face->glyph->metrics.horiAdvance / 64;
gl.bearingX = face->glyph->metrics.horiBearingX / 64;
gl.bearingY = face->glyph->metrics.horiBearingY / 64;
gl.textureX = this->_textureWidth;
The value of gl.advance
is way too small. Here is a picture of it:
If I'm dividing face->glyph->metrics.horiAdvance
by 40, it looks like this:
The text is now readable, but the advance and X-, Y-bearing still don't look correct. This is what it should look like:
Here is my code where I draw the glyphs:
float aspect = this->_graphics->getMetrics().x / this->_graphics->getMetrics().y;
float offset = 0;
for(unsigned char c : str){
Glyph g = this->_fonts[fontID]->getGlyph(c);
vec2 pos = (position.getRelative() + vec2(offset, 0) + (vec2(g.bearingX, -g.bearingY) / SCALING) * scale - vec2(1, 1))
* vec2(1, -1);
glyphShader->setUniform("position", pos);
glyphShader->setUniform("scale", (vec2(g.width, g.height * aspect) / SCALING) * scale);
glyphShader->setUniform("glyphSize", vec2(g.width, g.height));
glyphShader->setUniform("textureMetrics", this->_fonts[fontID]->getTextureMetrics());
glyphShader->setUniform("textureOffset", vec2(g.textureX, 0));
glyphShader->setUniform("image", 0);
glyphShader->setUniform("color", color);
this->_graphics->getMeshByID(guiInstance->_quadID)->drawMesh();
offset += (g.advance / SCALING) * scale;
}
I'm doing some transformations on position
to move the origin to the top-left corner and flipping the coordinate system on the X-Axis. Then I divide every pixel value by a constant factor, to have the font having the same size on every resolution. The ratio of the glyphs is correct, but not the alignment.
And here is my vertex shader:
#version 400
layout(location=0) in vec4 vertPosition;
layout(location=1) in vec2 vertUV;
uniform vec2 position;
uniform vec2 scale;
uniform vec2 glyphSize;
uniform vec2 textureMetrics;
uniform vec2 textureOffset;
out vec2 fragUV;
void main(void){
gl_Position = vertPosition *
vec4(scale, 1, 1) +
vec4(position, 0, 0);
fragUV = vec2(vertUV.x * (glyphSize.x / textureMetrics.x) + (textureOffset.x / textureMetrics.x),
-vertUV.y * (glyphSize.y / textureMetrics.y));
}
Why are the characters misaligned?