为什么在OpenGL中使用FreeType渲染文本时出现较高的字母变形?

Question

我已经设法在opengl4中使用FreeType绘制文本，但是较高的字母(例如g, d, f等)不知何故被画得太高了。这就是它的样子。这就是它应该有的样子。高的字母太高了，而"正常高度"字母就可以了。

struct FontChar {
float tx; // texcoord x position
float tw; // texcoord x width
glm::ivec2 size; // face->glyph->bitmap.width, face->glyph->bitmap.rows
glm::ivec2 bearing; // face->glyph->bitmap_left, face->glyph->bitmap_top
glm::ivec2 advance; // face->glyph->advance.x, face->glyph->advance.y
} fontChars[128]; // this is populated properly with FreeType
std::vector<float> vertices;
const float sx = 2.0f / 1920.0f;
const float sy = 2.0f / 1080.0f;
float x = 0.0f;
float y = 0.0f;
for (char c : text) {
const float vx = x + fontChars[c].bearing.x * sx;
const float vy = y + fontChars[c].bearing.y * sy;
const float w = fontChars[c].size.x * sx;
const float h = fontChars[c].size.y * sy;
float tx = fontChars[c].tx;
float tw = fontChars[c].tw;
std::vector<float> quad = { // pos_x, pos_y, tex_x, tex_y
vx, vy, tx, 0.0f,
vx + w, vy, tx + tw, 0.0f,
vx + w, vy - h, tx + tw, 1.0f,
vx + w, vy - h, tx + tw, 1.0f,
vx, vy - h, tx, 1.0f,
vx, vy, tx, 0.0f
};
vertices.insert(vertices.begin(), quad.begin(), quad.end());
x += float(fontChars[c].advance.x >> 6) * sx;
y += float(fontChars[c].advance.y >> 6) * sy;
}

然后将顶点缓冲到顶点缓冲区中，然后绘制它。唯一可以影响高度的代码是const float h = fontChars[c].size.y * sy，但大小直接取自FreeType,sy适用于"正常高度"。信件。这让我相信这可能是由于字形纹理被放入纹理图集。

FT_Set_Pixel_Sizes(face, 0, size);
glPixelStorei(GL_UNPACK_ALIGNMENT, 1);
std::array<FontChar, 128> characters{};
unsigned int w = 0;
unsigned int h = 0;
for (unsigned char c = 0; c < 128; c++) {
if (FT_Load_Char(face, c, FT_LOAD_BITMAP_METRICS_ONLY)) {
throw std::runtime_error("Failed to load glyph");
}
w += face->glyph->bitmap.width;
h = std::max(face->glyph->bitmap.rows, h); // maybe this is the issue???
}
GLuint texture;
glGenTextures(1, &texture);
glBindTexture(GL_TEXTURE_2D, texture);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RED, w, h, 0, GL_RED, GL_UNSIGNED_BYTE, nullptr);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
unsigned int x = 0;
for (unsigned char c = 0; c < 128; c++) {
if (FT_Load_Char(face, c, FT_LOAD_RENDER)) {
throw std::runtime_error("Failed to load glyph");
}
glTexSubImage2D(GL_TEXTURE_2D, 0, x, 0, face->glyph->bitmap.width, face->glyph->bitmap.rows, GL_RED, GL_UNSIGNED_BYTE, face->glyph->bitmap.buffer);
FontChar character = {
(float)x / (float)w,
(float)face->glyph->bitmap.width / (float)w,
glm::ivec2(face->glyph->bitmap.width, face->glyph->bitmap.rows),
glm::ivec2(face->glyph->bitmap_left, face->glyph->bitmap_top),
glm::ivec2(face->glyph->advance.x, face->glyph->advance.y)
};
characters[c] = character;
x += face->glyph->bitmap.width;
}

我做任何可能影响这种垂直拉伸行为的唯一其他地方是当我找到字符的最大高度时。我这样做是为了找到纹理图集的合适尺寸，它只有1个字符高，n个字符宽。但我仍然不确定这是如何导致这种行为的。

Answer 1

我发现了这个问题。我的直觉是正确的;这个问题与纹理图集的高度有关。我没有将字形位图的高度插入到实际的顶点中，而是使用了纹理的整个高度。我所要做的就是在填充fontChars数组时将字符的高度传递给FontChar结构体，然后让顶点从0.0f到高度，而不是从0.0f到1.0f。这是有效的，只是现在我所有的文字都太高了。然后我意识到我正在使用一个正交矩阵，它将x坐标从[- 1,1]扩展到[-width/height, width/height]，并且由于我使用了单独的比例因子(sx和sy)，所以我的缩放是不正确的。为了解决这个问题，我把sy消掉，把每个sy都换成了x。我还在图集中的每个纹理之间添加了2个像素，这样我就不会在纹理之间产生任何涂抹。以下是最终结果。