Text-Rendering ohne Texturen

• Text-Rendering ohne Texturen

  • Traditionell erfordert das Rendern von Text, alle Glyphen einer Schriftart in einen Atlas zu rendern, diesen als Textur zu binden und anschließend Dreiecke auf den Bildschirm zu zeichnen, um die Glyphen einzeln zu rendern.
  • Es wird eine einfache Methode vorgestellt, um Debug-Meldungen schnell auszugeben.
  • Es wird eine Technik beschrieben, mit der sich sämtlicher Text mit einem einzigen Draw Call zeichnen lässt.

• Schriftarten: texturlose Pixel

  • Um die Font-Atlas-Textur zu eliminieren, muss etwas Ähnliches wie ein Font-Atlas innerhalb des Fragment-Shaders gespeichert werden.
  • Bitmaps lassen sich mit Integer-Konstanten speichern, wodurch Glyphen gerendert werden können.
  • 8-Bit-Integer können als Bitmap verwendet und damit im GLSL-Fragment-Shader auf den Bildschirm gezeichnet werden.

• Ein einzelner Draw Call

  • Mit instanziierten Draw Calls lassen sich sich wiederholende Draw-Befehle vermeiden.
  • Für jede Instanz werden Daten verwendet, die einen Positions-Offset und den auszugebenden Text enthalten.
  • Nachrichten werden in 4 Zeichen aufgeteilt, in uint32_t umgewandelt und in der Struktur word_data gespeichert.

• Vertex-Shader

  • Der Vertex-Shader erzeugt drei Ausgaben.
  • In gl_Position werden die Eckpunkte des Dreiecks auf dem Bildschirm platziert.
  • Das auszugebende Wort wird an den Fragment-Shader weitergereicht.
  • Es werden Texturkoordinaten erzeugt, um die uv-Koordinaten zu berechnen.

• Fragment-Shader

  • Der Fragment-Shader benötigt drei Informationen, um Text zu rendern.
  • Er rendert Glyphen, indem die uv-Koordinaten auf die richtigen Bits der Glyphen-Bitmap abgebildet werden.
  • Ist ein Bit gesetzt, wird mit der Vordergrundfarbe gerendert, andernfalls mit der Hintergrundfarbe.

• Vollständige Implementierung und Quellcode

  • Die Implementierung dieser Technik findet sich im Quellcode des Moduls le_print_debug_print_text.
  • Dieses Modul ermöglicht es, Debug-Meldungen einfach auf dem Bildschirm auszugeben.

[GN⁺]

Hacker-News-Kommentare

• Es macht Spaß und ist einfach, auf ShaderToy mit einfacher Arithmetik Code zu schreiben. Es gibt viele verschiedene Beispiele für Text-Hacks
  • Zum Beispiel: Matrix mit weniger als 300 Zeichen, grüner CRT-Display-Effekt usw.
• Dieser Ansatz ist kreativ, aber das Ergebnis ist nicht besonders schön. Für bessere Resultate könnte man mehr Bits hinzufügen, aber der effiziente Weg ist, Schwarz-Weiß-Pixel zu verwenden und sie als Textur zu speichern
• Die übliche Methode zum Zeichnen von Text in modernen 3D-Rendering-Engines ist die Verwendung von SDF-Text. Dabei wird mit einem traditionellen Texturatlas ein Atlas aus Signed Distance Fields erzeugt
• Ich habe selbst nie einen Text-Rendering-Algorithmus ausprobiert, aber ich habe mehrere implementiert. Da Auflösungsunabhängigkeit und Anti-Aliasing erforderlich waren, war diese Methode dabei nicht hilfreich
• Dieser Ansatz ist konzeptionell ähnlich zu Will Dobbies Methode, aber einfacher. Dabei werden Pixeldaten in einem Array gespeichert
• Es gibt auch die Möglichkeit, Text als Mesh zu rendern. TextMeshPro verwendet Signed Distance Fields, um beliebige Skalierungen zu unterstützen
• Ein Leistungsvergleich mit dem traditionellen Texturansatz wäre interessant. Bei einfachen Aufgaben auf modernen GPUs dürfte die Antwort bei der Performance wahrscheinlich „ja“ lauten
• Sebastian Lagues Video behandelt verschiedene Font-Rendering-Techniken
• Ich habe Erfahrung mit einer ähnlichen Technik, bei der Font-Daten in den Quellcode des Fragment-Shaders eingebettet werden. Mit snprintf wurde direkt in einen GPU-Puffer ausgegeben
• Diese Methode ähnelt dem Zeichnen kleiner 8x8-Sprites in BBC Basic. Das weckt Erinnerungen an vor 35 Jahren
• GPUs sind beim Rendern aus Texturen effizient, bei Bitmanipulationen aber vergleichsweise langsam. Das spart Speicher, aber ob es tatsächlich schneller ist als die Nutzung eines Atlas, ist fraglich
• Es gibt die Frage, ob das Hochladen kleiner Texturen auf die GPU einen großen Einfluss auf die Performance hat. Ich frage mich, ob es möglich ist, in 2D einen String in eine Textur zu rendern und die Textur dann auf zwei Dreiecken anzuzeigen