Technique de rendu de texte sans texture

• Rendu de texte sans texture

  • Traditionnellement, pour rendre du texte, il faut rendre tous les glyphes d’une police dans un atlas, l’attacher comme texture, puis dessiner des triangles à l’écran pour rendre les glyphes un par un.
  • Présentation d’une méthode simple pour afficher rapidement des messages de débogage.
  • Explication d’une technique permettant de dessiner tout le texte en un seul draw call.

• Police : des pixels sans texture

  • Pour supprimer la texture d’atlas de police, il faut stocker dans le fragment shader quelque chose de similaire à un atlas de police.
  • Il est possible de stocker le bitmap à l’aide de constantes entières, ce qui permet de rendre les glyphes.
  • Des entiers 8 bits peuvent être utilisés comme bitmap afin d’être dessinés à l’écran dans un fragment shader GLSL.

• Un seul draw call

  • Un draw call instancié permet d’éviter les commandes de dessin répétitives.
  • Pour chaque instance, on utilise des données incluant un décalage de position et le texte à afficher.
  • Le message est découpé en groupes de 4 caractères, converti en uint32_t, puis stocké dans la structure word_data.

• Vertex shader

  • Le vertex shader génère trois sorties.
  • gl_Position place les sommets du triangle à l’écran.
  • Le mot à afficher est transmis au fragment shader.
  • Des coordonnées de texture sont générées pour calculer les coordonnées uv.

• Fragment shader

  • Le fragment shader a besoin de trois informations pour rendre le texte.
  • Il rend les glyphes en associant les coordonnées uv au bit correct du bitmap du glyphe.
  • Si le bit est activé, le rendu se fait avec la couleur de premier plan ; sinon, avec la couleur d’arrière-plan.

• Implémentation complète et code source

  • L’implémentation de cette technique se trouve dans le code source du module le_print_debug_print_text.
  • Ce module permet d’afficher facilement des messages de débogage à l’écran.

[GN⁺]

Avis Hacker News

• Sur ShaderToy, écrire du code à l’aide d’opérations arithmétiques simples est amusant et facile. Il existe de nombreux exemples de bidouillage de texte
  • Ex. : Matrix en moins de 300 caractères, effet d’affichage CRT vert, etc.
• Cette méthode est créative, mais le résultat n’est pas très esthétique. On peut ajouter davantage de bits pour obtenir un meilleur rendu, mais une méthode plus efficace consiste à utiliser des pixels noir et blanc et à les stocker sous forme de texture
• Dans les moteurs de rendu 3D modernes, la méthode courante pour dessiner du texte consiste à utiliser du texte SDF. Cela repose sur un atlas de textures traditionnel pour générer un atlas de champs de distance signés
• Je n’ai jamais essayé moi-même un algorithme de rendu de texte, mais j’en ai implémenté plusieurs variantes. Comme j’avais besoin d’indépendance vis-à-vis de la résolution et d’anti-aliasing, cette méthode ne m’a pas aidé
• Cette méthode est conceptuellement similaire à celle de Will Dobbie, mais plus simple. Elle consiste à stocker les données de pixels dans un tableau
• Il existe aussi l’option de rendre le texte sous forme de mesh. TextMeshPro utilise des champs de distance signés pour gérer une mise à l’échelle arbitraire
• Une comparaison de performances avec la méthode traditionnelle par texture serait intéressante. Sur des tâches simples pour les GPU modernes, la réponse en matière de performances sera probablement « oui »
• La vidéo de Sebastian Lague aborde différentes techniques de rendu de polices
• J’ai déjà utilisé une technique similaire qui consistait à inclure les données de police dans le code source du fragment shader. J’utilisais snprintf pour écrire directement dans le buffer GPU
• Cette méthode ressemble au dessin de petits sprites 8x8 en BBC Basic. Cela rappelle des souvenirs d’il y a 35 ans
• Les GPU sont efficaces pour le rendu à partir de textures, mais relativement lents pour la manipulation de bits. Cela économise de la mémoire, mais on peut douter que ce soit réellement plus rapide que d’utiliser un atlas
• Une question se pose quant à l’impact sur les performances de l’envoi de petites textures au GPU. Je me demande s’il est possible de rendre une chaîne dans une texture en 2D, puis d’afficher cette texture sur deux triangles