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

Question

我已经设法在 OpenGL 4 中使用 FreeType 绘制文本，但是更高的字母（例如 g、d、f 等）不知何故被绘制得太高了。 This is what it looks like. This is what it is supposed to look like. 高的字母太高了，而“正常高度”的字母就好了。

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 个字符高 x n 个字符宽。不过，我仍然不确定这会如何导致这种行为。

Answer 1

我找到了问题。我的直觉是正确的。该问题与纹理图集的高度有关。我没有将字形位图的高度插入实际顶点，而是使用纹理的整个高度。我所要做的就是在填充 fontChars 数组时将字符的高度传递给 FontChar 结构，然后让我的顶点从 0.0f 变为高度，而不是从 0.0f 变为 1.0f。除了现在我所有的文字都太高之外，这很有效。然后我意识到我正在使用一个正交矩阵，它将 x 坐标从 [-1, 1] 扩展到 [-width/height, width/height]，并且由于我使用了单独的比例因子（sx 和 sy），我的缩放不正确。为了解决这个问题，我刚刚摆脱了 sy 并用 sx 替换了每个 sy。我还在图集中的每个纹理之间添加了 2 个像素，因此我不会在纹理之间出现任何拖尾。 Here is the final result.