Techniques de rendu de texte avec webgl

Comme c'est la règle dans WebGL, tout ce qui semble être simple est en fait assez compliqué. Dessin de lignes, shaders de débogage, rendu de texte… ils sont sacrément difficiles à bien faire dans WebGL.

N'est-ce pas bizarre? WebGL n'a pas de fonction intégrée pour le rendu du texte. Bien que le texte semble être les fonctionnalités les plus élémentaires. Quand il s'agit de le rendre réellement, les choses se compliquent. Comment expliquez-vous l'immense quantité de glyphes pour chaque langue? Comment travaillez-vous avec des polices à largeur fixe ou à largeur proportionnelle? Que faites-vous lorsque le texte doit être rendu de haut en bas, de gauche à droite ou de droite à gauche? Équations mathématiques, diagrammes, partitions?

Soudain, il commence à comprendre pourquoi le rendu de texte n'a pas sa place dans une API graphique de bas niveau comme WebGL. Le rendu de texte est un problème complexe avec beaucoup de nuances. Si nous voulons rendre du texte, nous devons faire preuve de créativité. Heureusement, beaucoup de gens intelligents ont déjà proposé un large éventail de techniques pour tous nos besoins en texte WebGL.

Nous apprendrons dans certaines de ces techniques de cet article, notamment comment générer les actifs dont ils ont besoin et comment les utiliser avec ThreeJS, une bibliothèque 3D JavaScript qui comprend un rendu WebGL. En prime, chaque technique va avoir une démo présentant des cas d'utilisation.

Table des matières

• Une note rapide sur le texte en dehors de webgl
• Géométries de polices
• Textures de texte (et de toile)
• Polices bitmap
• Champs de distance signés
• Champs de distance signés multicanaux
• Générer du texte 3D avec des cartes de hauteur
• Dès la lecture

Une note rapide sur le texte en dehors de webgl

Bien que cet article concerne le texte à l'intérieur de WebGL, la première chose que vous devez considérer est de savoir si vous pouvez vous en sortir avec l'utilisation de texte HMTL ou de toile superposée au-dessus de votre toile Webgl. Le texte ne peut pas être occlus avec la géométrie 3D comme superposition, mais vous pouvez obtenir le style et l'accessibilité hors de la boîte. C'est tout ce dont vous avez besoin dans de nombreux cas.

Géométries de polices

L'une des façons courantes de rendre du texte est de construire les glyphes avec une série de triangles, un peu comme un modèle ordinaire. Après tout, les points de rendu, les lignes et les triangles sont une force de WebGL.

Lors de la création d'une chaîne, chaque glyphe est fabriqué en lisant les triangles à partir d'un fichier de police de points triangulés. À partir de là, vous pouvez extruder le glyphe pour le faire 3D, ou évoluer les glyphes via des opérations matricielles.

La géométrie de la police fonctionne mieux pour une petite quantité de texte. En effet, chaque glyphe contient de nombreux triangles, ce qui rend le dessin problématique.

Rendre ce paragraphe exact que vous lisez en ce moment avec la géométrie de la police crée 185 084 triangles et 555 252 sommets. Ce n'est que 259 lettres. Écrivez l'intégralité de l'article en utilisant une géométrie de police et votre ventilateur d'ordinateur pourrait tout aussi bien devenir une turbine d'avion.

Bien que le nombre de triangles varie selon la précision de la triangulation et la police utilisée, rendu beaucoup de texte sera probablement toujours un goulot d'étranglement lorsque vous travaillez avec la géométrie de la police.

Comment créer une géométrie de police à partir d'un fichier de police

Si c'était aussi simple que de choisir la police que vous souhaitez et de rendre le texte. Je n'écrirais pas cet article. Les formats de police réguliers définissent les glyphes avec des courbes de Bezier. D'un autre côté, les attirer dans WebGL coûtent extrêmement coûteux sur le CPU et est également compliqué à faire. Si nous voulons rendre du texte, nous devons créer des triangles (triangulation) des courbes de Bezier.

J'ai trouvé quelques méthodes de triangulation, mais en aucun cas, aucun d'entre eux n'est parfait et ils peuvent ne pas fonctionner avec chaque police. Mais au moins, ils vous amèneront pour trianguer vos propres polices.

Méthode 1: automatique et facile

