为什么在 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 并将每个 sy 替换为 sx。我还在图集中的每个纹理之间添加了 2 个像素，这样我就不会在纹理之间出现任何拖尾现象。 Here is the final result.

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

Why do taller letters appear deformed when rendering text with FreeType in OpenGL?

c++

freetype

opengl-4

glm-math