gpu font rendering

Рендеринг шрифта графического процессора

Это демонстрация текста рендеринга непосредственно на графическом процессоре с использованием векторных контур, определенных шрифтом.

Контуры глифа преобразуются в список отдельных квадратичных кривых Безье (определяемых их контрольными точками), которые загружаются в GPU.

Для каждого глифа генерируется квадроцикл, и пиксельный шейдер определяет, находится ли каждый пиксель внутри или за пределами глифа. Для этого намоточное количество пикселя рассчитывается путем пересечения лучей с кривыми Безера. На каждом пересечении луч либо входит, либо выходит из заполненной области, как определено направлением кривой Безера относительно лучей. На каждом выходе число обмотки увеличивается на один, и при каждой входе число обмотки уменьшается на один. После рассмотрения всех пересечений обмотка будет ненулевым, если пиксель находится внутри контура.

Направление лучей не имеет значения для этого вычисления на извилистых числах, но математика может быть значительно упрощена с помощью лучей, параллельной оси x. Вычитая позицию выборки из контрольных точек кривых Безера, система координат смещается так, чтобы происхождение луча было в $ (0, 0) $ и луч совпадает с положительной осью X. Для пересечения между лучами и герметичным кривой условия $ y = 0 $ и $ x ge 0 $ должен быть правдой. Анти-алиасы (см. Ниже) будут происходить вдоль направления лучей, но другие направления могут быть достигнуты путем сначала вращения контрольных точек кривых Безера вокруг начала координат, так что лучи снова выровняются с осью x.

Чтобы найти пересечения между лучами и одной кривой Безье, напомним, что квадратичная кривая Безера описывается следующей формулой (фон на кривых Безера см. Красоту и праймер):

$$ textbf {c} (t) = (1-t)^2 textbf {p} _0 + 2 (1-t) t textbf {p} _1 + t^2 textbf {p} _2 $$

Принимая только Y-компонент и применение условия $ y = 0 $ приводит к простому квадратичному уравнению:

$$ (1-t)^2 textrm {y} _0 + 2 (1-t) t textrm {y} _1 + t^2 textrm {y} _2 = 0 $$

Который можно переставить в:

$$ textrm {y} _0 -2t textrm {y} _0 + t^2 textrm {y} _0 + 2t textrm {y} _1 - 2t^2 textrm {y} _1 + t^2 textrm {y} _2 = 0 $

$$ ( textrm {y} _0 - 2 textrm {y} _1 + textrm {y} _2) t^2 - 2 ( textrm {y} _0 - textrm {y} _1) t + textrm {y} _0 = 0 $ $

Так что его можно решить с помощью квадратичной формулы:

$$ t_ {0/1} = {-b pm sqrt {b^2-4ac} over 2a} $$

$$ a = textrm {y} _0 - 2 textrm {y} _1 + textrm {y} _2 Quad b = -2 ( textrm {y} _0 - textrm {y} _1) Quad c = textrm {y} _0 $$

Замена $ B = -2b $ Доходность:

$$ t_ {0/1} = {-(-2b) pm sqrt {(-2b)^2-4ac} over 2a} = {2b pm sqrt {4b^2-4ac} over 2a} = {b pm sqrt {b^2-ac} over a} $ $

$$ a = textrm {y} _0 - 2 textrm {y} _1 + textrm {y} _2 Quad b = textrm {y} _0 - textrm {y} _1 Quad c = textrm {y} _0 $$

Квадратное уравнение может иметь ноль, одно или два решения. Кроме того, решение $ t $ должен удовлетворить $ 0 le t & lt; 1 $ быть в сегменте, описанном контрольными точками (конечная точка исключена, поскольку она является частью следующего сегмента контура). Наконец, учитывая решение $ t $ соответствующий x-координата может быть рассчитана как $ mathbf {c} _x (t) $ Чтобы проверить второе условие $ x ge 0 $ для пересечения.

На этом этапе были идентифицированы пересечения между кривой луча и безера, но они все еще должны быть классифицированы как вход или выход. Демо, предоставленное Добби $ t $ ценность для этого. Однако производная также может быть рассчитана в целом для обоих потенциальных решений $ t_0/t_1 $ :

$$ mathbf {c} _y (t) = ( textrm {y} _0 - 2 textrm {y} _1 + textrm {y} _2) t^2 - 2 ( textrm {y} _0 - textrm {y} _1) t + textrm {y} _0 $ _0 $

$$ mathbf {c} _y (t) = at^2 - 2b t + c $$

$$ frac {d mathbf {c} _y (t)} {dt} = 2at - 2b $$

