如何在透视图中绘制文本

时间:2019-07-06 12:38:15

标签: c++ opengl glsl glm-math freetype

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

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

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

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

我目前是否需要根据屏幕位置来更改RenderText功能?

如果有人可以向我展示任何可以帮助我解决这些问题或帮助我解决我所粘贴的现有代码的东西,我将非常感激。

这是我的头文件

#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)

1 个答案:

答案 0 :(得分:1)

  

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

文本消失了,因为它被视锥视图的近平面剪断了。您必须在“近”平面“后”绘制(文本)几何。由于z轴指向视口之外,因此您必须沿负z方向(在-z> =附近)平移文本。

  

现在的问题是字体出现了,但是倒过来了。

之所以引起该问题,是因为在规范化的设备空间中(在“视图”中)左下角的坐标是(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 }
};