Tutorial 06 - Dibujar Texto 2D

Mostrar texto 2D usando la librería STB para cargar una fuente TrueType.

Author: devcarmelo

CMakeLists.txt

@@ -12,6 +12,7 @@ find_package(GLM    REQUIRED)
 include_directories(${GLFW3_INCLUDE_DIRS})
 include_directories(${GLEW_INCLUDE_DIRS})
 include_directories(${GLM_INCLUDE_DIRS})
+
 include_directories(Common)
 
 set(GRAPHIC_LIBS ${OPENGL_gl_LIBRARY} ${GLEW_LIBRARIES} ${GLFW3_LIBRARY})
@@ -22,3 +23,4 @@ add_subdirectory(Tutorial-02)
 add_subdirectory(Tutorial-03)
 add_subdirectory(Tutorial-04)
 add_subdirectory(Tutorial-05)
+add_subdirectory(Tutorial-06)

Common/OpenGLText.hpp

@@ -0,0 +1,152 @@
+#ifndef OPENGLTEXT_H
+#define OPENGLTEXT_H
+
+#include <cstdio>
+#include <string>
+#include <vector>
+
+#include <GL\GL.h>
+#include <GL\glew.h>
+#include <glm\glm.hpp>
+#include <glm\gtc\matrix_transform.hpp>
+
+#include "OpenGLShader.hpp"
+
+#define STB_TRUETYPE_IMPLEMENTATION
+#define STB_RECT_PACK_IMPLEMENTATION
+#define STB_IMAGE_WRITE_IMPLEMENTATION
+
+#include "stb\stb_rect_pack.h"
+#include "stb\stb_truetype.h"
+#include "stb\stb_image_write.h"
+
+#define BITMAP_W 1024
+#define BITMAP_H 1024
+
+class OpenGLText {
+
+private:
+    GLuint font_tex, vao, buffer, ortho_loc, text_loc, color_loc;
+    stbtt_packedchar chardata[256];
+    OpenGLShader shader;
+    float width, height;
+    float r, g, b;
+
+    void init() {
+
+        GLuint program = shader.compile("shaders/text.vertex_shader", "shaders/text.fragment_shader");
+
+        ortho_loc = glGetUniformLocation(program, "projection");
+        text_loc = glGetUniformLocation(program, "font");
+        color_loc = glGetUniformLocation(program, "font_color");
+
+        glGenVertexArrays(1, &vao);
+        glBindVertexArray(vao);
+
+        glGenBuffers(1, &buffer);
+        glBindBuffer(GL_ARRAY_BUFFER, buffer);
+        glBufferData(GL_ARRAY_BUFFER, 6 * 4 * sizeof(GLfloat), NULL, GL_DYNAMIC_DRAW);
+
+        glBindVertexArray(0);
+    }
+
+public:
+    void loadFont(const std::string& font, float font_size)
+    {
+        FILE *file;
+        if(fopen_s(&file, font.c_str(), "rb")){
+            std::cout << "No encuentra el archivo: " << font << std::endl;
+            return;
+        }
+
+        fseek(file, 0, SEEK_END);
+        long size = ftell(file);
+        fseek(file, 0, SEEK_SET);
+
+        unsigned char* ttf_buffer = new unsigned char[size];
+        unsigned char* temp_bitmap = new unsigned char[BITMAP_W * BITMAP_H];
+
+        fread(ttf_buffer, 1, size, file);
+
+        stbtt_pack_context pc; 
+
+        stbtt_PackBegin(&pc, temp_bitmap, BITMAP_W, BITMAP_H, 0, 1, NULL);
+        stbtt_PackSetOversampling(&pc, 2, 2);
+        stbtt_PackFontRange(&pc, ttf_buffer, 0, font_size, 0, 256, chardata);
+        stbtt_PackEnd(&pc);
+
+        //stbi_write_png("font.png", BITMAP_W, BITMAP_H, 1, temp_bitmap, 0);
+
+        glGenTextures(1, &font_tex);
+        glBindTexture(GL_TEXTURE_2D, font_tex);
+        glTexImage2D(GL_TEXTURE_2D, 0, GL_ALPHA, BITMAP_W, BITMAP_H, 0, GL_ALPHA, GL_UNSIGNED_BYTE, temp_bitmap);
+        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
+        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
+
+        delete[] ttf_buffer;
+        delete[] temp_bitmap;
+
+        fclose(file);
+        file = NULL;
+
+        init();
+    }
+
+    void draw(float x, float y, const std::wstring& text) {
+        shader.use();
+        glBindVertexArray(vao);
+
+        glUniform3f(color_loc, r, g, b);
+
+        glm::mat4 ortho_proj = glm::ortho(0.0f, width, height, 0.0f);
+        glUniformMatrix4fv(ortho_loc, 1, GL_FALSE, &ortho_proj[0][0]);
+
+        glActiveTexture(GL_TEXTURE0);
+        glBindTexture(GL_TEXTURE_2D, font_tex);
+        glUniform1i(text_loc, 0);
+
+        glEnable(GL_BLEND);
+        glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
+
+        std::wstring::const_iterator c;
+        for (c = text.begin(); c != text.end(); c++)        {
+            stbtt_aligned_quad q;
+            stbtt_GetPackedQuad(chardata, BITMAP_W, BITMAP_H, *c, &x, &y, &q, 1);
+
+            const GLfloat vertex[] = {
+                q.s0, q.t0, q.x0, q.y0,
+                q.s1, q.t0, q.x1, q.y0,
+                q.s1, q.t1, q.x1, q.y1,
+
+                q.s0, q.t0, q.x0, q.y0,
+                q.s1, q.t1, q.x1, q.y1,
+                q.s0, q.t1, q.x0, q.y1
+            };
+
+            glBindBuffer(GL_ARRAY_BUFFER, buffer);
+            glBufferSubData(GL_ARRAY_BUFFER, 0, sizeof(vertex), vertex);
+            glVertexAttribPointer(0, 4, GL_FLOAT, GL_FALSE, 0, NULL);
+            glBindBuffer(GL_ARRAY_BUFFER, 0);
+            glEnableVertexAttribArray(0);
+
+            glDrawArrays(GL_TRIANGLES, 0, 6);
+        }
+
+        glDisable(GL_BLEND);
+        glBindVertexArray(0);
+        shader.unUse();
+    }
+
+    void setSize(int width, int height) {
+        this->width = static_cast<float>(width);
+        this->height = static_cast<float>(height);
+    }
+
+    void setColor(float r, float g, float b) {
+        this->r = r;
+        this->g = g;
+        this->b = b;
+    }
+};
+
+#endif