Si vous utilisez ThreeJS, vous passez votre police via FACETYPE.js pour lire les courbes paramétriques de votre fichier de police et les mettre dans un fichier .json. Les fonctionnalités de la géométrie de la police en troisjs s'occupent de trianguer les points pour vous:

 const Geometry = new Three.FontGeometry ("Hello There", {Font: Font, Taille: 80})

Alternativement, si vous n'utilisez pas troisJ et n'avez pas besoin d'avoir une triangulation en temps réel. Vous pouvez vous épargner la douleur d'un processus manuel en utilisant troisJ pour trianguler la police pour vous. Ensuite, vous pouvez extraire les sommets et les indices de la géométrie et les charger dans votre application Webgl de choix.

Méthode 2: manuel et douloureux

L'option manuelle de triangulatage d'un fichier de police est extrêmement compliquée et alambiquée, du moins initialement. Il faudrait un article entier juste pour l'expliquer en détail. Cela dit, nous allons rapidement passer en revue les étapes d'une implémentation de base que j'ai saisie de Stackoverflow.

La mise en œuvre tombe essentiellement comme ceci:

1. Ajoutez OpenType.js et Earcut.js à votre projet.
2. Obtenez des courbes Bezier à partir de votre fichier de police .tff à l'aide d'OpenType.js.
3. Convertissez les courbes de Bezier en formes fermées et triez-les par zone descendante.
4. Déterminez les indices des trous en déterminant quelles formes se trouvent à l'intérieur d'autres formes.
5. Envoyez tous les points à l'oreille avec les indices de trous comme deuxième paramètre.
6. Utilisez le résultat de l'orecute comme indices de votre géométrie.
7. Respirer.

Ouais, c'est beaucoup. Et cette implémentation peut ne pas fonctionner pour toutes les polices. Cela vous amènera néanmoins.

Utilisation des géométries du texte en troisjs

Heureusement, ThreeJS prend en charge les géométries du texte hors de la boîte. Donnez-lui un .json des courbes de Bezier de votre police préférées et troisjs s'occupent de trianguer les sommets pour vous dans l'exécution.

 var loder = new Three.Fontloader ();
