В один прекрасный момент нашего необычайно интересного путешествия по миру графического программирования OpenGL, нам наверняка захочется отобразить какой-нибудь текст. На первый взгляд может показаться, что получить на экране компьютера самую обычную строку текста, используя низкоуровневое API (по типу OpenGL), — очень простая задача. На самом деле это не так. Ведь только представьте, нам придется позаботиться о рендеринге более 128 различных символов, которые имеют разную ширину, высоту и отступ. И что делать, если вдобавок мы захотим использовать специальные символы, а также символы музыкальных нот или математических выражений? А как насчет рендеринга текста сверху вниз?
Поскольку в OpenGL нет поддержки средств отображения текстовых данных, то нам предстоит самим решать вопрос вывода текста на экран. Помимо этого, также не существует и графических примитивов для представления текстовых символов, поэтому мы должны проявить творческий подход и придумать их сами. Вот некоторые идеи того, как это можно реализовать: рисовать буквенные фигуры с помощью GL_LINES, создавать 3D-меши букв или попробовать визуализировать текстуры символов на плоских прямоугольниках в 3D-пространстве.
Большинство разработчиков выбирают способ визуализации текстуры символов на плоский прямоугольник. Рендеринг текстурированных прямоугольников сам по себе не должен быть слишком сложным процессом, но вот сопоставление соответствующего символа(ов) с текстурой — может оказаться задачей непростой. На этом уроке мы рассмотрим несколько методов рендеринга текста и реализуем более продвинутую и гибкую технику его визуализации с помощью библиотеки FreeType.
Растровые шрифты
В прежние времена рендеринг текста включал в себя выбор шрифта (или самостоятельное его создание), который мы хотели бы использовать для своего приложения, и извлечение из этого шрифта всех соответствующих символов, чтобы поместить их в одну большую текстуру. Такая текстура называется растровым шрифтом и содержит в своих строго заданных областях все символы, которые нам могут потребоваться. Символы, входящие в состав такого шрифта, называют глифами (англ. «glyphs»). Каждый глиф расположен в определенной области, связанной со шрифтом текстуры. Всякий раз, когда мы хотим визуализировать символ, мы производим выборку соответствующего глифа и визуализируем на плоский прямоугольник нужную секцию растрового шрифта.
На вышеприведенной картинке вы можете увидеть, как мы будем визуализировать слово OpenGL поверх нескольких прямоугольников, используя растровый шрифт и выборку соответствующих глифов из текстуры (тщательно подбирая необходимые координаты). Включив режим смешивания и сохраняя фон прозрачным, мы получим строку символов, отображаемых на экране. Данный растровый шрифт был сгенерирован с помощью программы Font Generator.
Такой подход имеет ряд преимуществ и недостатков. Его относительно легко реализовать, поскольку растровые шрифты уже предварительно растеризованы. Однако он не отличается особой гибкостью. Если мы хотим использовать другой шрифт, нам нужно будет полностью перекомпилировать новый растровый шрифт, и при этом наша программа будет ограничена только одним разрешением шрифта; масштабирование быстро приведет к появлению некрасивых пиксельных краев. Кроме того, шрифт может содержать лишь ограниченный набор символов, а значит, об отображении расширенных или Unicode-символов часто не может быть и речи.
Описываемый подход был довольно популярен в свое время, так как он быстр и работает на любой платформе, но на сегодняшний день существуют более гибкие методы. Одним из них является загрузка TrueType-шрифтов с помощью библиотеки FreeType.
Библиотека FreeType
Библиотека FreeType — это библиотека, которая используется для растеризации шрифтов и операций над ними. Она используется в таких продуктах, как: macOS, Java, PlayStation, Linux и Android. Что делает FreeType особенно привлекательным, так это то, что она способна загружать TrueType-шрифты.
TrueType-шрифт — это набор глифов, определяемых не пикселями или любым другим немасштабируемым решением, а математическими уравнениями (комбинацией сплайнов). Подобно векторным изображениям, растеризованные изображения шрифтов могут быть сгенерированы процедурно на основе задаваемой высоты шрифта. Используя TrueType-шрифты, можно с легкостью визуализировать глифы символов самых разных размеров без какой-либо потери качества.
Библиотека FreeType доступна на сайте разработчиков. Можно скомпилировать библиотеку самостоятельно или использовать одну из уже предварительно скомпилированных версий под различные целевые платформы. Обязательно необходимо прилинковать к проекту файл библиотеки freetype.lib и убедиться, что компилятор знает, где найти соответствующие заголовочные файлы.
Затем нужно подключить в проекте необходимые заголовочные файлы:
|
1 2 |
#include <ft2build.h> #include FT_FREETYPE_H |
Предупреждение: Из-за некоторых особенностей разработки FreeType (по крайней мере, на момент написания этой статьи), нельзя помещать заголовочные файлы данной библиотеки в дополнительные каталоги; они должны быть расположены в корне вашей папки с заголовочными файлами. Если вы попробуете подключить FreeType директивой по типу #include <FreeType/ft2build.h>, то у вас, скорее всего, произойдет конфликт заголовочных файлов.
FreeType загружает TrueType-шрифты и для каждого глифа генерирует растровое изображение, вычисляя несколько различных метрик глифа. Для создания текстуры мы можем взять полученные растровые изображения и, используя загруженные метрики, расположить каждый символ глифа соответствующим образом.
Для загрузки шрифта всё, что нам нужно сделать, — это инициализировать библиотеку FreeType и загрузить шрифт в face (так называют данный объект сами разработчики FreeType). Ниже представлен фрагмент кода, с помощью которого мы загружаем файл TrueType-шрифта arial.ttf, который был скопирован из каталога Windows\Fonts:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
FT_Library ft; if (FT_Init_FreeType(&ft)) { std::cout << "ERROR::FREETYPE: Could not init FreeType Library" << std::endl; return -1; } FT_Face face; if (FT_New_Face(ft, "fonts/arial.ttf", 0, &face)) { std::cout << "ERROR::FREETYPE: Failed to load font" << std::endl; return -1; } |
При возникновении ошибки каждая из этих FreeType-функций возвращает ненулевое целое число.
После того, как мы загрузили face, необходимо определить размер шрифта, который мы хотели бы извлечь из face:
|
1 |
FT_Set_Pixel_Sizes(face, 0, 48); |
Вышеописанная функция задает параметры ширины и высоты шрифта. Установка ширины в 0 позволяет face динамически вычислять ширину шрифта, в зависимости от заданной высоты.
Объект face библиотеки FreeType содержит коллекцию глифов. Вызвав FT_Load_Char, мы можем установить один из этих глифов в качестве активного глифа. Ниже мы пробуем загрузить глиф символа 'X':
|
1 2 3 4 5 |
if (FT_Load_Char(face, 'X', FT_LOAD_RENDER)) { std::cout << "ERROR::FREETYPE: Failed to load Glyph" << std::endl; return -1; } |
Задавая FT_LOAD_RENDER в качестве одного из флагов загрузки, мы говорим FreeType создать для нас 8-битное растровое изображение в формате оттенков серого, к которому мы можем получить доступ через face->glyph->bitmap.
Однако глифы, которые мы загружаем с помощью FreeType, не имеют единого размера (как это было в случае с растровыми шрифтами). Например, растровое изображение символа точки '.' имеет гораздо меньшие размеры, чем растровое изображение символа 'X'. Размеры растрового изображения, генерируемого FreeType, достаточно велики для того, чтобы вместить символ. По этой причине FreeType также загружает несколько метрик, которые определяют, насколько большим должен быть каждый символ и как правильно его расположить. Ниже представлено изображение, на котором демонстрируются метрики, рассчитываемые библиотекой FreeType для каждого символа:
Каждый из глифов находится на т.н. baseline — базовой линии или линии шрифта (на картинке она представлена жирной горизонтальной стрелкой), при этом одни глифы находятся полностью над этой базовой линией (например, 'X'), а другие — частично ниже её (например, 'g' или 'p'). Рассматриваемые метрики определяют точные смещения для правильного расположения каждого глифа на базовой линии, насколько большим должен быть каждый глиф, и на сколько пикселей нам нужно сдвинуться, чтобы отобразить следующий глиф. Далее приведен небольшой список метрик, которые нам понадобятся:
width — ширина (в пикселях) растрового изображения глифа, доступ к которому осуществляется через face->glyph->bitmap.width;
height — высота (в пикселях) растрового изображения глифа, доступ к которому осуществляется через face->glyph->bitmap.rows;
bearingX — горизонтальное смещение (в пикселях) изображения относительно точки отсчета. Доступ осуществляется через face->glyph->bitmap_left;
bearingY — вертикальное смещение (в пикселях) изображения относительно базовой линии. Доступ осуществляется через face->glyph->bitmap_top;
advance — горизонтальное смещение (в 1/64 пикселя) от начала координат до начала следующего глифа. Доступ осуществляется через face->glyph->advance.x.
Мы могли бы загружать символ глифа, получать его метрики и генерировать текстуру каждый раз, когда хотим отобразить символ на экране, но делать это каждый кадр было бы неэффективно. Лучше сохранить сгенерированные данные где-нибудь в приложении и запрашивать их всякий раз, когда мы хотим визуализировать символ. Определим для этого удобную структуру, которую поместим в контейнер std::map:
|
1 2 3 4 5 6 7 8 |
struct Character { unsigned int TextureID; // ID текстуры глифа glm::ivec2 Size; // размер глифа glm::ivec2 Bearing; // смещение от линии шрифта до верхнего/левого угла глифа unsigned int Advance; // смещение до следующего глифа }; std::map<char, Character> Characters; |
На данном уроке мы постараемся упростить задачу, ограничившись 255 символами из набора Windows-1251. Для каждого символа мы создаем текстуру и храним соответствующие данные в структуре Character, которую добавляем к переменной Characters. Таким образом, все данные, необходимые для визуализации каждого символа, сохраняются для последующего использования:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
glPixelStorei(GL_UNPACK_ALIGNMENT, 1); // отключаем ограничение выравнивания байтов for (unsigned int c = 0; c < 256; c++) { // Загружаем глифы символов if (FT_Load_Char(face, c, FT_LOAD_RENDER)) { std::cout << "ERROR::FREETYPE: Failed to load Glyph" << std::endl; continue; } // Генерируем текстуру unsigned int 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 ); // Задаем для текстуры необходимые опции 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); // Сохраняем символ для последующего использования 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<char, Character>(c, character)); } |
В цикле for мы проходимся по всем 255 символам набора Windows-1251 и извлекаем соответствующие им глифы. Для каждого символа мы создаем текстуру, задаем её параметры и сохраняем метрики. Здесь интересно отметить, что мы используем GL_RED в качестве текстуры для аргументов internalFormat и format. Растровое изображение, полученное из глифа, представляет собой 8-битное изображение, заданное градациями серого, где каждый цвет задается одним байтом. По этой причине мы хотели бы сохранить каждый байт растрового буфера в качестве значения одного цвета текстуры. Мы достигаем этого, создавая текстуру, у которой каждый байт соответствует красному компоненту цвета текстуры (первый байт её цветового вектора). Если мы используем один байт для представления цветов текстуры, то нужно позаботиться о соответствующем ограничении OpenGL:
|
1 |
glPixelStorei(GL_UNPACK_ALIGNMENT, 1); |
OpenGL требует, чтобы все текстуры имели 4-байтовое выравнивание, т.е. чтобы размер всегда был кратен 4 байтам. Обычно это не является проблемой, так как большинство текстур имеют ширину, кратную 4, и/или используют 4 байта на пиксель, но поскольку теперь мы используем только один байт на пиксель, то текстура может иметь любую возможную ширину. Установив GL_UNPACK_ALIGNMENT, равным 1, мы гарантируем отсутствие проблем с выравниванием (которые, к слову говоря, могут привести к ошибкам сегментации).
Убедитесь, чтобы процедура освобождения ранее задействованных ресурсов происходила только после того, как вы закончите работу с глифами:
|
1 2 |
FT_Done_Face(face); FT_Done_FreeType(ft); |
Шейдеры
Для визуализации глифов мы будем использовать следующий вершинный шейдер:
|
1 2 3 4 5 6 7 8 9 10 11 |
#version 330 core layout (location = 0) in vec4 vertex; out vec2 TexCoords; uniform mat4 projection; void main() { gl_Position = projection * vec4(vertex.xy, 0.0, 1.0); TexCoords = vertex.zw; } |
Мы объединяем данные координат позиции символа и текстуры в один vec4. Вершинный шейдер умножает координаты на матрицу проекции и пересылает координаты текстуры во фрагментный шейдер:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#version 330 core in vec2 TexCoords; out vec4 color; uniform sampler2D text; uniform vec3 textColor; void main() { vec4 sampled = vec4(1.0, 1.0, 1.0, texture(text, TexCoords).r); color = vec4(textColor, 1.0) * sampled; } |
Фрагментный шейдер принимает две uniform-переменные: одна — монохромное растровое изображение глифа, а другая — это uniform-переменная для настройки конечного цвета текста. Сначала мы производим выборку значения цвета из растровой текстуры. Поскольку данные текстуры хранятся только в её красном компоненте, мы используем r-компоненту текстуры для сэмплирования альфа-значения. В результате изменения альфа-значения выходного цвета, результирующий пиксель будет прозрачным для всех фоновых цветов глифа и непрозрачным для настоящих пикселей символа. Мы также умножаем RGB-цвета на uniform-переменную textColor, чтобы изменить цвет текста.
Однако для этого нам нужно включить смешивание:
|
1 2 |
glEnable(GL_BLEND); glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); |
В качестве матрицы проекции мы будем использовать матрицу ортографической проекции. Для рендеринга текста нам (как правило) не нужна перспектива, и использование ортографической матрицы проекции позволяет нам указать все координаты вершин в экранных координатах, если мы настроим её следующим образом:
|
1 |
glm::mat4 projection = glm::ortho(0.0f, 800.0f, 0.0f, 600.0f); |
Мы устанавливаем нижнюю часть матрицы проекции как 0.0f, а верхнюю — равную высоте окна. В результате получается, что y-координата будет принимать значения от нижней части экрана (0.0f) до верхней части экрана (600.0f). Это означает, что точка (0.0, 0.0) теперь соответствует нижнему левому углу экрана.
Последнее — это создание VBO и VAO для рендеринга прямоугольников. Теперь, при инициализации VBO, мы резервируем достаточно памяти, чтобы позже обновить память VBO при рендеринге символов:
|
1 2 3 4 5 6 7 8 9 10 |
unsigned int VAO, VBO; glGenVertexArrays(1, &VAO); glGenBuffers(1, &VBO); glBindVertexArray(VAO); glBindBuffer(GL_ARRAY_BUFFER, VBO); glBufferData(GL_ARRAY_BUFFER, sizeof(float) * 6 * 4, NULL, GL_DYNAMIC_DRAW); glEnableVertexAttribArray(0); glVertexAttribPointer(0, 4, GL_FLOAT, GL_FALSE, 4 * sizeof(float), 0); glBindBuffer(GL_ARRAY_BUFFER, 0); glBindVertexArray(0); |
Для 2D-прямоугольника требуется 6 вершин с 4 переменными типа float на каждую вершину. Поскольку мы будем обновлять содержимое памяти VBO довольно часто, то выделим эту память с помощью GL_DYNAMIC_DRAW.
Рендеринг строки текста
Чтобы визуализировать символ, мы берем соответствующую структуру Character из контейнера Characters и вычисляем размеры прямоугольника, используя метрики символа. С помощью вычисленных размеров прямоугольника мы динамически генерируем набор из 6 вершин, которые используем для обновления содержимого памяти, управляемой VBO, с помощью glBufferSubData().
Далее, создаем функцию под названием RenderText(), которая отображает строку символов:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
void RenderText(Shader &s, std::string text, float x, float y, float scale, glm::vec3 color) { // Активируем соответствующее состояние рендеринга s.Use(); glUniform3f(glGetUniformLocation(s.Program, "textColor"), color.x, color.y, color.z); glActiveTexture(GL_TEXTURE0); glBindVertexArray(VAO); // Перебираем все символы std::string::const_iterator c; for (c = text.begin(); c != text.end(); c++) { Character ch = Characters[*c]; float xpos = x + ch.Bearing.x * scale; float ypos = y - (ch.Size.y - ch.Bearing.y) * scale; float w = ch.Size.x * scale; float h = ch.Size.y * scale; // Обновляем VBO для каждого символа float vertices[6][4] = { { xpos, ypos + h, 0.0f, 0.0f }, { xpos, ypos, 0.0f, 1.0f }, { xpos + w, ypos, 1.0f, 1.0f }, { xpos, ypos + h, 0.0f, 0.0f }, { xpos + w, ypos, 1.0f, 1.0f }, { xpos + w, ypos + h, 1.0f, 0.0f } }; // Визуализируем текстуру глифа поверх прямоугольника glBindTexture(GL_TEXTURE_2D, ch.textureID); // Обновляем содержимое памяти VBO glBindBuffer(GL_ARRAY_BUFFER, VBO); glBufferSubData(GL_ARRAY_BUFFER, 0, sizeof(vertices), vertices); glBindBuffer(GL_ARRAY_BUFFER, 0); // Рендерим прямоугольник glDrawArrays(GL_TRIANGLES, 0, 6); // Теперь производим смещение для отображения следующего глифа (обратите внимание, что данное смещение измеряется в единицах, составляющих 1/64 пикселя) x += (ch.Advance >> 6) * scale; // побитовый сдвиг на 6, чтобы получить значение в пикселях (2^6 = 64) } glBindVertexArray(0); glBindTexture(GL_TEXTURE_2D, 0); } |
Код функции является относительно простым: сначала мы вычисляем координаты исходного положения прямоугольника (переменные xpos и ypos) и его размеры (переменные w и h), а затем генерируем набор из 6 вершин, чтобы сформировать 2D-прямоугольник; обратите внимание, что мы умножили каждую метрику на scale. Затем мы обновляем содержимое VBO и визуализируем прямоугольник.
Однако следующая строка кода требует дополнительного внимания:
|
1 |
float ypos = y - (ch.Size.y - ch.Bearing.y) * scale; |
Некоторые символы (например, 'p' или 'g') отображаются немного ниже базовой линии, поэтому прямоугольник также должен быть расположен немного ниже значения y-компоненты переменной RenderText. Точная величина, на которую нам нужно сместить ypos ниже базовой линии, может быть вычислена из метрик глифа:
Чтобы вычислить это смещение, нам нужно определить расстояние, на которое глиф опускается ниже базовой линии; на вышеприведенном изображении это расстояние обозначено красной стрелкой. Как вы можете видеть из метрик глифа, мы вычисляем длину этого вектора, вычитая bearingY из высоты (растрового изображения) глифа. Значение его длины равно 0.0 для символов, которые лежат на базовой линии (например, 'X'), и больше нуля для символов, которые находятся немного ниже базовой линии (например, 'g' или 'j').
Если вы всё сделали правильно, то теперь вы можете успешно визуализировать строки текста, используя следующий код:
|
1 2 |
RenderText(shader, "Урааа, Получилось!!!", 25.0f, 25.0f, 1.0f, glm::vec3(0.5, 0.8f, 0.2f)); RenderText(shader, "(C) OpenGL for Ravesli.com", 540.0f, 570.0f, 0.5f, glm::vec3(0.3, 0.7f, 0.9f)); |
В результате, у вас должно получиться что-то похожее на следующее изображение:
GitHub / Урок №45. Рендеринг текста в OpenGL — Исходный код
Чтобы дать вам представление о том, как мы рассчитали вершины квадрата, мы можем отключить смешивание, чтобы увидеть, как выглядят фактические визуализированные прямоугольники:
На вышеприведенном изображении вы можете ясно видеть, что большинство прямоугольников лежит на (воображаемой) линии шрифта, в то время как прямоугольники, соответствующие глифам типа Р или (, сдвинуты вниз.
Что дальше?
На этом уроке была продемонстрирована техника рендеринга текста TrueType-шрифтами с использованием библиотеки FreeType. К плюсам данного подхода можно отнести его гибкость, масштабируемость и способность взаимодействовать со многими кодировками символов. Однако он, скорее всего, будет излишним для вашего приложения, поскольку мы генерируем и визуализируем текстуры для каждого глифа. С точки зрения производительности использование растровых шрифтов является более предпочтительным выбором, поскольку нам нужна только одна текстура для всех наших глифов. Наилучшим решением было бы объединить эти два подхода, динамически генерируя текстуру растрового шрифта со всеми глифами символов, загруженными с помощью FreeType. Это избавляет рендер от значительного количества текстурных переключений и, в зависимости от того, насколько плотно упакован каждый глиф, получается неплохой прирост производительности.
Еще одна проблема с растровыми изображениями FreeType-шрифтов заключается в том, что текстуры глифов хранятся с фиксированным размером шрифта, поэтому существенное увеличение их масштаба может привести к появлению неровных краев. Кроме того, вращение, примененное к глифам, приведет к тому, что они будут выглядеть размытыми. Это можно смягчить, если вместо сохранения фактических растеризованных цветов пикселей сохранить расстояние до ближайшего контура глифа для каждого пикселя. Этот метод носит название signed distance field fonts, и Valve опубликовала статью несколько лет назад об их реализации данного метода, который удивительно хорошо работает для приложений 3D-рендеринга.
Дополнительные ресуры
70+ Best Free Fonts for Designers — обобщенный список большой группы шрифтов для использования в вашем проекте (для личного или коммерческого использования).
Оценить статью:
(11 оценок, среднее: 4,73 из 5)
Загрузка...
Все получилось спасибо вам большое!
Но есть один вопрос по поводу шрифтов в freetype,
в уроке вы используете шрифт "a_AlternaSw.TTF", и он отлично выводит кириллицу.
Но стоит взять любой другой шрифт тоже с кириллицей, и тут уже на выходе получаются латинские символы с различными знаками через кодировку ASCII
Например через вот такое преобразование ( a BS ' → á ) получаем на выводе á, хотя пытались вывести вообще букву "б".
Где взять подобные шрифты как "a_AlternaSw.TTF"?
Или как выводить кириллицу через другие шрифты?