c++ - 如何在透视 View 中绘制文本

Question

我是字体新手，根据一些网络教程，我编写了在正交 View 中工作的代码。

当我将投影矩阵从正交 View 更改为透视 View 时，字体消失了。

我希望字体表现得像其他对象一样，我通过 model 矩阵以及 View 和 Projection 矩阵来确定屏幕上的最终位置。

我如何移植此代码以使其在透视 View 中工作。

我是否需要更改 RenderText 函数，因为它当前基于屏幕位置。

如果有人能给我看任何可以帮助我解决这个问题或帮助我解决我粘贴的现有代码的阅读 Material ，我将非常感激。

这是我的头文件

#include <map>
#include <GL/glew.h>
#include <glm/glm.hpp>
#include "texture.h"
#include "shader.h"
#include <ft2build.h>
#include FT_FREETYPE_H

// Holds all state information relevant to a character as loaded uing FreeType

struct Character {
    GLuint TextureID;
    glm::ivec2 Size;
    glm::ivec2 Bearing; // offset from baseline to left/top of plyph
    GLuint Advance;
};

class MyFont
{
public:
    // Holds a list of pre-compiled Characters
    std::map<GLchar, Character> Characters;
    // Shader used for TextRendering
    Shader TextShader;
    // Constructor
    MyFont(GLuint width, GLuint height);
    // Pre-compile a list of characters from the given font
    void Load(std::string font, GLuint fontSize);
    // Renders a string of text using precompiled list of characters
    void RenderText(std::string text, GLfloat x, GLfloat y, GLfloat scale, glm::vec3 color = glm::vec3(1.0f));

private:
    GLuint VAO, VBO;
};

这是顶点着色器

#version 330 core
layout (location = 0) in vec4 vertex; // <vec2 pos, vec2 tex>
out vec2 TexCoords;

uniform mat4 projection;

void main()
{
    gl_Position =  projection * vec4(vertex.xy, 0.0, 1.0);
    TexCoords = vertex.zw;
}

这些是函数定义。

MyFont::MyFont(GLuint width, GLuint height)
{
    this->TextShader = ResourceManager::GetShader("TextShader");
    this->TextShader.SetMatrix4("projection", glm::ortho(0.0f, 
    static_cast<GLfloat>(width), static_cast<GLfloat>(height), 0.0f),     GL_TRUE);
    this->TextShader.SetInteger("text", 0);

    // configue VAO/VBO for texture quads
    glGenVertexArrays(1, &this->VAO);
    glGenBuffers(1, &this->VBO);
    glBindVertexArray(this->VAO);
    glBindBuffer(GL_ARRAY_BUFFER, this->VBO);
    glBufferData(GL_ARRAY_BUFFER, sizeof(GLfloat) * 6 * 4, NULL, 
    GL_DYNAMIC_DRAW);
    glEnableVertexAttribArray(0);
    glVertexAttribPointer(0, 4, GL_FLOAT, GL_FALSE, 4 * sizeof(GLfloat), 0);
    glBindBuffer(GL_ARRAY_BUFFER, 0);
    glBindVertexArray(0);
}

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);
}

RenderText 函数的定义

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::translate(glm::mat4(1.0f), glm::vec3(0.0, 0.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;
        GLfloat ypos = y + (this->Characters['H'].Bearing.y - ch.Bearing.y) * scale;

        GLfloat w = ch.Size.x * scale;
        GLfloat h = ch.Size.y * scale;
        // Update VBO for each character
        GLfloat vertices[6][5] = {
            { 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 }
        };
        // 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);
}

这些是预测。

glm::ortho(0.0f, static_cast<GLfloat>(width), static_cast<GLfloat>(height), 0.0f)

glm::perspective(glm::radians(45.0f), (float)width / (float)height, 0.1f, 100.0f)

Answer 1

When i change my projection matrix from orthographic to perspective view the font disappears.

文本消失了，因为它被视锥体的近平面剪裁了。您必须在近平面“后面”绘制(文本)几何图形。由于 z 轴指向视口(viewport)外，因此您必须在负 z 方向平移文本，其中 -z >= near。

The problem now is the font appears but upside down.

问题是因为在规范化设备空间(在“ View ”中)左下角坐标是 (0, 0)，但在纹理图像中左上角是 (0, 0)。

翻转纹理坐标的 v 分量以补偿:

GLfloat vertices[6][5] = {
  //  x         y         z        u    v
    { 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 }
};