Var Font;
var text = "Hello World"
var loder = new Three.Fontloader ();
lourder.load ('Fonts / Helvetiker_Regular.Typeface.json', fonction (Helvetiker) {
  FONT = Helvetiker;
  var géométrie = new Three.TextGeométrie (texte, {{
    FONT: FONT,
    Taille: 80,
    hauteur: 5,
  });
}

Avantages

• Il est facilement extrudé pour créer des chaînes 3D.
• La mise à l'échelle est facilitée avec les opérations matricielles.
• Il offre une grande qualité en fonction de la quantité de triangles utilisés.

Désavantage

• Cela ne s'étend pas bien avec de grandes quantités de texte en raison du nombre élevé de triangle. Étant donné que chaque personnage est défini par de nombreux triangles, rendant même quelque chose d'aussi bref que «Hello World» se traduit par 7 396 triangles et 22 188 sommets.
• Cela ne se prête pas à des effets de texte courants.
• L'anti-aliasing dépend de votre aliasage post-traitement ou de votre défaut de navigateur.
• La mise à l'échelle des choses trop grandes pourrait montrer les triangles.

Demo: lettres de décoloration

Dans la démo suivante, j'ai profité de la facilité avec laquelle il est de créer du texte 3D à l'aide de géométries de police. À l'intérieur d'un shader vertex, l'extrusion est augmentée et diminuée au fil du temps. Associez cela avec le brouillard et le matériel standard et vous obtenez ces lettres fantomatiques qui entrent et sortent du vide.

Remarquez comment avec une faible quantité de lettres, la quantité de triangles est déjà dans des dizaines de milliers!

Textures de texte (et de toile)

La fabrication de textures de texte est probablement le moyen le plus simple et le plus ancien de dessiner du texte dans WebGL. Ouvrez Photoshop ou un autre éditeur de graphiques raster, dessinez une image avec du texte dessus, puis rendez ces textures sur un quad et vous avez terminé!

Alternativement, vous pouvez utiliser la toile pour créer les textures à la demande au moment de l'exécution. Vous pouvez également rendre la toile sous forme de texture sur un quad.

À part être la technique la moins compliquée du groupe. Les textures textuelles et les textures en toile n'ont pas le bénéfice d'un seul quad nécessaire par texture ou de texte donné. Si vous le vouliez vraiment, vous pourriez écrire toute l'encyclopédie britannique sur une seule texture. De cette façon, vous n'avez qu'à rendre un seul quad, six sommets et deux faces. Bien sûr, vous le feriez à une échelle, mais l'idée demeure: vous pouvez intégrer plusieurs glyphes dans le même quad. L'expérience des textures de texte et de toile a des problèmes de mise à l'échelle, en particulier lorsque vous travaillez avec beaucoup de texte.

Pour les textures textuelles, l'utilisateur doit télécharger toutes les textures qui composent le texte, puis les garder en mémoire. Pour les textures sur toile, l'utilisateur n'a rien à télécharger - mais maintenant l'ordinateur de l'utilisateur doit faire tout le rasterisant au moment de l'exécution, et vous devez garder une trace de l'endroit où chaque mot est situé dans la toile. De plus, la mise à jour d'une grande toile peut être vraiment lente.

Comment créer et utiliser une texture de texte

Les textures du texte n'ont rien de fantaisie pour eux. Ouvrez votre éditeur graphique raster préféré, dessinez du texte sur la toile et exportez-le comme une image. Ensuite, vous pouvez le charger sous forme de texture et le cartographier dans un plan:

 // Chargez la texture
Soit Texture =;
const Geometry = new Three.PlaneBuffergeometry ();
const Material new Three.MeshBasicMaterial ({map: texture});
this.scene.add (nouveau maillage (géométrie, matériel));

Si votre application WebGL a beaucoup de texte, le téléchargement d'une énorme feuille de texte sprite peut ne pas être idéal, en particulier pour les utilisateurs sur des connexions lentes. Pour éviter le temps de téléchargement, vous pouvez raspériser les choses à la demande à l'aide d'une toile hors écran, puis goûter à cette toile comme texture.

Échangeons le temps de téléchargement pour les performances car rasterising beaucoup de texte prend plus d'un instant.

 fonction CreateTextCanvas (String, Paramètres = {}) {
    
    const canvas = document.CreateElement ("canvas");
    const ctx = canvas.getContext ("2d");
    
    // prépare la police pour pouvoir mesurer
    Laissez FontSize = Paramètres.fontSize || 56;
    ctx.font = `$ {FonTSize} px monospace`;
    
    const textMetrics = ctx.measureText (texte);
    
    Selt width = textMetrics.width;
    Soit la hauteur = FonTSize;
    
    // redimensionner la toile pour correspondre à la taille du texte 
    canvas.width = largeur;
    canvas.height = hauteur;
    canvas.style.width = largeur "px";
    canvas.style.height = hauteur "px";
    
    // Réapproche de la police car la toile est redimensionnée.
    ctx.font = `$ {FonTSize} px monospace`;
    ctx.textalign = paramètres.align || "centre" ;
    ctx.textBaseline = Paramètres.Baseline || "milieu";
    
    // rend la toile transparente pour la simplicité
    ctx.fillStyle = "transparent";
    ctx.fillrect (0, 0, ctx.canvas.width, ctx.canvas.height);
    
    ctx.fillStyle = paramètres.color || "blanc";
    ctx.fillText (texte, largeur / 2, hauteur / 2);
    
    Canvas de retour;
}

Selt texture = new Three.Texture (CreateTextCanvas ("This is Text"));

Vous pouvez maintenant utiliser la texture sur un avion, comme l'extrait précédent. Ou vous pouvez créer un sprite à la place.

Comme alternative, vous pouvez utiliser des bibliothèques plus efficaces pour créer une texture ou des sprites, comme trois text2d ou trois spritetext. Et si vous voulez du texte multi-lignes de texte, vous devriez consulter ce tutoriel incroyable.

Avantages

• Cela offre une excellente qualité de 1 à 1 avec du texte statique.
• Il y a un grand nombre de sommets / visage. Chaque chaîne peut utiliser aussi peu que six sommets et deux faces.
• Il est facile d'implémenter la texture sur un quad.
• Il est assez trivial d'ajouter des effets, comme les frontières et les brillants, en utilisant une toile ou un éditeur graphique.
• Canvas facilite la création de texte multi-lignes.

Désavantage

• Semble floue s'il est échelonné, tourné ou transformé après rasterisation.
• Retina on-non, le texte a l'air croquant.
• Vous devez raspériser toutes les chaînes utilisées. Beaucoup de chaînes signifient beaucoup de données à télécharger.
• La rasterisation à la demande avec la toile peut être lente si vous continuez à mettre à jour constamment le canevas.

Démo: texture sur toile

Les textures sur toile fonctionnent bien avec une quantité limitée de texte qui ne change pas souvent. J'ai donc construit un simple mur de texte avec les quads réutilisant la même texture.

Polices bitmap

Les géométries de police et les textures de texte rencontrent les mêmes problèmes pour gérer beaucoup de texte. Avoir un million de sommets par morceau de texte est super inefficace, et créer une texture par morceau de texte ne s'allonge pas vraiment.

Les polices de bitmap résolvent ce problème en rasterisant tous les glyphes uniques en une seule texture , appelée atlas de texture. Cela signifie que vous pouvez assembler n'importe quelle chaîne donnée lors de l'exécution en créant un quad pour chaque glyphe et en échantillonnant la section de l' atlas de texture .

Cela signifie que les utilisateurs n'ont qu'à télécharger et utiliser une seule texture pour tout le texte. Cela signifie également que vous n'avez qu'à rendre aussi peu qu'un quad par glyphe:

Rendre tout cet article serait d'environ 117 272 sommets et 58 636 triangles. Cela est 3,1 fois plus efficace par rapport à une géométrie de police ne rendant qu'un seul paragraphe . C'est une énorme amélioration!

Parce que les polices bitmap rasterisent le glyphe dans une texture, elles souffrent du même problème que les images régulières. Zoomez ou échelle et vous commencez à voir un désordre pixélisé et flou. Si vous voulez du texte à une taille différente, vous devez envoyer un bitmap secondaire avec les glyphes sur cette taille spécifique. Ou vous pouvez utiliser un champ de distance signé (SDF) que nous couvrirons dans la section suivante.

Comment créer des polices bitmap

Il existe de nombreux outils pour générer des bitmaps. Voici quelques-unes des options les plus pertinentes:

• BMFONT d'AngelCode - c'est par les créateurs du format Bitmap.
• HIERO - Ceci est un outil de source ouverte Java. Il est très similaire au BMFONT d'Anglecode, mais il vous permet d'ajouter des effets de texte.
• Glyphs Designer - Il s'agit d'une application MacOS payante.
• Shoebox - Il s'agit d'un outil pour traiter avec des sprites, y compris des polices bitmap.

Nous utiliserons BMFONT d'Anglecode pour notre exemple parce que je pense que c'est le plus facile à commencer. Au bas de cette section, vous pouvez trouver d'autres outils si vous pensez qu'il n'a pas la fonctionnalité que vous recherchez.

Lorsque vous ouvrez l'application, vous verrez un écran plein de lettres que vous pouvez sélectionner à utiliser. La bonne chose à ce sujet est que vous pouvez saisir les glyphes dont vous avez besoin au lieu d'envoyer des symboles grecs.

La barre latérale de l'application vous permet de choisir et de sélectionner des groupes de glyphes.

Prêt à exporter? Allez dans Options → Enregistrer le bitmap AS . Et fait!

Mais nous avons un peu d'avance sur nous-mêmes. Avant d'exporter, vous devez vérifier quelques paramètres importants.

• Paramètres de la police: cela vous permet de choisir la police et la taille que vous souhaitez utiliser. L'article le plus important ici est «Faire correspondre la hauteur du char». Par défaut, l'option «Taille» de l'application utilise des pixels au lieu de points. Vous verrez une différence substantielle entre la taille de la police de votre éditeur graphique et la taille de la police générée. Sélectionnez les options «Match Char Height» si vous voulez que vos glyphes aient un sens.
• Paramètres d'exportation: Pour l'exportation, assurez-vous que la taille de la texture est une puissance de deux (par exemple 16 × 16, 32 × 32, 64 × 64, etc.). Ensuite, vous pouvez profiter du filtrage «linéaire mipmap linéaire», si nécessaire.

Au bas des paramètres, vous verrez la section «Format de fichier». Choisir l'une ou l'autre des options ici est bien tant que vous pouvez lire le fichier et créer les glyphes.

Si vous recherchez la plus petite taille de fichier. J'ai effectué un test ultra non scientifique où j'ai créé un bitmap de tous les caractères latins de faible et majuscules et comparé chaque option. Pour les descripteurs de police, le format le plus efficace est binaire .

Format de descripteur de police	Taille de fichier
Binaire	3 Ko
Texte brut	11 kb
Xml	12 kb

Format de texture	Taille de fichier
PNG	7 kb
Targa	64 Ko
Surface de draw direct	65 Ko

PNG est la plus petite taille de fichier pour la texture du texte.

Bien sûr, c'est un peu plus compliqué que de simples tailles de fichiers. Pour avoir une meilleure idée de l'option à utiliser, vous devez examiner les performances du temps et du temps d'exécution. Si vous souhaitez connaître les avantages et les inconvénients de chaque format, consultez cette discussion.

Comment utiliser les polices bitmap

La création de la géométrie de la police bitmap est un peu plus impliquée que d'utiliser une texture car nous devons construire la chaîne nous-mêmes. Chaque glyphe a sa propre hauteur et sa largeur, et échantillonne une section différente de la texture. Nous devons créer un quad pour chaque glyphe sur notre chaîne afin que nous puissions leur donner les UV corrects pour goûter son glyphe.

Vous pouvez utiliser trois-bmfont-text en troisjs pour créer des chaînes à l'aide de bitmaps, de SDF et de MSDF. Il s'occupe du texte multi-lignes et regroupant tous les glyphes sur une seule géométrie. Notez qu'il doit être installé dans un projet de NPM.

 var createGeometry = require ('trois-bmfont-text')
var chargefont = require ('load-bmfont')

loadFont ('Fontts / Arial.fnt', fonction (err, font) {
  // Créer une géométrie de glyphes bitmap emballés, 
  // Word enveloppé à 300px et à droite
  Var Geometry = CreateGeometry ({
    FONT: FONT,
    Texte: "Mon texte"
  })
    
  var textureLoader = new Three.TextureLoader ();
  textureLoader.load ('Fontts / Arial.png', fonction (texture) {
    // Nous pouvons utiliser un matériau troisjs simple
    Var Material = nouveau trois.MeshBasicMaterial ({{
      Carte: texture,
      transparent: vrai,
      Couleur: 0xaaffff
    })

    // Faites maintenant quelque chose avec notre maillage!
    Var Mesh = New Three.Mesh (géométrie, matériau)
  })
})

Selon chaque fois que votre texte est dessiné en tant que noir ou blanc complet, utilisez l'option inversée.

Avantages

• C'est rapide et simple à rendre.
• C'est un rapport 1: 1 et une résolution indépendante.
• Il peut rendre n'importe quelle chaîne, compte tenu des glyphes.
• C'est bon pour beaucoup de texte qui doit changer souvent.
• Cela fonctionne extrêmement bien avec un nombre limité de glyphes.
• Il comprend un support pour des choses comme le coup de cerfing, la hauteur de ligne et l'emballage des mots au moment de l'exécution.

Désavantage

• Il n'accepte qu'un ensemble limité de personnages et de styles.
• Il nécessite des glyphes pré-raspérisants et un emballage de bacs supplémentaire pour une utilisation optimale.
• Il est flou et pixélé à grande échelle, et peut également être tourné ou transformé.
• Il n'y a qu'un seul quad par glyphe rendu.

Démo interactif: les crédits brillants

Les polices de bitmap raster fonctionnent très bien pour les crédits de films car nous n'avons besoin que de quelques tailles et styles. L'inconvénient est que le texte n'est pas génial avec des conceptions réactives car elle sera floue et pixée à des tailles plus grandes.

Pour l'effet de la souris, je fais des calculs en mappant la position de la souris à la taille de la vue, puis en calculant la distance entre la souris et la position texte. Je tourne également le texte lorsqu'il atteint des points spécifiques sur l'axe Z et l'axe Y.

Champs de distance signés

Un peu comme les polices bitmap, les polices de champ de distance signé (SDF) sont également un atlas de texture. Les glyphes uniques sont lot dans un seul «atlas de texture» qui peut créer n'importe quelle chaîne au moment de l'exécution.

Mais au lieu de stocker le glyphe rastérisé sur la texture comme le font les polices bitmap, le SDF du glyphe est généré et stocké à la place, ce qui permet une forme haute résolution à partir d'une image basse résolution.

Comme les mailles polygonales (géométries de la police), les SDF représentent les formes . Chaque pixel sur un SDF stocke la distance à la surface la plus proche . Le signe indique chaque fois que le pixel est à l'intérieur ou à l'extérieur de la forme. Si le signe est négatif, le pixel est à l'intérieur; Si c'est positif, le pixel est à l'extérieur. Cette vidéo illustre bien le concept.

Les SDF sont également couramment utilisés pour les rayons de rayons et le rendu volumétrique.

Parce qu'un SDF stocke la distance dans chaque pixel, le résultat brut ressemble à une version floue de la forme d'origine. Pour sortir la forme dure, vous devrez le tester Alpha à 0,5, ce qui est la bordure du glyphe. Jetez un œil à la façon dont le SDF de la lettre «A» se compare à son image raster régulière:

Comme je l'ai mentionné plus tôt, le grand avantage des SDF est de pouvoir rendre les formes haute résolution à partir du SDF à basse résolution. Cela signifie que vous pouvez créer un SDF de police de 16 pt et faire évoluer le texte jusqu'à 100 pt ou plus sans perdre beaucoup de croustillage.

Les SDF sont bons à l'échelle car vous pouvez presque parfaitement reconstruire la distance avec une interpolation bilinéaire, ce qui est une façon fantaisie de dire que nous pouvons obtenir des valeurs entre deux points. Dans ce cas, l'interpolation bilinéaire entre deux pixels sur une police bitmap ordinaire nous donne la couleur intermédiaire, ce qui entraîne un flou linéaire.

Sur un SDF, l'interpolation bilinéaire entre deux pixels fournit la distance entre les deux vers le bord le plus proche. Étant donné que ces deux distances de pixels sont similaires au début, la valeur résultante ne perd pas beaucoup d'informations sur le glyphe. Cela signifie également que plus le SDF est grand, plus les informations sont plus précises et moins perdues.

Cependant, ce processus est livré avec une mise en garde. Si le changement de vitesse entre les pixels n'est pas linéaire - comme dans le cas des coins pointus - l'interpolation bilinéaire donne une valeur inexacte, entraînant des coins ébréchés ou arrondis lors de la mise à l'échelle d'un SDF beaucoup plus élevé que sa taille d'origine.

En plus de heurter le côté de la texture, la seule vraie solution consiste à utiliser les SDF multicanaux, ce que nous couvrirons dans la section suivante.

Si vous voulez plonger plus profondément dans la science derrière les SDF, consultez la thèse du maître de Chris Green (PDF) sur le sujet.

Avantages

• Ils maintiennent la netteté, même lorsqu'ils sont tournés, à l'échelle ou transformés.
• Ils sont idéaux pour le texte dynamique.
• Ils offrent une bonne qualité au rapport taille. Une seule texture peut être utilisée pour rendre les tailles de police minuscules et énormes sans perdre beaucoup de qualité.
• Ils ont un faible nombre de sommets de seulement quatre sommets par glyphes.
• L'antialiasage est peu coûteux, tout comme les frontières, les ombres et toutes sortes d'effets avec les tests alpha.
• Ils sont plus petits que les MSDF (que nous verrons dans un peu).

Désavantage

• Le peut entraîner des coins arrondis ou ébréchés lorsque la texture est échantillonnée au-delà de sa résolution. (Encore une fois, nous verrons comment les MSDF peuvent empêcher cela.)
• Ils sont inefficaces aux petites tailles de police.
• Ils ne peuvent être utilisés qu'avec des glyphes monochromes.

Champs de distance signés multicanaux

Les polices de champ de distance signé multicanaux (MSDF) sont un peu une bouchée et une variation assez récente des SDF qui est capable de produire des coins pointus presque parfaits en utilisant les trois canaux de couleur. Ils ont l'air assez époustouflants au début, mais ne laissez pas cela vous repousser car ils sont faciles à utiliser qu'ils n'apparaissent.

L'utilisation des trois canaux de couleur se traduit par une image plus lourde, mais c'est ce qui donne aux MSDF un rapport de qualité / espace bien meilleur que les SDF réguliers. L'image suivante montre la différence entre un SDF et un MSDF pour une police qui a été mise à l'échelle jusqu'à 50px.

Comme un SDF ordinaire, un MSDF stocke la distance au bord le plus proche, mais modifie les canaux de couleur chaque fois qu'il trouve un coin pointu. Nous obtenons la forme en dessinant où deux canaux de couleur ou plus sont d'accord. Bien qu'il y ait un peu plus de technique impliquée. Consultez la lecture de ce générateur MSDF pour une explication plus approfondie.

Avantages

• Ils prennent en charge un rapport de qualité et d'espace supérieur que les SDF. et sont souvent le meilleur choix.
• Ils maintiennent des coins nets lorsqu'ils sont à l'échelle.

Désavantage

• Ils peuvent contenir de petits artefacts, mais ceux-ci peuvent être évités en augmentant la taille de la texture du glyphe.
• Ils nécessitent de filtrer la médiane des trois valeurs lors de l'exécution, ce qui est un peu cher.
• Ils ne sont compatibles qu'avec les glyphes monochromes.

Comment créer des polices MSDF

Le moyen le plus rapide de créer une police MSDF consiste à utiliser l'outil MSDF-BMFONT-Web. Il a la plupart des options de personnalisation pertinentes et il fait le travail en quelques secondes, le tout dans le navigateur. Alternativement, il existe un certain nombre de polices Google qui ont déjà été converties en MSDF par les gens de A-Frame.

Si vous cherchez également à générer des SDF ou de votre police, cela nécessite un ajustement spécial grâce à certains glyphes problématiques. La CLI MSDF-BMFONT-XML vous offre un large éventail d'options, sans rendre les choses trop déroutantes. Jetons un coup d'œil à comment vous l'utiliseriez.

Tout d'abord, vous devrez l'installer à l'échelle mondiale à partir de NPM:

 NPM Installer MSDF-BMFONT-XML -G

Ensuite, donnez-lui un fichier de police .TTF avec vos options:

 MSDF-BMFONT ./Open-Sans-Black.TTF --TUTPUT-TYPE JSON --FONT-SIZE 76 --Texture-Size 512,512

Ces options valent le détour un peu. Bien que MSDF-BMFONT-XML offre de nombreuses options pour affiner votre police, il n'y a vraiment que quelques options dont vous aurez probablement besoin pour générer correctement un MSDF:

• -T ou - Field-Type <sdf ou sdf>: MSDF-BMFONT-XML génère les atlases des glyphes MSDFS par défaut. Si vous souhaitez générer un SDF à la place, vous devez le spécifier en utilisant -T SDF.</sdf>
• -f ou —Output-type : msdf-bmfont-xml génère un fichier de police XML que vous auriez à analyser JSON à l'exécution. Vous pouvez éviter cette étape d'analyse en exportant immédiatement JSON.
• -s, --font-size : Certains artefacts et imperfections peuvent apparaître si la taille de la police est super petite. Couper la taille de la police en se débarrassera la plupart du temps. Cet exemple montre une petite imperfection dans la lettre «M.»
• -M ou --Texture-Size : Si tous vos personnages ne correspondent pas à la même texture, une deuxième texture est créée pour les intégrer. À moins que vous n'essayiez de profiter d'un atlas glyphe de plusieurs pages, je recommande d'augmenter la taille de la texture afin qu'il s'adapte à tous les caractères sur une texture pour éviter le travail supplémentaire.

Il existe d'autres outils qui aident à générer des polices MSDF et SDF:

• MSDF-BMFONT-WEB: un outil Web pour créer des MSDF (mais pas des SDF) rapidement et facilement
• MSDF-BMFONT: un outil de nœud utilisant le Caire et le Node-Canvas
• MSDFGEN: l'outil de ligne de commande d'origine dont tous les autres outils MSDF sont basés à partir de
• HIERO: un outil pour générer à la fois les Bitmaps et les polices SDF

Comment utiliser les polices SDF et MSDF

Parce que les polices SDF et MSDF sont également des atlas de glyphes, nous pouvons utiliser trois-BMFont-Text comme nous l'avons fait pour les polices Bitmap. La seule différence est que nous devons obtenir le glyphe nos champs de distance avec un shader de fragment.

Voici comment cela fonctionne pour les polices SDF. Étant donné que notre champ de distance a une valeur supérieure à 0,5 à l'extérieur de notre glyphe et moins de 0,5 à l'intérieur de notre glyphe, nous devons tester alpha dans un shader de fragment sur chaque pixel pour nous assurer que nous ne faisons que des pixels avec une distance inférieure à 0,5, ce qui rend uniquement l'intérieur des glyphes.

 const fragmentShader = `

  Couleur Vec3 uniforme;
  Carte Sampler2D uniforme;
  VEC2 VUV variable;
  
  void main () {
    VEC4 TexColor = Texture2d (carte, VUV);
    // Rendez seulement l'intérieur du glyphe.
    float alpha = étape (0,5, texcolor.a);

    gl_fragcolor = vec4 (couleur, alpha);
    if (gl_fragcolor.a <p> De même, nous pouvons importer la police à partir de trois-BMFont-Text qui est livrée avec un antialiasing hors de la boîte. Ensuite, nous pouvons l'utiliser directement sur un Rawshaderaterial:</p><pre rel="JavaScript"> Soit sdfShader = required ('trois-bmfont-text / shaders / sdf');
Soit Material = Nouveau trois.RawshaDermaterial (MSDFShader ({{
  Carte: texture,
  transparent: vrai,
  Couleur: 0x000000
}));

Les polices MSDF sont un peu différentes. Ils recréent des coins pointus par les intersections de deux canaux de couleur. Deux canaux de couleur ou plus doivent s'entendre dessus. Avant de faire des SMS alpha, nous devons obtenir la médiane des trois canaux de couleur pour voir où ils sont d'accord:

 const fragmentShader = `

  Couleur Vec3 uniforme;
  Carte Sampler2D uniforme;
  VEC2 VUV variable;

  Float Median (float r, float g, float b) {
    retour max (min (r, g), min (max (r, g), b));
  }
  
  void main () {
    VEC4 TexColor = Texture2d (carte, VUV);
    // Rendez seulement l'intérieur du glyphe.
    float sigdist = médian (texcolor.r, texcolor.g, texcolor.b) - 0,5;
    float alpha = étape (0,5, sigdist);
    gl_fragcolor = vec4 (couleur, alpha);
    if (gl_fragcolor.a <p> Encore une fois, nous pouvons également importer à partir de trois-BMFont-Text en utilisant son MSDFShader qui est également livré avec un antialiasing hors de la boîte. Ensuite, nous pouvons l'utiliser directement sur un Rawshaderaterial:</p><pre rel="JavaScript"> Soit msdfShader = require ('trois-bmfont-text / shaders / msdf');
Soit Material = Nouveau trois.RawshaDermaterial (MSDFShader ({{
  Carte: texture,
  transparent: vrai,
  Couleur: 0x000000
}));

Démo: intro de Star Wars

L'intro Drawl Star Wars est un bon exemple où les polices MSDF et SDF fonctionnent bien car l'effet a besoin que le texte soit venu en plusieurs tailles. Nous pouvons utiliser un seul MSDF et le texte semble toujours vif! Bien que, malheureusement, la Font à trois bm ne prenne pas encore en charge le texte justifié. L'application de la justification gauche ferait une présentation plus équilibrée.

Pour l'effet de sabre léger, je raycaste un plan invisible de la taille de l'avion, en dessinant sur une toile qui a la même taille, et en échantillonnant que la toile en cartographiant la position de la scène aux coordonnées de texture.

Conseil bonus: génération de texte 3D avec cartes de hauteur

Mis à part les géométries des polices, toutes les techniques que nous avons couvertes génèrent des chaînes ou des glyphes sur un seul quad. Si vous souhaitez construire des géométries 3D à partir d'une texture plate, votre meilleur choix est d'utiliser une carte de hauteur.

Une carte de hauteur est une technique où la hauteur de géométrie est augmentée à l'aide d'une texture. Ceci est normalement utilisé pour générer des montagnes dans les jeux, mais il s'avère également être un texte de rendu utile.

La seule mise en garde est que vous aurez besoin de beaucoup de visages pour que le texte soit lisse.

Dès la lecture

Différentes situations nécessitent différentes techniques. Rien de ce que nous avons vu ici n'est une solution miracle et ils ont tous leurs avantages et leurs inconvénients.

Il existe de nombreux outils et bibliothèques pour tirer le meilleur parti du texte WebGL, dont la plupart proviennent réellement de l'extérieur WebGL. Si vous souhaitez continuer à apprendre, je vous recommande fortement d'aller au-delà de WebGL et de consulter certains de ces liens:

• Combien de façons de charger une police en troisjs
• Étude de cas sur une campagne de SPET Spotify texte
• Conversations intéressantes sur les MSDF
• Plus de techniques de rendu de polices
• Rendre l'art vecteur (glyphe) sur le GPU
• Comment Freetype le rend le texte
• Créer des effets intéressants avec des polices bitmaps

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!