gpu font rendering

GPU -Schriftart

Dies ist eine Demonstration des Renderns von Text direkt in der GPU mit den von der Schriftart definierten Vektorumrissen.

Die Konturen einer Glyphe werden in eine Liste einzelner quadratischer Bezier -Kurven (definiert durch ihre Kontrollpunkte) umgewandelt, die in die GPU hochgeladen werden.

Für jede Glyphe wird ein Quad erzeugt und der Pixel -Shader bestimmt, ob sich jedes Pixel innerhalb oder außerhalb der Glyphe befindet. Zu diesem Zweck wird die Wickelzahl des Pixels berechnet, indem ein Strahl mit den Bezier -Kurven gekreuzt wird. An jeder Kreuzung tritt der Strahl entweder in den gefüllten Bereich ein oder verlässt sie durch die Richtung der Bezier -Kurve relativ zum Strahl. An jedem Ausgang wird die Wickelzahl um eins erhöht und bei jedem Eintrag wird die Wickelzahl um eins verringert. Nach Berücksichtigung aller Kreuzungen ist die Wicklungsnummer ungleich Null, wenn sich das Pixel im Umriss befindet.

Die Richtung der Strahlen spielt keine Rolle für diese Berechnung der Wicklungszahl, aber die Mathematik kann durch die Verwendung von Strahlen parallel zur X-Achse stark vereinfacht werden. Durch Subtrahieren der Probenposition von den Kontrollpunkten der Bezier -Kurven wird das Koordinatensystem so verschoben, dass der Ursprung des Strahls an ist $ (0, 0) $ und der Strahl fällt mit der positiven X-Achse zusammen. Für eine Kreuzung zwischen dem Strahl und einer Bezier -Kurve die Bedingungen $ y = 0 $ Und $ x ge 0 $ muss dann wahr sein. Anti-Aliasing (siehe unten) tritt entlang der Richtung der Strahlen auf, aber andere Richtungen können erreicht werden, indem zuerst die Kontrollpunkte der Bezier-Kurven um den Ursprung gedreht werden, damit die Strahlen wieder mit der X-Achse ausgerichtet sind.

Um die Kreuzungen zwischen einem Strahl und einer einzelnen Bezier -Kurve zu finden, erinnern Sie sich daran, dass eine quadratische Bezier -Kurve durch die folgende Formel beschrieben wird (für Hintergrund zu Bezier -Kurven siehe Schönheit und Primer):

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

Nur die Y-Komponente einnehmen und den Zustand anwenden $ y = 0 $ führt zu einer einfachen quadratischen Gleichung:

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

Die neu angeordnet werden können in:

