c++ - 如何底部对齐字体

Question

在@Rabbid76 和一些网络教程的帮助下，我已经能够在我的场景中渲染字体。

我现在面临的问题是字体显示为顶部对齐而不是底部对齐。

我能做的是当字母不是大写字母时将字符向下移动到 y 位置。

1) 这是否是处理此问题的正确方法，或者我们是否有处理此问题的任何标准方法。

加载字体和渲染纹理的函数

 void MyFont::Load(std::string font, GLuint fontSize)
  {// First clear the previously loaded Characters
    this->Characters.clear();
    // Then initialize and load the FreeType library
    FT_Library ft;
    if (FT_Init_FreeType(&ft)) // All functions return a value different 
    than 0 whenever an error occurred
    std::cout << "ERROR::FREETYPE: Could not init FreeType Library" << 
   std::endl;
// Load font as face
FT_Face face;
if (FT_New_Face(ft, font.c_str(), 0, &face))
    std::cout << "ERROR::FREETYPE: Failed to load font" << std::endl;
// Set size to load glyphs as
FT_Set_Pixel_Sizes(face, 0, fontSize);
// Disable byte-alignment restriction
glPixelStorei(GL_UNPACK_ALIGNMENT, 1);
// Then for the first 128 ASCII characters, pre-load/compile their characters and store them
for (GLubyte c = 0; c < 128; c++) // lol see what I did there 
{
    // Load character glyph 
    if (FT_Load_Char(face, c, FT_LOAD_RENDER))
    {
        std::cout << "ERROR::FREETYTPE: Failed to load Glyph" << std::endl;
        continue;
    }
    // Generate texture
    GLuint texture;
    glGenTextures(1, &texture);
    glBindTexture(GL_TEXTURE_2D, texture);
    glTexImage2D(
        GL_TEXTURE_2D,
        0,
        GL_RED,
        face->glyph->bitmap.width,
        face->glyph->bitmap.rows,
        0,
        GL_RED,
        GL_UNSIGNED_BYTE,
        face->glyph->bitmap.buffer
    );
    // Set texture options
    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);

    // Now store character for later use
    Character character = {
        texture,
        glm::ivec2(face->glyph->bitmap.width, face->glyph->bitmap.rows),
        glm::ivec2(face->glyph->bitmap_left, face->glyph->bitmap_top),
        face->glyph->advance.x
    };
    Characters.insert(std::pair<GLchar, Character>(c, character));
}
glBindTexture(GL_TEXTURE_2D, 0);
// Destroy FreeType once we're finished
FT_Done_Face(face);
FT_Done_FreeType(ft);
}

在矩形上映射纹理的函数。

 void MyFont::RenderText(std::string text, GLfloat x, GLfloat y, GLfloat 
  scale, glm::vec3 color)
  {
this->TextShader.Use();
// Activate corresponding render state
glm::mat4 model = glm::rotate(glm::mat4(1.0f), glm::radians(0.0f), 
 glm::vec3(0.0f, 1.0f, 0.0f));
     model = glm::translate(model, glm::vec3(-4.0, -1.0, 0.0));
glm::mat4 view = camera7.GetViewMatrix();
this->TextShader.SetMatrix4("model", model);
this->TextShader.SetMatrix4("view", view);

this->TextShader.SetVector3f("textColor", color);
this->TextShader.SetMatrix4("projection", 
 glm::perspective(glm::radians(45.0f), (float)800.0 / (float)600.0, 0.1f, 
  100.0f));
glActiveTexture(GL_TEXTURE0);
glBindVertexArray(this->VAO);

// Iterate through all characters
std::string::const_iterator c;
for (c = text.begin(); c != text.end(); c++)
{
    Character ch = Characters[*c];
    GLfloat xpos =( x + ch.Bearing.x * scale) * 0.1;   // Scaling the xpos value
    GLfloat ypos = (y + (this->Characters['H'].Bearing.y - ch.Bearing.y) * scale )* 0.1;  // Scaling the ypos value
    GLfloat w = ch.Size.x * scale;
    GLfloat h = ch.Size.y * scale;
    w /= 10.f;  // Scaling here
    h /= 10.f;  // scaling here

    // Update VBO for each character
    GLfloat vertices[6][5] = {

        { xpos,     ypos + h, 0.0 ,     0.0, 0.0 },
        { xpos + w, ypos,     0.0 ,     1.0, 1.0 },
        { xpos,     ypos,     0.0 ,    0.0, 1.0 },

        { xpos,     ypos + h, 0.0,      0.0, 0.0 },
        { xpos + w, ypos + h, 0.0,      1.0, 0.0 },
        { xpos + w, ypos,     0.0,       1.0, 1.0 }
    };
    // Render glyph texture over quad
    glBindTexture(GL_TEXTURE_2D, ch.TextureID);
    // Update content of VBO memory
    glBindBuffer(GL_ARRAY_BUFFER, this->VBO);
    glBufferSubData(GL_ARRAY_BUFFER, 0, sizeof(vertices), vertices); // Be sure to use glBufferSubData and not glBufferData

    glBindBuffer(GL_ARRAY_BUFFER, 0);
    // Render quad
    glDrawArrays(GL_TRIANGLES, 0, 6);
    // Now advance cursors for next glyph
    x += (ch.Advance >> 6) * scale; // Bitshift by 6 to get value in pixels (1/64th times 2^6 = 64)


}
glBindVertexArray(0);
glBindTexture(GL_TEXTURE_2D, 0);

}

Answer 1

最简单的补偿方法是翻转顶点坐标的 y 分量和纹理坐标的 v 分量。

将 pos + h 更改为 pos - h 并交换 0.0 和 1.0:

GLfloat vertices[6][5] = {
  //  x         y         z         u    v
    { xpos,     ypos - h, 0.0 ,     0.0, 1.0 },
    { xpos + w, ypos,     0.0 ,     1.0, 0.0 },
    { xpos,     ypos,     0.0 ,     0.0, 0.0 },

    { xpos,     ypos - h, 0.0,      0.0, 1.0 },
    { xpos + w, ypos - h, 0.0,      1.0, 1.0 },
    { xpos + w, ypos,     0.0,      1.0, 0.0 }
};

请注意，在这种情况下，文本的底部从上到下发生了变化。