Readme.md

@@ -0,0 +1,2 @@
+# Tutoriales OpenGL Moderno
+Computación gráfica utilizando OpenGL 3.3 o superior.

Tutorial-06/CMakeLists.txt

@@ -0,0 +1,16 @@
+file(COPY simple.vertex_shader simple.fragment_shader DESTINATION shaders)
+file(COPY text.vertex_shader text.fragment_shader DESTINATION shaders)
+file(COPY roboto.ttf DESTINATION font)
+
+include_directories(../includes)
+
+add_executable( Tutorial-06 texto-opengl.cpp 
+							shaders/simple.vertex_shader
+							shaders/simple.fragment_shader
+			                shaders/text.vertex_shader
+							shaders/text.fragment_shader
+							../common/openglwindow.hpp 
+							../common/openglshader.hpp
+							../common/opengltext.hpp )
+							
+target_link_libraries( Tutorial-06 ${GRAPHIC_LIBS} )

Tutorial-06/Roboto.ttf

@@ -0,0 +1,172 @@
+#include "OpenGLWindow.hpp"
+#include "OpenGLShader.hpp"
+#include "OpenGLText.hpp"
+#include <glm/gtc/matrix_transform.hpp>
+#include <sstream>
+
+class Tutorial_03 : public OpenGLWindow {
+
+public:
+    Tutorial_03() : vao{}, buffer{}, index_buffer{}, MatrixID{} { }
+
+private:
+    void onstart() override {
+
+        glEnable(GL_DEPTH_TEST);
+
+        // crear, compilar y enlasar el Vertex y Fragment Shader
+        GLuint program = shader_simple.compile("shaders/simple.vertex_shader", "shaders/simple.fragment_shader");
+
+        // Obtener el ID del uniform llamado "MVP"
+        MatrixID = glGetUniformLocation(program, "MVP");
+
+        // crear y enlazar un vao
+        glGenVertexArrays(1, &vao);
+        glBindVertexArray(vao);
+
+        // vetices para generar un cubo 3D
+        static const float vertex[] =
+        {
+             1.0f, -1.0f, -1.0f, 1.0f,
+             1.0f, -1.0f,  1.0f, 1.0f,
+            -1.0f, -1.0f,  1.0f, 1.0f,
+            -1.0f, -1.0f, -1.0f, 1.0f,
+             1.0f,  1.0f, -1.0f, 1.0f,
+             1.0f,  1.0f,  1.0f, 1.0f,
+            -1.0f,  1.0f,  1.0f, 1.0f,
+            -1.0f,  1.0f, -1.0f, 1.0f
+        };
+
+        // componetes RGBA para los colores de cada vertice
+        static const float color[] =
+        {
+            1.0f, 0.0f, 0.0f, 1.0f,
+            0.0f, 1.0f, 0.0f, 1.0f,
+            0.0f, 0.0f, 1.0f, 1.0f,
+            1.0f, 0.0f, 0.0f, 1.0f,
+            0.0f, 1.0f, 0.0f, 1.0f,
+            1.0f, 0.0f, 0.0f, 1.0f,
+            0.0f, 1.0f, 0.0f, 1.0f,
+            0.0f, 0.0f, 1.0f, 1.0f
+        };
+
+        // indices usados para unir los vertices que componen el cubo
+        static const GLushort indices[] =
+        {
+            0, 1, 2,
+            7, 6, 5,
+            4, 5, 1,
+            5, 6, 2,
+            6, 7, 3,
+            0, 3, 7,
+            3, 0, 2,
+            4, 7, 5,
+            0, 4, 1,
+            1, 5, 2,
+            2, 6, 3,
+            4, 0, 7
+        };
+
+        // generar, almacenar el buffer de indices 
+        glGenBuffers(1, &index_buffer);
+        glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, index_buffer);
+        glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);
+
+        // generar dos ids para los buffer
+        glGenBuffers(2, buffer);
+
+        // enlazar el buffer de vertices
+        glBindBuffer(GL_ARRAY_BUFFER, buffer[0]);
+        // almacenar datos en el buffer de vertices
+        glBufferData(GL_ARRAY_BUFFER, sizeof(vertex), vertex, GL_STATIC_DRAW);
+
+        // describir los datos y activar vPosition (location = 0)
+        glVertexAttribPointer(0, 4, GL_FLOAT, GL_FALSE, 0, NULL);
+        glEnableVertexAttribArray(0);
+
+        // enlazar el buffer de color
+        glBindBuffer(GL_ARRAY_BUFFER, buffer[1]);
+        // almacenar datos en el buffer de color
+        glBufferData(GL_ARRAY_BUFFER, sizeof(color), color, GL_STATIC_DRAW);
+
+        // describir los datos y activar vColor (location = 1)
+        glVertexAttribPointer(1, 4, GL_FLOAT, GL_FALSE, 0, NULL);
+        glEnableVertexAttribArray(1);
+
+        // Inicializar Fuente TrueType
+        text.loadFont("font/roboto.ttf", 48);
+        text.setSize(1280, 768);    
+    }
+
+    void onrender(double time) override {
+        glClearColor(0.25f, 0.55f, 0.55f, 1.0f);
+        glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
+
+        // Usar el shader
+        shader_simple.use();
+        glBindVertexArray(vao);
+
+        // Matriz de modelo, se aplica una rotacion sobre el eje Y 
+        glm::mat4 Model;
+        Model = glm::rotate(Model, (float)time, glm::vec3(0.0f, 1.0f, 0.0f));
+
+        // Matriz de proyeccion y visualizacion
+        glm::mat4 Projection = glm::perspective(45.0f, aspect_ratio, 0.1f, 100.0f);
+        glm::mat4 View = glm::lookAt(glm::vec3(4, 3, -3), glm::vec3(0, 0, 0), glm::vec3(0, 1, 0));
+
+        // Crear la matriz total MVP
+        glm::mat4 MVP = Projection * View * Model;
+
+        // Enviar las tranformaciones al shader
+        // MatrixID es el ID del uniform MVP obtenida por glGetUniformLocation(program, "MVP");
+        glUniformMatrix4fv(MatrixID, 1, GL_FALSE, &MVP[0][0]);
+
+        // Dibujar cubo usando los indices almacenados en el buffer,
+        // 1 triangulo = 3 indices, 1 cara = 2 triangulos, 1 cubo = 6 caras.
+        // 3 * 2 * 6 = 36 indices a dibujar 
+        glDrawElements(GL_TRIANGLES, 36, GL_UNSIGNED_SHORT, 0);
+
+        glBindVertexArray(0);
+        shader_simple.unUse();
+
+        // Dibujar Texto 2D
+        draw_text(time);
+    }
+
+    void draw_text(double time) {
+        std::wostringstream str;
+        str.precision(2);
+        str.setf(std::ios::fixed);
+        str << "Time: " << time << " ms.";
+
+        // Establecer color y dibujar texto en la ubicacion indicada.
+        text.setColor(0.15f, 0.3f, 0.7f);
+        text.draw(10, 60, L"Tutor de Programación - Render Text 2D");
+
+        // Establecer color y dibujar texto en la ubicacion indicada.
+        text.setColor(0.3f, 0.3f, 0.3f);
+        text.draw(10, 120, str.str());
+    }
+
+    // Liberar memoria usada por los buffers
+    void onstop() override {
+        glDeleteBuffers(2, buffer);
+        glDeleteBuffers(1, &index_buffer);
+        glDeleteVertexArrays(1, &vao);
+    }
+
+    OpenGLText text;
+    OpenGLShader shader_simple;
+    GLuint vao, index_buffer;
+    GLuint buffer[2];
+    GLuint MatrixID;
+};
+
+int main() {
+    Tutorial_03 win_app;
+    if (win_app.init("OpenGL Moderno - Render Text 2D", 1280, 720)) {
+        win_app.info();
+        win_app.run();
+    }
+    return 0;
+}

Tutorial-06/Texto-OpenGL.cpp

@@ -0,0 +1,9 @@
+#version 330 core
+
+in vec4 color;
+out vec4 fColor;
+
+void main()
+{
+	fColor = color;
+}

Tutorial-06/simple.fragment_shader

@@ -0,0 +1,14 @@
+#version 330 core
+
+layout (location = 0) in vec4 vPosition;
+layout (location = 1) in vec4 vColor;
+
+uniform mat4 MVP;
+
+out vec4 color;
+
+void main()
+{
+     gl_Position = MVP * vPosition;
+	 color = vColor; 
+}