$$ 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 {y {y {{y}

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

Damit es mit der quadratischen Formel gelöst werden kann:

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

Ersetzen $ B = -2b $ Ausbeuten:

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

Die quadratische Gleichung kann Null, ein oder zwei Lösungen haben. Darüber hinaus eine Lösung $ t $ muss befriedigen $ 0 le t & lt; 1 $ auf dem von den Kontrollpunkten beschriebenen Segment (der Endpunkt wird ausgeschlossen, da er Teil des nächsten Segments der Umriss ist). Schließlich bei einer Lösung $ t $ Der entsprechende X-Koordinate kann berechnet werden als $ mathbf {c} _x (t) $ um den zweiten Zustand zu überprüfen $ x ge 0 $ für eine Kreuzung.

Zu diesem Zeitpunkt wurden die Kreuzungen zwischen der Strahl- und Bezier -Kurve identifiziert, müssen jedoch weiterhin als Eintritt oder Ausgang eingestuft werden. Die von Dobbie bereitgestellte Demo berechnet die Ableitung der Bezier -Kurve für jeden ausdrücklich $ t $ Wert dazu. Das Derivat kann jedoch auch im Allgemeinen für beide potenziellen Lösungen berechnet werden $ t_0/t_1 $ :

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

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

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

$$ frac{dmathbf{C}_y(t_0)}{dt} = 2a{b - sqrt{b^2-ac} over a} - 2b = 2b - 2sqrt{b^2-ac} - 2b = -2sqrt{b^2-ac} le 0 $$

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

Daher überschreitet die Bezier-Kurve die x-Achse in einer festen Richtung in jeder Lösung und kombiniert mit der Konvention zur Ausrichtung der Kontur. $ t_0 $ ist immer ein Ausgang und $ t_1 $ ist immer ein Eintrag.

Ein anderer Ansatz zum Verständnis dieser Beziehung besteht darin, zu bemerken, dass aufgrund der verschiedenen in den Lösungen verwendeten Zeichen und der Quadratwurzel nicht negativ sind $ t_0 $ muss an erster Stelle die Kurve kommen $ (t_0 & lt; = t_1) $ Wenn $ a & gt; 0 $ . Umgekehrt, wenn $ a & lt; 0 $ dann ist die Reihenfolge umgekehrt und $ t_1 $ muss zuerst kommen $ (t_1 & lt; = t_0) $ . Der Parameter $ a $ kann als umgeschrieben werden wie $ 2 ( frac { textrm {y} _0 + textrm {y} _2} {2} - textrm {y} _1) $ Sein Vorzeichen hängt also davon ab, ob der zweite Kontrollpunkt über oder unter dem Mittelpunkt des ersten und dritten Kontrollpunkts liegt. Die folgende Abbildung zeigt, dass die Lösungen für alle Kombinationen der Kurve und das Vorzeichen von Parametern immer korrekt klassifiziert sind $ a $ . Beachten Sie, wie sich die Reihenfolge der Lösungen entlang der Kurve ändert, aber der Strahl tritt immer in a ein $ t_1 $ Lösung und verlässt bei a $ t_0 $ Lösung.

Wenn der Parameter $ a $ ist 0 (oder ausreichend klein in Floating-Punkt-Berechnungen), es gibt eine lineare Beziehung zwischen $ t $ Und $ y $ (Dies gilt für lineare Segmente, aber auch für einige nichtlineare Kurven), und die quadratische Formel kann aufgrund der Teilung nicht mehr verwendet werden $ a $ . Da die Beziehung jedoch jetzt linear ist, kann es höchstens eine Lösung geben, die leicht berechnet und klassifiziert werden kann.

Anti-Aliasing entlang der Strahlenrichtung wird durch Berücksichtigung eines Fensters der Größe eines Pixels um den Strahlenursprung implementiert. Wenn eine Kreuzung in dieses Fenster fällt, wird die Wickelzahl nur fraktional geändert, um die Abdeckung des Pixels zu berechnen. Das Bruchgewicht wird durch den Abstand vom linken Rand des Pixels bestimmt (dies steht im Einklang mit den nach rechts zeigen Strahlen). Durch die Betrachtung der einzelnen Abschnitte kann man sehen, dass dies die eindimensionale Abdeckung genau berechnet.

Beachten Sie, dass wir jetzt auch Schnittpunkte hinter dem Strahlenursprung in Betracht ziehen müssen, aber die Implementierung berechnet zunächst jede Schnittstelle mit der X-Achse und überprüft dann die X-Position, sodass es sich nicht viel ändert. Eine andere Denkweise darüber ist, dass die Erkrankung $ x ge 0 $ impliziert eine Gewichtungsfunktion, die 0 für ist $ x & lt; 0 $ und 1 für $ x ge 0 $ . Wir können die Diskontinuität entfernen, indem wir ein lineares Segment über die Breite eines Pixels einführen.

Zur vollständigen Anti-Aliasing können wir mehrere Strahlen entlang verschiedener Richtungen verwenden (z. B. eine entlang der x-Achse und eine entlang der y-Achse).

Notizen

Diese Art von Technik unterliegt Artefakten aus der begrenzten numerischen Präzision der schwimmenden Punktzahlen. Das Bild unten zeigt eine Instanz solcher Artefakte, wenn sie vollständig vergrenzt ist (und wissen, wo man nachsehen soll). Trotzdem habe ich festgestellt, dass diese Implementierung bereits numerisch stabil ist. Verbleibende Artefakte könnten mit dem Slug -Algorithmus beseitigt werden, der hier aufgrund des zugehörigen Patents nicht implementiert wird.

Diese Demo implementiert auch keine Leistungsoptimierungen (wie das Binden) und hat möglicherweise eine hohe GPU -Verwendung in einigen Szenarien und bei sehr komplexen Schriftarten.

Anweisungen erstellen

1. Init Submodules

Klonen Sie das Projekt rekursiv, um die Submodules für die Abhängigkeiten zu initialisieren (oder git submodule update --init wenn Sie bereits das Repo geklont haben):

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

2. Verwenden Sie CMake

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

Unter Windows möchten Sie stattdessen möglicherweise CMAKE GUI und/oder Visual Studio verwenden.

Unter Linux müssen Sie möglicherweise zusätzliche Pakete für die OpenGL-Entwicklung installieren (z. B. sudo apt-get install xorg-dev libgl1-mesa-dev für Ubuntu).

3. Aus dem Hauptprojektverzeichnis laufen

 ./build/main

Das Programm erfordert, dass die Verzeichnisse der fonts und shaders im aktuellen Verzeichnis ihre Ressourcen laden. Wenn Sie nur ein schwarzes Fenster erhalten , ist dies höchstwahrscheinlich das Problem. Überprüfen Sie Ihr Arbeitsverzeichnis und überprüfen Sie die Konsole auf Fehler.

Getestet unter Windows 10, MacOS Monterey und Ubuntu 22.04.