Tag: library

Currently I am implementing text rendering into my game engine using the FreeType library by following the tutorial found here: https://learnopengl.com/In-Practice/2D-Game/Render-text. My current implementation is not working correctly, you can see the result of my implementation in the following Images (note that I am rendering the text “Test test”, and you can see 8 distinct cubic shapes one for each letter with a space in between the words, with the last 4 cubic shapes being smaller and shaped differently compared to the capitalized version of the word, so it looks like it is at least close to rendering the string “Test test”):

Firstly, there are some obvious issues, to start with you can see the “text” is drawn in a projection perspective rather than orthographic, this is on purpose however because my system already draws with projection perspective and if the text was stuck flat to my screen in a 2D manner I fail to see how the perspective it is drawn in would change anything.

That leads to the next problem, the “text” is not stuck to my screen in a 2D manner (like HUD elements in a game), it appears to be floating in 3D space, although if I look at the “Text” from exactly side on it will vanish, so it does not appear to have any depth (z axis), only a position on the x and y axis. Also if I go past the side on point and look from behind the “text” vanishes.

And finally the most obvious issue, the glyphs clearly are not rendered correctly, as you cant see the actual shape of the letters, instead just the cubic space containing the letter.

My implementation is as follows: (disclaimer: My engine is to big to explain every little thing that is going on so this question is showing minimal code and only relevant code to this issue, described in quite a high level manner)

In my engine the scene is created using a scene graph of GameObject‘s each with GameComponent‘s, therefore I create a TextRendererObject and add to it a TextRenderer component and add it to the scene in the following code:

Entity *textRendererObject = new Entity(...); TextRenderer  *Text; Text = new TextRenderer(50, 50); Text->Load("font/arial.ttf", 240); textRendererObject->AddComponent(Text); AddToScene(textRendererObject); 

The TextRenderer constructor, a struct that the .h file defines (used in load function) and the load function are as follows respectively:

TextRenderer::TextRenderer(GLuint width, GLuint height) :     TextShader("text")//creates text shader (text.glsl) {    GLuint VAO, VBO;      SetIsTextRenderer(true);      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); } 

/// Holds all state information relevant to a character as loaded using FreeType struct Character {     GLuint TextureID;   // ID handle of the glyph texture     glm::ivec2 Size;    // Size of glyph     glm::ivec2 Bearing; // Offset from baseline to left/top of glyph     GLuint Advance;     // Horizontal offset to advance to next glyph }; //... std::map<GLchar, Character> Characters; 

void TextRenderer::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         printf("ERROR::FREETYPE: Could not init FreeType Library");//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))         printf("ERROR::FREETYPE: Failed to load font");//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++)       {         // Load character glyph          if (FT_Load_Char(face, c, FT_LOAD_RENDER))         {             printf("ERROR::FREETYTPE: Failed to load Glyph");//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); } 

The shader (text.glsl) that is created when the Textrenderer object is created is as follows:

#include "common.glh"  varying vec2 texCoord0; varying vec3 worldPos0;  #if defined(VS_BUILD) attribute vec3 position; attribute vec2 texCoord;  uniform mat4 T_model; uniform mat4 T_MVP;  void main() {     gl_Position = T_MVP * vec4(position.xy, 0.0, 1.0);     texCoord0 = texCoord;     worldPos0 = (T_model * vec4(position.xy, 0.0, 1.0)).xyz; }   #elif defined(FS_BUILD)  uniform sampler2D H_text; uniform vec3 H_textColor;  DeclareFragOutput(0, vec4); void main() {         vec4 sampled = vec4(1.0, 1.0, 1.0, texture2D(H_text, texCoord0).r);     vec4 color = vec4(H_textColor, 1.0) * sampled;     SetFragOutput(0, sampled * color); }   #endif 

Following this set-up of the textRenderObject game object, its Text game component and the text.glsl shader, every frame the following render function is called:

void TextRenderer::RenderTextRenderer(...) {     this->TextShader.Bind();//"text.glsl" created earlier     this->TextShader.UpdateUniformsTextRenderer(...);     RenderText("TEST test", 100, 100, 1);//responsible for drawing  } 

UpdateUniformsTextRenderer(...) is responsible for setting the values of the uniforms in text.glsl and is as follows:

void Shader::UpdateUniformsTextRenderer(Transform* transform, const RenderingEngine& renderingEngine, const Camera& camera) {     Matrix4f worldMatrix = transform->GetTransformation();     Matrix4f projectedMatrix = camera.GetViewProjection() * worldMatrix;     for (unsigned int i = 0; i < m_shaderData->GetUniformNames().size(); i++)     {         std::string uniformName = m_shaderData->GetUniformNames()[i];         std::string uniformType = m_shaderData->GetUniformTypes()[i];           if (uniformName.substr(0, 2) == "T_")         {             if (uniformName == "T_MVP")                 SetUniformMatrix4f(uniformName, projectedMatrix);             else if (uniformName == "T_model")                 SetUniformMatrix4f(uniformName, worldMatrix);             else                 throw "Invalid Transform Uniform: " + uniformName;         }         else if (uniformName.substr(0, 2) == "H_") {             if (uniformName == "H_text") {//Texture used to draw text                 int samplerSlot = renderingEngine.GetSamplerSlot(uniformName);                 SetUniformi(uniformName, samplerSlot);             }             else if (uniformName == "H_textColor")                 SetUniformVector3f(uniformName, Vector3f(1, 0, 0));//red         }     } } 

And finally the function RenderText that actually draws the text is as follows:

void TextRenderer::RenderText(std::string text, GLfloat x, GLfloat y, GLfloat scale) {     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][4] = {             { xpos,     ypos + h,   0.0, 1.0 },             { xpos + w, ypos,       1.0, 0.0 },             { xpos,     ypos,       0.0, 0.0 },              { xpos,     ypos + h,   0.0, 1.0 },             { xpos + w, ypos + h,   1.0, 1.0 },             { xpos + w, ypos,       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); } 

And that’s my implementation, can anyone see where I have gone wrong? Any feedback is much appreciated.