$$ frac {d mathbf {c} _y (t_0)} {dt} = 2a {b - sqrt {b^2 -ac} over a} - 2b = 2b - 2 sqrt {b^2 -ac} - 2b = -2 sqrt {b^2 -ac

$$ frac {d mathbf {c} _y (t_1)} {dt} = 2a {b + sqrt {b^2-ac} over a}-2b = 2b + 2 sqrt {b^2-ac}-2b = 2 sqrt {b^2-ac

Следовательно, кривая Безье пересекает ось X в фиксированном направлении в каждом решении и в сочетании с соглашением для ориентации контура, $ t_0 $ всегда выход и $ t_1 $ всегда запись.

Другой подход к пониманию этих отношений состоит в том, чтобы заметить, что из-за различных признаков, используемых в решениях, а квадратный корень не связывает, $ t_0 $ Должен пройти первым по кривой $ (t_0 & lt; = t_1) $ если $ a & gt; 0 $ Полем И наоборот, если $ a & lt; 0 $ , тогда заказ поменялся и $ t_1 $ Должен быть первым $ (t_1 & lt; = t_0) $ Полем Параметр $ a $ может быть переписан как $ 2 ( frac { textrm {y} _0 + textrm {y} _2} {2} - textrm {y} _1) $ , поэтому его знак зависит от того, является ли вторая управляющая точка выше или ниже средней точки первой и третьей контрольной точки. На следующем рисунке показано, что решения всегда правильно классифицируются для всех комбинаций направления кривой и знака параметра $ a $ Полем Обратите внимание, как изменяется порядок решений вдоль кривой, но луч всегда входит в $ t_1 $ решение и выходит в $ t_0 $ решение.

Если параметр $ a $ 0 (или достаточно мало в расчетах с плавающей точкой), существует линейная связь между $ t $ и $ y $ (Это верно для линейных сегментов, но также и для некоторых нелинейных кривых), и квадратичная формула больше не может использоваться из-за деления $ a $ Полем Однако, поскольку взаимосвязь теперь линейна, может быть не более одного решения, которое легко вычисляется и классифицируется.

Противодействие вдоль направления луча реализуется с учетом окна размером с пиксель вокруг происхождения лучей. Если пересечение попадает в это окно, то обмотка изменяется только фракционно, чтобы вычислить покрытие пикселя. Дробный вес определяется расстоянием от левого края пикселя (это согласуется с лучами, указывающими вправо). Рассматривая отдельные разделы, можно увидеть, что это точно рассчитывает одномерное покрытие.

Обратите внимание, что теперь мы должны также рассмотреть перекрестки немного позади происхождения лучей, но реализация сначала вычисляет любое пересечение с оси X, а затем проверяет X-позицию, поэтому она не сильно меняется. Другой способ мышления об этом - это состояние $ x ge 0 $ подразумевает функцию взвешивания, которая составляет 0 для $ x & lt; 0 $ и 1 для $ x ge 0 $ Полем Мы можем удалить разрыв, введя линейный сегмент по ширине одного пикселя.

Для полного анти-альца мы можем использовать несколько лучей в разных направлениях (например, один вдоль оси x и один вдоль оси Y).

Примечания

Этот вид техники подчиняется артефактам из ограниченной численной точности номеров с плавающей запятой. На изображении ниже показан экземпляр таких артефактов при полном увеличении (и зная, где смотреть). Тем не менее, я обнаружил, что эта реализация уже довольно численно стабильной. Любые оставшиеся артефакты могут быть устранены с использованием алгоритма Slug, который здесь не реализован из -за связанного патента.

Эта демонстрация также не реализует каких -либо оптимизации производительности (например, полоса) и может иметь высокое использование графического процессора в некоторых сценариях и при использовании очень сложных шрифтов.

Построить инструкции

1

Клонировать проект рекурсивно для инициализации подмодулей для зависимостей (или запустить git submodule update --init если вы уже клонировали репо):

 git clone --recursive https://github.com/GreenLightning/gpu-font-rendering.git
cd gpu-font-rendering

2. Используйте Cmake

 # Note: CMake will create the build directory.
cmake -S . -B build
make -j8 --directory build

В Windows вы можете вместо этого использовать Cmake Gui и/или Visual Studio.

На Linux вам может придется установить дополнительные пакеты для разработки OpenGL (например, sudo apt-get install xorg-dev libgl1-mesa-dev для Ubuntu).

3. бежать от основного каталога проекта

 ./build/main

Программа требует, чтобы каталоги fonts и shaders были в текущем каталоге для загрузки своих ресурсов. Если у вас есть только черное окно , это, скорее всего, проблема. Проверьте свой рабочий каталог и проверьте консоль на наличие ошибок.

Протестировано на Windows 10, MacOS Monterey и Ubuntu 22.04.