OpenGL Программирование/Рендеринг Текста в Современном OpenGL 01: различия между версиями

Использовать FreeType очень просто. Следующие 2 строчки кода должны быть добавлены в начала вашего кода, чтобы подключить заголовочные файлы:

 

#include <ft2build.h>

#include FT_FREETYPE_H

 

Перед использованием других функция FreeType необходимо инициализировать библиотеку:

 

FT_Library ft;

 

return 1;

}

 

= Шрифты и глифы =

Например, чтобы загрузить обычный шрифт FreeSans из текущей директории нужно:

 

FT_Face face;

 

return 1;

}

 

После загрузки face остаётся еще один параметр, который можно установить.

Это размер шрифта. Чтобы установить высоту в 48 пикселей необходимо использовать:

 

FT_Set_Pixel_Sizes(face, 0, 48);

 

Face - это просто набор [[w:Глиф|глифов]].

Например, давайте возьмем из шрифта глиф символа 'X':

 

if(FT_Load_Char(face, 'X', FT_LOAD_RENDER)) {

fprintf(stderr, "Невозможно загрузить символ 'X'\n");

return 1;

}

 

Функция <code>FT_Load_Char()</code> заполнит информацию об этом символе в "слоте для глифов" шрифта, доступ к которому можно получить с помощью <code>face->glyph</code>.

Каждый раз писать <code>face->glyph</code> очень утомительно. А если ссылка на <code>face->glyph</code> не изменяется, то проще будет создать сокращение:

 

FT_GlyphSlot g = face->glyph;

 

В уроке мы будем использовать следующую информацию:

But it is also possible to combine the vertex and texture coordinates into a single four-dimensional vector, and have the vertex shader split it in two:

 

#version 120

 

texcoord = coord.zw;

}

 

Although this might not be directly obvious,

The fragment shader is as follows:

 

#version 120

 

gl_FragColor = vec4(1, 1, 1, texture2D(tex, texcoord).r) * color;

}

 

This fragment shader allows us to render transparent text, and should be used in combination with blending:

 

glEnable(GL_BLEND);

glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

 

= Rendering lines of text =

First, we will use a single texture object to render all the glyphs:

 

GLuint tex;

glActiveTexture(GL_TEXTURE0);

glBindTexture(GL_TEXTURE_2D, tex);

glUniform1i(uniform_tex, 0);

 

To prevent certain artifacts when a character is not rendered exactly on pixel boundaries,

we should clamp the texture at the edges, and enable linear interpolation:

 

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

 

It is also very important to disable the default 4-byte alignment restrictions that OpenGL uses

To ensure there are no alignment restrictions, we have to use this line:

 

glPixelStorei(GL_UNPACK_ALIGNMENT, 1);

 

We also need to set up a vertex buffer object for our combined vertex and texture coordinates:

 

GLuint vbo;

glGenBuffers(1, &vbo);

glBindBuffer(GL_ARRAY_BUFFER, vbo);

glVertexAttribPointer(attribute_coord, 4, GL_FLOAT, GL_FALSE, 0, 0);

 

We now have everything in place to render a line of text.

We repeat this for all the characters in the line.

 

void render_text(const char *text, float x, float y, float sx, float sy) {

const char *p;

}

}

 

The function <code>render_text()</code> takes 5 arguments: the string to render, the x and y start coordinates, and the x and y scale parameters.

Let's look at the <code>display()</code> function which draws the whole screen:

 

void display() {

glClearColor(1, 1, 1, 1);

glutSwapBuffers();

}

 

We start by clearing the screen to white, and setting the font color to black.

Add the following to the <code>display()</code> function:

 

FT_Set_Pixel_Sizes(face, 0, 48);

render_text("The Small Texture Scaled Fox Jumps Over The Lazy Dog",

render_text("The Tiny Font Sized Fox Jumps Over The Lazy Dog",

-1 + 8 * sx, 1 - 250 * sy, sx, sy);

 

You should see that despite the linear texture interpolation of OpenGL,

we just change the uniform color to our liking:

 

FT_Set_Pixel_Sizes(face, 0, 48);

render_text("The Solid Black Fox Jumps Over The Lazy Dog",

render_text("The Transparent Green Fox Jumps Over The Lazy Dog",

-1 + 18 * sx, 1 - 440 * sy, sx, sy);

 

Exercises: