gpu font rendering

Rendu de police GPU

Il s'agit d'une démonstration du texte de rendu directement sur le GPU à l'aide des contours vectoriels définis par la police.

Les contours d'un glyphe sont convertis en une liste de courbes de Bezier quadratiques individuelles (définies par leurs points de contrôle), qui sont téléchargées sur le GPU.

Un quad est généré pour chaque glyphe et le shader de pixel détermine si chaque pixel est à l'intérieur ou à l'extérieur du glyphe. Pour ce faire, le numéro d'enroulement du pixel est calculé en se croisant un rayon avec les courbes de Bezier. À chaque intersection, le rayon entre ou sort de la zone remplie telle que déterminée par la direction de la courbe de Bezier par rapport au rayon. À chaque sortie, le nombre d'enroulement est augmenté de un et à chaque entrée, le nombre d'enroulement est diminué d'une. Après avoir envisagé toutes les intersections, le numéro d'enroulement ne sera pas nul si le pixel est à l'intérieur du contour.

La direction des rayons n'a pas d'importance pour ce calcul de numéro d'enroulement, mais les mathématiques peuvent être considérablement simplifiées en utilisant les rayons parallèles à l'axe X. En soustrayant la position de l'échantillon des points de contrôle des courbes de Bezier, le système de coordonnées est décalé de sorte que l'origine du rayon soit à $ (0, 0) $ Et le rayon coïncide avec l'axe X positif. Pour une intersection entre le rayon et une courbe de Bezier, les conditions $ y = 0 $ et $ x ge 0 $ doit alors être vrai. L'anti-aliasing (voir ci-dessous) se produira le long de la direction des rayons, mais d'autres directions peuvent être réalisées en faisant la tournure en rotation des points de contrôle des courbes de Bezier autour de l'origine afin que les rayons s'alignent à nouveau avec l'axe X.

Pour trouver les intersections entre un rayon et une seule courbe de Bezier, rappelez-vous qu'une courbe quadratique Bezier est décrite par la formule suivante (pour fond sur les courbes de Bezier, voir la beauté et l'amorce):

dollars

Ne prenant que le composant y et applique la condition $ y = 0 $ entraîne une simple équation quadratique:

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

Qui peut être réorganisé en:

dollars

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

Afin qu'il puisse être résolu en utilisant la formule quadratique:

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

dollars

Substituant $ B = -2b $ donne:

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

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

L'équation quadratique peut avoir zéro, une ou deux solutions. De plus, une solution $ t $ doit satisfaire $ 0 le t & lt; 1 $ être sur le segment décrit par les points de contrôle (le point final est exclu car il fait partie du prochain segment du contour). Enfin, étant donné une solution $ t $ la coordonnée x correspondante peut être calculée comme $ mathbf {c} _x (t) $ Pour vérifier la deuxième condition $ x ge 0 $ pour une intersection.

À ce stade, les intersections entre le rayon et la courbe de Bezier ont été identifiées, mais elles doivent toujours être classées comme entrée ou sortie. La démo fournie par Dobbie calcule explicitement la dérivée de la courbe de Bezier pour chaque $ t $ valeur pour ce faire. Cependant, le dérivé peut également être calculé en général pour les deux solutions potentielles $ t_0 / t_1 $ :

dollars

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

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

dollars

dollars

Par conséquent, la courbe de Bezier traverse l'axe x dans une direction fixe à chaque solution et, combinée à la convention pour l'orientation du contour, $ t_0 $ est toujours une sortie et $ t_1 $ est toujours une entrée.

