gpu font rendering

Representación de fuentes de GPU

Esta es una demostración de representar texto directamente en la GPU utilizando los contornos del vector definidos por la fuente.

Los contornos de un glifo se convierten en una lista de curvas bisier cuadráticas individuales (definidas por sus puntos de control), que se cargan a la GPU.

Se genera un quad para cada glifo y el sombreador de píxeles determina si cada píxel está dentro o fuera del glifo. Para hacer esto, el número de devanado del píxel se calcula cruzando un rayo con las curvas Bezier. En cada intersección, el rayo entra o sale del área llena determinada por la dirección de la curva Bezier en relación con el rayo. En cada salida, el número de devanado aumenta en uno y en cada entrada, el número de devanado disminuye en uno. Después de considerar todas las intersecciones, el número de devanado no será cero si el píxel está dentro del contorno.

La dirección de los rayos no importa para este cálculo del número de devanado, pero las matemáticas pueden simplificarse enormemente mediante el uso de rayos paralelos al eje X. Al restar la posición de la muestra de los puntos de control de las curvas Bezier, el sistema de coordenadas se desplaza para que el origen del rayo esté en $ (0, 0) $ y el rayo coincide con el eje X positivo. Para una intersección entre el rayo y una curva de Bezier las condiciones $ y = 0 $ y $ x ge 0 $ entonces debe ser verdad. El anti-aliasing (ver más abajo) ocurrirá a lo largo de la dirección de los rayos, pero se pueden lograr otras direcciones rotando primero los puntos de control de las curvas Bezier alrededor del origen para que los rayos se alineen con el eje X nuevamente.

Para encontrar las intersecciones entre un rayo y una sola curva Bezier, recuerde que la siguiente fórmula describe una curva de Bezier cuadrática (para el fondo sobre curvas Bezier, ver belleza e imprimación):

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

Tomar solo el componente Y y aplicar la condición $ y = 0 $ Resulta en una ecuación cuadrática simple:

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

Que se puede reorganizar en:

$$ 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 $$

Para que se pueda resolver usando la fórmula cuadrática:

$$ t_ {0/1} = {-b pm sqrt {b^2-4ac} sobre 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 $$

Sustitución $ B = -2b $ rendimientos:

$$ t_ {0/1} = {-(-2b) pm sqrt {(-2b)^2-4ac} over 2a} = {2b pm sqrt {4b^2-4ac} sobre 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 _ 0 °

La ecuación cuadrática puede tener cero, una o dos soluciones. Además, una solución $ t $ tiene que satisfacer $ 0 le t & lt; 1 $ estar en el segmento descrito por los puntos de control (el punto final está excluido ya que es parte del siguiente segmento del esquema). Finalmente, dada una solución $ t $ La coordenada X correspondiente se puede calcular como $ mathbf {c} _x (t) $ Para verificar la segunda condición $ x ge 0 $ para una intersección.

En este punto, se han identificado las intersecciones entre el rayo y la curva Bezier, pero aún necesitan ser clasificadas como entrada o salida. La demostración proporcionada por Dobbie calcula explícitamente la derivada de la curva Bezier para cada $ t $ valor para hacer esto. Sin embargo, la derivada también se puede calcular en general para ambas soluciones potenciales $ 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

$$ 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 -oC} le 0 0 °

$$ 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-oC} ge 0 $ $ ..

Por lo tanto, la curva Bezier cruza el eje x en una dirección fija en cada solución y, combinada con la convención para la orientación del contorno, $ t_0 $ es siempre una salida y $ t_1 $ es siempre una entrada.

Un enfoque diferente para comprender esta relación es notar que, debido a los diferentes signos utilizados en las soluciones y la raíz cuadrada no es negativa, $ t_0 $ tiene que venir primero a lo largo de la curva $ (t_0 & lt; = t_1) $ si $ a & gt; 0 $ . Por el contrario, si $ a & lt; 0 $ , entonces el orden se invierte y $ t_1 $ tiene que venir primero $ (t_1 & lt; = t_0) $ . El parámetro $ A $ se puede reescribir como $ 2 ( frac { textrm {y} _0 + textrm {y} _2} {2} - textrm {y} _1) $ , entonces su signo depende de si el segundo punto de control está por encima o por debajo del punto medio del primer y tercer punto de control. La siguiente figura muestra que las soluciones siempre se clasifican correctamente para todas las combinaciones de la dirección de la curva y el signo del parámetro $ A $ . Observe cómo cambia el orden de las soluciones a lo largo de la curva, pero el rayo siempre entra en un $ t_1 $ solución y sale en un $ t_0 $ solución.

Si el parámetro $ A $ es 0 (o suficientemente pequeño en los cálculos de punto flotante), existe una relación lineal entre $ t $ y $ y $ (Esto es cierto para segmentos lineales, pero también para algunas curvas no lineales), y la fórmula cuadrática ya no se puede usar debido a la división por $ A $ . Sin embargo, debido a que la relación ahora es lineal, puede haber como máximo una solución, que se calcula y clasifica fácilmente.

El anti-alias a lo largo de la dirección de los rayos se implementa considerando una ventana del tamaño de un píxel alrededor del origen del rayo. Si una intersección cae en esta ventana, entonces el número de devanado se cambia solo fraccionalmente para calcular la cobertura del píxel. El peso fraccional está determinado por la distancia desde el borde izquierdo del píxel (esto es consistente con los rayos que apuntan a la derecha). Al considerar las secciones individuales, se puede ver que esto calcula la cobertura unidimensional exactamente.

Tenga en cuenta que ahora tenemos que considerar las intersecciones ligeramente detrás del origen de rayos, pero la implementación primero calcula cualquier intersección con el eje X y luego verifica la posición X, por lo que no cambia mucho. Una forma diferente de pensar sobre esto es que la condición $ x ge 0 $ implica una función de ponderación que es 0 para $ x & lt; 0 $ y 1 para $ x ge 0 $ . Podemos eliminar la discontinuidad introduciendo un segmento lineal sobre el ancho de un píxel.

Para el anti-aliasing completo, podemos usar múltiples rayos a lo largo de diferentes direcciones (por ejemplo, una a lo largo del eje X y uno a lo largo del eje Y).

Notas

Este tipo de técnica está sujeta a artefactos de la precisión numérica limitada de los números de puntos flotantes. La imagen a continuación muestra una instancia de tales artefactos cuando se acerca completamente (y sabe dónde mirar). Sin embargo, he encontrado que esta implementación ya es bastante estable. Cualquier artefacto restante podría eliminarse utilizando el algoritmo de Slug, que no se implementa aquí debido a la patente asociada.

Esta demostración tampoco implementa ninguna optimización de rendimiento (como las bandas) y puede tener un alto uso de GPU en algunos escenarios y cuando se usa fuentes muy complejas.

Construir instrucciones

1. Init submódulos

Clone el proyecto recursivamente para inicializar los submódulos para las dependencias (o ejecutar git submodule update --init si ya ha clonado el repositorio):

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

2. Use cmake

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

En Windows, es posible que desee usar CMake GUI y/o Visual Studio.

En Linux, es posible que deba instalar paquetes adicionales para el desarrollo de OpenGL (por ejemplo sudo apt-get install xorg-dev libgl1-mesa-dev para ubuntu).

3. Dirígete desde el directorio principal del proyecto

 ./build/main

El programa requiere que los directorios fonts y shaders estén en el directorio actual para cargar sus recursos. Si solo obtiene una ventana negra , es probable que este sea el problema. Verifique su directorio de trabajo y revise la consola en busca de errores.

Probado en Windows 10, MacOS Monterey y Ubuntu 22.04.