Une approche différente pour comprendre cette relation consiste à remarquer qu'en raison des différents signes utilisés dans les solutions et de la racine carrée n'est pas négative, $ t_0 $ doit venir en premier le long de la courbe $ (t_0 & lt; = t_1) $ si $ a & gt; 0 $ . Inversement, si $ a & lt; 0 $ , alors l'ordre est inversé et $ t_1 $ doit venir en premier $ (t_1 & lt; = t_0) $ . Le paramètre $ a $ peut être réécrit comme 2 2 ( frac { textrm {y} _0 + textrm {y} _2} {2} - textrm {y} _1) $ , donc son signe dépend du fait que le deuxième point de contrôle est au-dessus ou en dessous du point médian du premier et du troisième point de contrôle. La figure suivante montre que les solutions sont toujours correctement classées pour toutes les combinaisons de la direction de la courbe et du signe du paramètre $ a $ . Remarquez comment l'ordre des solutions le long de la courbe change, mais le rayon entre toujours dans un $ t_1 $ solution et sort à un $ t_0 $ solution.

Si le paramètre $ a $ est 0 (ou suffisamment petit dans les calculs de points flottants), il existe une relation linéaire entre $ t $ et $ y $ (Cela est vrai pour les segments linéaires, mais aussi pour certaines courbes non linéaires), et la formule quadratique ne peut plus être utilisée en raison de la division par $ a $ . Cependant, comme la relation est désormais linéaire, il peut y avoir au plus une solution, qui est facilement calculée et classifiée.

L'anti-aliasage le long de la direction des rayons est mis en œuvre en considérant une fenêtre de la taille d'un pixel autour de l'origine du rayon. Si une intersection tombe dans cette fenêtre, alors le numéro d'enroulement est modifié uniquement pour calculer la couverture du pixel. Le poids fractionnaire est déterminé par la distance entre le bord gauche du pixel (cela est cohérent avec les rayons pointant vers la droite). En considérant les sections individuelles, on peut voir que cela calcule exactement la couverture unidimensionnelle.

Notez que nous devons également considérer les intersections légèrement derrière l'origine du rayon maintenant, mais l'implémentation calcule d'abord toute intersection avec l'axe X, puis vérifie la position X, donc elle ne change pas beaucoup. Une autre façon de penser à ce sujet est que la condition $ x ge 0 $ implique une fonction de pondération qui est 0 pour $ x & lt; 0 $ et 1 pour $ x ge 0 $ . Nous pouvons supprimer la discontinuité en introduisant un segment linéaire sur la largeur d'un pixel.

Pour un anti-aliasing complet, nous pouvons utiliser plusieurs rayons dans différentes directions (par exemple, le long de l'axe x et un le long de l'axe y).

Notes

Ce type de technique est soumis à des artefacts de la précision numérique limitée des nombres de points flottants. L'image ci-dessous montre une instance de tels artefacts lorsqu'il est complètement zoomé (et sachant où chercher). Néanmoins, j'ai déjà trouvé que cette implémentation était déjà assez stable numériquement. Tous les artefacts restants pourraient être éliminés à l'aide de l'algorithme Slug, qui n'est pas mis en œuvre ici en raison du brevet associé.

Cette démonstration n'implémente pas non plus d'optimisations de performances (comme les bandes) et pourrait avoir une utilisation élevée du GPU dans certains scénarios et lors de l'utilisation de polices très complexes.

Construire des instructions

1. Sous-modules init

Clone le projet récursivement pour initialiser les sous-modules pour les dépendances (ou exécuter git submodule update --init si vous avez déjà cloné le repo):

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

2. Utilisez Cmake

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

Sur Windows, vous voudrez peut-être utiliser CMake GUI et / ou Visual Studio à la place.

Sur Linux, vous devrez peut-être installer des packages supplémentaires pour OpenGL Development (par exemple sudo apt-get install xorg-dev libgl1-mesa-dev pour ubuntu).

3. Exécuter à partir du répertoire principal du projet

 ./build/main

Le programme exige que les répertoires fonts et shaders soient dans le répertoire actuel pour charger ses ressources. Si vous n'obtenez qu'une fenêtre noire , c'est probablement le problème. Vérifiez votre répertoire de travail et vérifiez les erreurs de la console.

Testé sur Windows 10, MacOS Monterey et Ubuntu 22.04.