Wie die Regel in WebGL ist alles, was so einfach sein sollte, eigentlich ziemlich kompliziert. Zeichnen von Zeilen, Debuggen von Shadern, Text -Rendering… Sie sind alle verdammt schwer in WebGL.

Ist das nicht seltsam? WebGL hat keine integrierte Funktion zum Rendern von Text. Obwohl der Text die grundlegendste Funktionen erscheint. Wenn es darum geht, es tats?chlich zu rendern, werden die Dinge kompliziert. Wie erkl?ren Sie die immense Menge an Glyphen für jede Sprache? Wie arbeiten Sie mit festen Breiten- oder Proportionalbreiten-Schriftarten? Was tun Sie, wenn Text von Top-to-Bottom, Links nach rechts oder rechts nach links gerendert werden muss? Mathematische Gleichungen, Diagramme, Noten?

Pl?tzlich beginnt es sinnvoll zu sein, warum das Rendering von Text in einer Grafik-API auf niedriger Ebene wie WebGL keinen Platz hat. Das Textrendern ist ein komplexes Problem mit vielen Nuancen. Wenn wir Text rendern wollen, müssen wir kreativ werden. Glücklicherweise haben viele kluge Leute bereits eine breite Palette von Techniken für alle unsere WebGL -Textbedürfnisse entwickelt.

Wir werden bei einigen dieser Techniken in diesem Artikel lernen, einschlie?lich der Erstellung der von ihnen ben?tigten Verm?genswerte und der Verwendung mit ThreeJs, einer JavaScript 3D -Bibliothek, die einen WebGL -Renderer enth?lt. Als Bonus wird jede Technik eine Demo -Pr?sentation von Anwendungsf?llen haben.

Inhaltsverzeichnis

• Ein kurzer Hinweis zum Text au?erhalb von WebGL
• Schriftgeometrien
• Texturen von Text (und Leinwand)
• Bitmap -Schriftarten
• Signierte Entfernungsfelder
• Multi-Channel-Signiertentfernungsfelder
• Erzeugen Sie 3D -Text mit H?henkarten
• Weitere Lesen

Ein kurzer Hinweis zum Text au?erhalb von WebGL

Obwohl es in diesem Artikel nur um Text in WebGL geht, sollten Sie als erstes berücksichtigen, ob Sie mit HMTL -Text oder Leinwand, die über Ihre WebGL -Leinwand überlagert sind, davonkommen k?nnen. Der Text kann nicht mit der 3D -Geometrie als Overlay verschlossen werden, aber Sie k?nnen Styling und Barrierefreiheit in der Box herausholen. Das ist alles, was Sie in vielen F?llen brauchen.

Schriftgeometrien

Eine der h?ufigsten M?glichkeiten, Text zu rendern, besteht darin, die Glyphen mit einer Reihe von Dreiecken zu erstellen, ?hnlich wie ein regul?res Modell. Schlie?lich sind Rendering -Punkte, Linien und Dreiecke eine St?rke von WebGL.

Beim Erstellen einer Zeichenfolge wird jede Glyphe hergestellt, indem die Dreiecke aus einer Schriftart mit triangulierten Punkten gelesen werden. Von dort aus k?nnen Sie den Glyphen ausbauen, um ihn 3D zu machen oder die Glyphen über Matrixoperationen zu skalieren.

Die Schriftgeometrie funktioniert am besten für eine kleine Menge Text. Das liegt daran, dass jede Glyphe viele Dreiecke enth?lt, was dazu führt, dass das Ziehen problematisch werden.

Wenn Sie diesen genauen Absatz rendern, lesen Sie gerade mit der Schriftgeometrie 185.084 Dreiecke und 555.252 Scheitelpunkte. Dies sind nur 259 Buchstaben. Schreiben Sie den gesamten Artikel mit einer Schriftgeometrie, und Ihr Computerventilator kann genauso gut zu einer Flugzeugturbine werden.

Obwohl die Anzahl der Dreiecke nach der Pr?zision der Triangulation und der verwendeten Schrift variiert, ist das Rendern viel Text wahrscheinlich immer ein Engpass bei der Arbeit mit Schriftgeometrie.

So erstellen Sie eine Schriftgeometrie aus einer Schriftart Datei

Wenn es so einfach w?re wie die Auswahl der gewünschten Schriftart und Rendern des Textes. Ich würde diesen Artikel nicht schreiben. Regelm??ige Schriftformate definieren Glyphen mit Bezier -Kurven. Auf der anderen Seite ist das Zeichnen derjenigen in WebGL extrem teuer auf der CPU und auch kompliziert zu tun. Wenn wir Text rendern wollen, müssen wir Dreiecke (Triangulation) aus Bezier -Kurven erstellen.

Ich habe ein paar Triangulationsmethoden gefunden, aber keineswegs sind sie perfekt und sie funktionieren m?glicherweise nicht mit jeder Schriftart. Aber zumindest werden Sie Sie für die Dreischulation Ihrer eigenen Schriften beginnen.

Methode 1: Automatisch und einfach

Wenn Sie dreiJs verwenden, übergeben Sie Ihre Schrift über facetype.js, um die parametrischen Kurven aus Ihrer Schriftart zu lesen und sie in eine .json -Datei zu setzen. Die Font -Geometrie -Funktionen in dreijs kümmern sich darum, die Punkte für Sie zu triangulieren:

 const geometry = new Three.FontGgeometry ("Hallo dort", {Schrift: Schrift, Gr??e: 80})

Alternativ, wenn Sie keine dreiJS verwenden und keine Echtzeit-Triangulation haben müssen. Sie k?nnen sich den Schmerz eines manuellen Vorgangs ersparen, indem Sie dreiJs verwenden, um die Schriftart für Sie zu triangulieren. Anschlie?end k?nnen Sie die Eckpunkte und Indizes aus der Geometrie extrahieren und in Ihrer WebGL -Anwendung der Wahl laden.

Methode 2: Manuell und schmerzhaft

Die manuelle Option zum Triangulieren einer Schriftart feiert zumindest anfangs ?u?erst kompliziert und verworren. Es würde einen ganzen Artikel erfordern, um ihn ausführlich zu erkl?ren. Trotzdem werden wir schnell die Schritte einer grundlegenden Implementierung durchgehen, die ich aus Stackoverflow gepackt habe.

Die Implementierung bricht im Grunde so zusammen:

1. Fügen Sie Opentype.js und EarCut.js zu Ihrem Projekt hinzu.
2. Holen Sie sich Bezier -Kurven aus Ihrer .tff -Schriftart mit OpenType.js.
3. Bezier Kurven in geschlossene Formen umwandeln und durch absteigende Fl?che sortieren.
4. Bestimmen Sie die Indizes für die L?cher, indem Sie herausfinden, welche Formen sich in anderen Formen befinden.
5. Senden Sie alle Punkte mit den Lochindizes als zweiter Parameter an die Ohrmuschel.
6. Verwenden Sie das Ergebnis von Earcut als Indizes für Ihre Geometrie.
7. Atem ausatmen.

Ja, es ist viel. Und diese Implementierung funktioniert m?glicherweise nicht für alle Schriften. Sie werden Sie trotzdem anfangen.

Verwenden von Textgeometrien in dreijs

Zum Glück unterstützt dreijs Textgeometrien au?erhalb der Box. Geben Sie es mit den Bezier -Kurven Ihrer Lieblings -Schriftart und dreijs, die sich in der Laufzeit um die Eckpunkte für Sie kümmern.

 var lader = new Three.Fontloader ();
var Schriftart;
var text = "Hallo Welt"
var lader = new Three.Fontloader ();
loader.load ('fonts/helvetiker_regular.typeface.json', Funktion (Helvetiker) {
  font = helvetiker;
  var Geometry = new Three.textGeometry (Text, {{
    Schriftart: Schriftart,
    Gr??e: 80,
    H?he: 5,
  });
}

Vorteile

• Es ist leicht extrudiert, 3D -Saiten zu erstellen.
• Die Skalierung wird bei Matrixoperationen erleichtert.
• Abh?ngig von der Anzahl der verwendeten Dreiecke bietet es eine hohe Qualit?t.

Nachteile

• Dies skaliert sich aufgrund der hohen Dreieckszahl nicht gut mit gro?en Textmengen. Da jeder Charakter durch viele Dreiecke definiert wird, führt sogar das Erreichen von etwas so kurz wie ?Hello World“ zu 7.396 Dreiecken und 22.188 Eckpunkten.
• Dies eignet sich nicht für gemeinsame Textffekte.
• Anti-Aliasing h?ngt von Ihrem Aliasing nach dem Verarbeitung oder Ihrem Browser-Standard ab.
• Die Skalierung von Dingen k?nnte die Dreiecke zeigen.

Demo: Verblasende Buchstaben

In der folgenden Demo nutzte ich, wie einfach es ist, 3D -Text mit Schriftgeometrien zu erstellen. In einem Scheitelpunkt -Shader wird die Extrusion im Laufe der Zeit erh?ht und verringert. Kombinieren Sie das mit Nebel und Standardmaterial und Sie lassen diese gespenstischen Buchstaben aus und aus der Leere herauskommen.

Beachten Sie, wie mit einer geringen Menge an Buchstaben die Dreiecksmenge bereits in Zehntausenden liegt!

Texturen von Text (und Leinwand)

Das Erstellen von Texttexturen ist wahrscheinlich die einfachste und ?lteste Art, Text in WebGL zu zeichnen. ?ffnen Sie Photoshop oder einen anderen Raster -Grafik -Editor, zeichnen Sie ein Bild mit einem Text darauf und rendern Sie diese Texturen auf ein Quad und Sie sind fertig!

Alternativ k?nnen Sie die Leinwand verwenden, um die Texturen zur Nachfrage zur Laufzeit zu erstellen. Sie k?nnen die Leinwand auch als Textur auf einem Quad rendern.

Abgesehen von der am wenigsten komplizierten Technik des Haufens. Texttexturen und Canvas -Texturen haben den Vorteil, dass nur ein Quad pro Textur oder ein bestimmtes Textstück erforderlich ist. Wenn Sie wirklich wollten, k?nnen Sie die gesamte britische Enzyklop?die auf eine einzelne Textur schreiben. Auf diese Weise müssen Sie nur ein einzelnes Quad, sechs Eckpunkte und zwei Gesichter rendern. Natürlich würden Sie es in einer Skala tun, aber die Idee bleibt immer noch: Sie k?nnen mehrere Glyphen in das gleiche Quad stellen. Sowohl Text-

Für Texttexturen muss der Benutzer alle Texturen herunterladen, aus denen der Text besteht, und sie dann im Speicher aufbewahren. Für Leinwandtexturen muss der Benutzer nichts herunterladen - aber jetzt muss der Computer des Benutzers die gesamte Rasterung zur Laufzeit durchführen, und Sie müssen verfolgen, wo sich jedes Wort in der Leinwand befindet. Au?erdem kann die Aktualisierung einer gro?en Leinwand sehr langsam sein.

So erstellen und verwenden Sie eine Texttextur

Texttexturen haben nichts Besonderes für sie. ?ffnen Sie Ihren bevorzugten Raster -Grafik -Editor, zeichnen Sie einen Text auf die Leinwand und exportieren Sie ihn als Bild. Dann k?nnen Sie es als Textur laden und in einer Ebene zuordnen:

 // Textur laden
Sei Textur =;
const geometry = new Three.PlanEBuffergeometrie ();
const materielle neue drei.meshbasicmaterial ({map: textur});
this.scene.add (neues Netz (Geometrie, Material));

Wenn Ihre WebGL -App über viel Text verfügt, ist das Herunterladen eines riesigen Sprite -Textblatts m?glicherweise nicht ideal, insbesondere für Benutzer in langsamen Verbindungen. Um die Download -Zeit zu vermeiden, k?nnen Sie die Dinge auf Bedarf mit einer Offscreen -Leinwand rastern und dann die Leinwand als Textur probieren.

Lassen Sie uns die Download -Zeit für die Leistung handeln, da das Rastering viel Text mehr als einen Moment dauert.

 Funktion CreateTeTextCanvas (String, Parameter = {}) {
    
    const canvas = document.createelement ("canvas");
    const ctx = canvas.getContext ("2d");
    
    // Bereiten Sie die Schrift vor, um messen zu k?nnen
    lass fontSize = parameters.fontSize || 56;
    ctx.font = `$ {fontsize} px monospace`;
    
    const textMetrics = ctx.measuretext (text);
    
    width = textMetrics.width;
    Sei H?he = fontsize;
    
    // Die Gr??e der Gr??e von Leinwand für die Textgr??e angeht 
    canvas.width = width;
    Canvas.Height = H?he;
    canvas.style.width = width "px";
    Canvas.Style.Height = H?he "PX";
    
    // eine Schriftart erneut anwenden, da die Leinwand ge?ndert wird.
    ctx.font = `$ {fontsize} px monospace`;
    ctx.textalign = parameter.Align || "Zentrum";
    ctx.textbaseline = parameters.baseline || "Mitte";
    
    // Machen Sie die Leinwand zum Einfachheit halber transparent
    ctx.FillStyle = "transparent";
    ctx.fillRect (0, 0, ctx.canvas.width, ctx.canvas.height);
    
    Ctx.FillStyle = Parameter.Color || "Wei?";
    Ctx.FillText (Text, Breite / 2, H?he / 2);
    
    Leinwand zurückgeben;
}

Sei texture = new Three.texture (createTextcanvas ("this is text"));

Jetzt k?nnen Sie die Textur in einem Flugzeug wie dem vorherigen Snippet verwenden. Oder Sie k?nnen stattdessen ein Sprite erstellen.

Alternative k?nnen Sie effizientere Bibliotheken verwenden, um Textur oder Sprites wie Drei-Texten 2D oder Drei-Spraitetext zu erstellen. Und wenn Sie einen Text-Multi-Line-Text m?chten, sollten Sie sich dieses erstaunliche Tutorial ansehen.

Vorteile

• Dies bietet eine gro?artige 1-zu-1-Qualit?t mit statischer Text.
• Es gibt einen niedrigen Scheitelpunkt/Gesicht. Jede Zeichenfolge kann nur sechs Eckpunkte und zwei Gesichter verwenden.
• Es ist einfach, Textur auf einem Quad zu implementieren.
• Es ist ziemlich trivial, Effekte wie Grenzen und Leuchten mit Leinwand oder einem Grafikeditor hinzuzufügen.
• Leinwand erleichtert es einfach, Multi-Line-Text zu erstellen.

Nachteile

• Sieht verschwommen aus, wenn sie nach dem Raster skaliert, gedreht oder transformiert werden.
• On-Non Retina, Text sieht knusprig aus.
• Sie müssen alle verwendeten Saiten rastern. Viele Strings bedeuten viele Daten zum Herunterladen.
• On-Demand-Raster mit Leinwand kann langsam sein, wenn Sie die Leinwand st?ndig aktualisieren.

Demo: Leinwand Textur

Leinwandtexturen funktionieren gut mit einer begrenzten Menge an Text, die sich nicht oft ?ndert. Also habe ich eine einfache Textwand gebaut, wobei die Quads dieselbe Textur wiederverwenden.

Bitmap -Schriftarten

Sowohl Schriftgeometrien als auch Texttexturen haben die gleichen Probleme, die viel Text behandeln. Es ist super ineffizient, eine Million Scheitelpunkte pro Text zu haben, und das Erstellen einer Textur pro Text erstellen nicht wirklich.

Bitmap -Schriftarten l?sen dieses Problem, indem alle einzigartigen Glyphen in eine einzelne Textur rasterisiert werden , die als Texturatlas bezeichnet wird. Dies bedeutet, dass Sie eine bestimmte Zeichenfolge zur Laufzeit zusammenstellen k?nnen, indem Sie für jede Glyphe ein Quad erstellen und den Abschnitt des Texturatlas probieren.

Dies bedeutet, dass Benutzer nur eine einzige Textur für den gesamten Text herunterladen und verwenden müssen. Es bedeutet auch, dass Sie nur so wenig wie ein Quad pro Glyphe rendern müssen:

Das Rendern dieses ganzen Artikels w?re ungef?hr 117.272 Eckpunkte und 58.636 Dreiecke. Das ist 3,1 -mal effizienter als eine Schriftgeometrie, die nur einen einzelnen Absatz macht. Das ist eine enorme Verbesserung!

Da Bitmap die Glyphe in eine Textur rastert, leiden sie unter dem gleichen Problem wie regul?re Bilder. Zoom oder skalieren Sie und Sie sehen ein pixeliges und verschwommenes Chaos. Wenn Sie Text mit einer anderen Gr??e m?chten, sollten Sie eine sekund?re Bitmap mit den Glyphen auf dieser spezifischen Gr??e senden. Oder Sie k?nnen ein Signed Distance Field (SDF) verwenden, das wir im n?chsten Abschnitt abdecken werden.

So erstellen Sie Bitmap -Schriftarten

Es gibt viele Tools, um Bitmaps zu generieren. Hier sind einige der relevanteren Optionen da drau?en:

• Angelcode's BMFONT - Dies ist von den Sch?pfer des Bitmap -Formats.
• Hiero-Dies ist ein Java Open-Source-Tool. Es ist dem BMFont von AngleCode sehr ?hnlich, aber es erm?glicht Ihnen, Texteffekte hinzuzufügen.
• Glyphendesigner - Dies ist eine kostenpflichtige MacOS -App.
• Schuhkarton - Dies ist ein Werkzeug für den Umgang mit Sprites, einschlie?lich Bitmap -Schriftarten.

Wir werden AngleCode's BMFont für unser Beispiel verwenden, weil ich denke, dass es am einfachsten ist, loszulegen. Am Ende dieses Abschnitts finden Sie andere Tools, wenn Sie der Meinung sind, dass es die Funktionalit?t fehlt, nach der Sie suchen.

Wenn Sie die App ?ffnen, sehen Sie einen Bildschirm voller Buchstaben, die Sie verwenden k?nnen. Das Sch?ne daran ist, dass Sie in der Lage sind, nur die Glyphen zu schnappen, die Sie ben?tigen, anstatt griechische Symbole zu senden.

Mit der Seitenleiste der App k?nnen Sie Gruppen von Glyphen ausw?hlen und ausw?hlen.

Bereit zu exportieren? Gehen Sie zu Optionen → Bitmap als . Und fertig!

Aber wir haben uns ein wenig voraus. Vor dem Export finden Sie einige wichtige Einstellungen, die Sie überprüfen sollten.

• Schriftart Einstellungen: Damit k?nnen Sie die Schriftart und Gr??e ausw?hlen, die Sie verwenden m?chten. Der wichtigste Artikel hier ist "Match char Height". Standardm??ig verwendet die Option ?Gr??e“ der App Pixel anstelle von Punkten. Sie werden einen wesentlichen Unterschied zwischen der Schriftgr??e Ihres Grafikeditors und der generierten Schriftgr??e sehen. W?hlen Sie die Optionen "char Height übereinstimmen", wenn Ihre Glyphen sinnvoll sind.
• Exporteinstellungen: Stellen Sie für den Export sicher, dass die Texturgr??e eine Leistung von zwei ist (z. B. 16 × 16, 32 × 32, 64 × 64 usw.). Dann k?nnen Sie bei Bedarf die Filterung ?Linear MIPMAP linear“ nutzen.

Am Ende der Einstellungen sehen Sie den Abschnitt "Dateiformat". Die Auswahl einer der beiden Optionen hier ist in Ordnung, solange Sie die Datei lesen und die Glyphen erstellen k?nnen.

Wenn Sie nach der kleinsten Dateigr??e suchen. Ich habe einen ultra-nichtwissenschaftlichen Test durchgeführt, bei dem ich eine Bitmap aller Low-Case- und Gro?buchstaben lateinamerikaner erstellt habe und jede Option verglichen habe. Für Schriftartdeskriptoren ist das effizienteste Format bin?r .

PNG ist die kleinste Dateigr??e für die Textstruktur.

Natürlich ist es etwas komplizierter als nur Dateigr??en. Um eine bessere Vorstellung davon zu bekommen, welche Option zu verwenden ist, sollten Sie sich mit der Parsing-Zeit und der Laufzeitleistung befassen. Wenn Sie die Vor- und Nachteile jedes Formats kennen m?chten, lesen Sie diese Diskussion.

So verwenden Sie Bitmap -Schriftarten

Das Erstellen von Bitmap -Schriftgeometrie ist etwas mehr involviert als nur eine Textur, da wir die Zeichenfolge selbst konstruieren müssen. Jede Glyphe hat seine eigene H?he und Breite und mildert einen anderen Abschnitt der Textur. Wir müssen ein Quad für jede Glyphe in unserer Saite erstellen, damit wir ihnen die richtigen UVs geben k?nnen, um IT -Glyphen zu probieren.

Sie k?nnen Drei-BMFont-Text in drei Js verwenden, um Zeichenfolgen mit Bitmaps, SDFs und MSDFs zu erstellen. Es kümmert sich um Multi-Line-Text und stapelt alle Glyphen auf eine einzelne Geometrie. Beachten Sie, dass es in einem Projekt von NPM installiert werden muss.

 var createGeometry = Request ('Drei-BMFont-Text')
var loadfont = require ('last-bmfont')

loadfont ('fonts/arial.fnt', function (err, font) {
  // Erstellen Sie eine Geometrie gepackter Bitmap -Glyphen, 
  // Wort auf 300px eingewickelt und rechts ausgerichtet
  var geometry = createGeometry ({{
    Schriftart: Schriftart,
    Text: "Mein Text"
  })
    
  var textureloloader = new Three.TextureloLoader ();
  textureloloader.load ('fonts/arial.png', function (texture) {
    // Wir k?nnen ein einfaches Dreijs -Material verwenden
    var materials = new drei.meshbasicmaterial ({{{
      Karte: Textur,
      transparent: wahr,
      Farbe: 0xaaffff
    })

    // Jetzt mach etwas mit unserem Netz!
    var mesh = new Three.mesh (Geometrie, Material)
  })
})

Verwenden Sie je nachdem, wann immer Ihr Text als volles schwarzes oder volles Wei? gezeichnet wird, die Option Invert.

Vorteile

• Es ist schnell und einfach zu rendern.
• Es ist ein Verh?ltnis von 1: 1 und eine Aufl?sung unabh?ngig.
• Es kann jede Zeichenfolge angesichts der Glyphen rendern.
• Es ist gut für viele Text, die sich oft ?ndern müssen.
• Es funktioniert sehr gut mit einer begrenzten Anzahl von Glyphen.
• Es beinhaltet die Unterstützung für Dinge wie Kerning, Zeilenh?he und Wortvertreibungen zur Laufzeit.

Nachteile

• Es akzeptiert nur eine begrenzte Reihe von Charakteren und Stilen.
• Es erfordert voraberfassende Glyphen und zus?tzliche Beh?lterpackungen, um eine optimale Verwendung zu erhalten.
• Es ist verschwommen und in gro?en Ma?st?ben pixelt und kann auch gedreht oder transformiert werden.
• Es gibt nur einen Quad pro gerendertem Glyphe.

Interaktive Demo: Die leuchtenden Credits

Raster Bitmap -Schriftarten eignen sich hervorragend für Film -Credits, da wir nur wenige Gr??en und Stile ben?tigen. Der Nachteil ist, dass der Text bei reaktionsschnellen Designs nicht gro?artig ist, da er in gr??eren Gr??en verschwommen und pixelnd aussieht.

Für den Mauseffekt erstelle ich Berechnungen, indem ich die Mausposition auf die Gr??e der Ansicht abbilderte und dann den Abstand von der Maus zur Textposition berechnet. Ich rotiere auch den Text, wenn er bestimmte Punkte auf die Z-Achse und die Y-Achse trifft.

Signierte Entfernungsfelder

?hnlich wie Bitmap -Schriftarten sind auch Signed Distance Field (SDF) -Be -Schriftarten ein Texturatlas. Einzigartige Glyphen sind in ein einzelnes ?Texturatlas“ gestapelt, mit dem jede String zur Laufzeit erstellt werden kann.

Anstatt den rasterisierten Glyphen auf der Textur so zu speichern, wie Bitmap -Schriftarten es tun, wird der SDF des Glyphens erzeugt und gespeichert, was eine hohe Aufl?sungsform aus einem Bild mit niedriger Aufl?sung erm?glicht.

Wie polygonale Maschen (Schriftgeometrien) stellen SDFs Formen dar . Jedes Pixel auf einem SDF speichert den Abstand bis zur n?chsten Oberfl?che . Das Zeichen zeigt an, wann immer das Pixel innerhalb oder au?erhalb der Form ist. Wenn das Vorzeichen negativ ist, ist das Pixel im Inneren; Wenn es positiv ist, ist das Pixel drau?en. Dieses Video zeigt das Konzept gut.

SDFs werden auch h?ufig für Raytracing und volumetrisches Rendering verwendet.

Da in einem SDF die Entfernung in jedem Pixel speichert, sieht das Rohergebnis wie eine verschwommene Version der ursprünglichen Form aus. Um die harte Form auszugeben, müssen Sie sie auf 0,5 testen, was der Rand des Glyphs ist. Schauen Sie sich an, wie sich der SDF des Buchstabens ?A“ mit dem regul?ren Rasterbild vergleicht:

Wie ich bereits erw?hnt habe, besteht der gro?e Nutzen von SDF S darin, hochaufl?sende Formen von SDF mit niedriger Aufl?sung zu rendern. Dies bedeutet, dass Sie eine 16 -6 -Schrift SDF erstellen und den Text bis zu 100pt oder mehr skalieren k?nnen, ohne viel Knusprigkeit zu verlieren.

SDFs k?nnen gut skalieren, da Sie die Entfernung mit bilinearer Interpolation fast perfekt rekonstruieren k?nnen. Dies ist eine ausgefallene Art zu sagen, dass wir Werte zwischen zwei Punkten erhalten k?nnen. In diesem Fall gibt uns die bilineare Interpolation zwischen zwei Pixeln auf einer regelm??igen Bitmap-Schrift die Zwischenfarbe, was zu einer linearen Unsch?rfe führt.

Bei einem SDF liefert die bilineare Interpolation zwischen zwei Pixeln den Abstand zwischen der n?chsten Kante. Da diese beiden Pixelabst?nde zun?chst ?hnlich sind, verliert der resultierende Wert nicht viele Informationen über den Glyphen. Dies bedeutet auch, dass die SDF umso genauer und weniger Informationen verloren gehen.

Dieser Prozess ist jedoch mit einer Einschr?nkung verbunden. Wenn die Geschwindigkeits?nderung zwischen den Pixeln nicht linear ist - wie bei scharfen Ecken -, gibt die bilineare Interpolation einen ungenauen Wert, was zu abgerundeten oder abgerundeten Ecken bei der Skalierung eines SDF -SDF führt.

Abgesehen davon, dass die Texturseite st??t, besteht die einzige wirkliche L?sung darin, Multi-Channel-SDF-S zu verwenden, was wir im n?chsten Abschnitt abdecken werden.

Wenn Sie einen tieferen Eintauchen in die Wissenschaft hinter SDF S einlassen m?chten, lesen Sie die Master -These des Chris Green (PDF) zu diesem Thema.

Vorteile

• Sie erhalten die Knusprigkeit, auch wenn sie gedreht, skaliert oder transformiert werden.
• Sie sind ideal für dynamischen Text.
• Sie bieten eine gute Qualit?t zu Gr??enverh?ltnis. Eine einzelne Textur kann verwendet werden, um winzige und riesige Schriftgr??en zu erzielen, ohne viel Qualit?t zu verlieren.
• Sie haben eine niedrige Scheitelpunktzahl von nur vier Scheitelpunkten pro Glyphen.
• Antialiasing ist kostengünstig, ebenso wie Grenzen, Drop -Schatten und alle m?glichen Effekte mit Alpha -Tests.
• Sie sind kleiner als MSDF S (was wir ein bisschen sehen werden).

Nachteile

• Das kann zu abgerundeten oder abgebrochenen Ecken führen, wenn die Textur über ihre Aufl?sung hinaus untersucht wird. (Auch hier werden wir sehen, wie MSDF das verhindern kann.)
• Sie sind in winzigen Schriftgr??en unwirksam.
• Sie k?nnen nur mit monochromen Glyphen verwendet werden.

Multi-Channel-Signiertentfernungsfelder

MSDF-Schriftarten (Multi-Channel Signed District Field Field) sind ein bisschen wie ein Schluss und eine ziemlich jüngste Variation von SDF S, die mit allen drei Farbkan?len nahezu perfekte Ecken erzeugen kann. Sie sehen zun?chst ziemlich um, aber lassen Sie sich nicht davon abschlie?en, weil sie einfach zu bedienen sind, als sie erscheinen.

Die Verwendung aller drei Farbkan?le führt zu einem schwereren Bild, aber das verleiht MSDFS ein weitaus besseres Verh?ltnis von Qualit?t zu Raum als normale SDF-S. Das folgende Bild zeigt den Unterschied zwischen einem SDF und einem MSDF für eine Schriftart, die bis zu 50px skaliert wurde.

Wie ein regul?rer SDF speichert ein MSDF den Abstand bis zur n?chsten Kante, ?ndert jedoch die Farbkan?le, wenn es eine scharfe Ecke findet. Wir erhalten die Form, indem wir zeichnen, wo zwei Farbkan?le oder mehr zustimmen. Obwohl es ein bisschen mehr Technik beteiligt ist. Schauen Sie sich die Readme für diesen MSDF -Generator an, um eine gründlichere Erkl?rung zu erhalten.

Vorteile

• Sie unterstützen ein h?heres Qualit?ts- und Raumverh?ltnis als SDF s. und sind oft die bessere Wahl.
• Sie halten scharfe Ecken, wenn sie skaliert werden.

Nachteile

• Sie k?nnen kleine Artefakte enthalten, aber diese k?nnen vermieden werden, indem die Texturgr??e des Glyphs gesto?en wird.
• Sie müssen zur Laufzeit den Median der drei Werte filtern, was etwas teuer ist.
• Sie sind nur mit monochromen Glyphen kompatibel.

So erstellen Sie MSDF -Schriftarten

Der schnellste Weg, um eine MSDF-Schriftart zu erstellen, besteht darin, das MSDF-BMFONT-Web-Tool zu verwenden. Es verfügt über die meisten relevanten Anpassungsoptionen und erledigt die Aufgabe in Sekunden lang im Browser. Alternativ gibt es eine Reihe von Google-Schriftarten, die bereits von den Leuten bei A-Frame in MSDF konvertiert wurden.

Wenn Sie auch SDFs oder Ihre Schrift generieren m?chten, erfordert es dank einiger problematischer Glyphen eine besondere Optimierung. Die MSDF-BMFONT-XML-CLI bietet Ihnen eine breite Palette von Optionen, ohne die Dinge zu verwirrend zu machen. Schauen wir uns an, wie Sie es verwenden würden.

Zun?chst müssen Sie es weltweit von NPM installieren:

 NPM installieren MSDF-BMFONT-XML -G

Geben Sie als n?chstes eine .ttf -Schriftart mit Ihren Optionen an:

 msdf-bmfont ./open-sans-black.ttf-output-type JSON--Font-Gr??e 76 --Texture-Size 512,512

Diese Optionen sind es wert, ein bisschen in ein bisschen zu graben. W?hrend MSDF-BMFONT-XML viele M?glichkeiten bietet, Ihre Schriftart zu optimieren, gibt es wirklich nur einige Optionen, die Sie wahrscheinlich korrekt ein MSDF erstellen müssen:

• -t oder -Feldtyp <msdf oder sdf>: msdf-bmfont-xml generiert standardm??ig MSDFS-Glyphenatlasen. Wenn Sie stattdessen ein SDF generieren m?chten, müssen Sie diese mit -T -SDF angeben.</msdf>
• -f oder-output-Typ : MSDF-BMFONT-XML generiert eine XML-Schriftart, die Sie zur Laufzeit an JSON analysieren müssten. Sie k?nnen diesen Parsen -Schritt vermeiden, indem Sie JSON sofort exportieren.
• -S,-Font-Gr??e : Einige Artefakte und Unvollkommenheiten k?nnen angezeigt werden, wenn die Schriftgr??e super klein ist. Wenn Sie die Schriftgr??e erh?hen, wird sie die meiste Zeit los. Dieses Beispiel zeigt eine kleine Unvollkommenheit im Buchstaben ?M.“
• -M oder-texturgr??e : Wenn nicht alle Ihre Zeichen in die gleiche Textur passen, wird eine zweite Textur erstellt, um sie einzubauen. Es sei denn, Sie versuchen, einen mehrseitigen Glyph-Atlas zu nutzen, ich empfehle, die Texturgr??e so zu erh?hen, dass es auf einem Textur auf einem Textur passt, um extra Arbeit zu vermeiden.

Es gibt andere Tools, die dazu beitragen, MSDF- und SDF -Schriftarten zu generieren:

• MSDF-BMFONT-Web: Ein Web-Tool zum Erstellen von MSDFS (jedoch nicht SDFs) schnell und einfach
• MSDF-BMFONT: Ein Knoten-Tool mit Kairo- und Knotencanvas
• MSDFGen: Das ursprüngliche Befehlszeilen -Tool, aus dem alle anderen MSDF -Tools basieren
• Hiero: Ein Werkzeug zum Generieren von Bitmaps und SDF -Schriftarten

So verwenden Sie SDF- und MSDF -Schriftarten

Da SDF- und MSDF-Schriftarten auch Glyphenatlasen sind, k?nnen wir wie für Bitmap-Schriftarten Drei-BMFont-Text verwenden. Der einzige Unterschied besteht darin, dass wir den Glyphen von den Abstandsfeldern mit einem Fragment -Shader bekommen müssen.

So funktioniert das für SDF -Schriftarten. Da unser Entfernungsfeld einen Wert von mehr als 0,5 au?erhalb unseres Glyphex und weniger als 0,5 in unserem Glyphen hat, müssen wir in einem Fragment -Shader auf jedem Pixel einen Alpha -Test haben, um sicherzustellen, dass wir Pixel nur mit einer Entfernung von weniger als 0,5 rendern, wodurch nur das Innere der Glyphen rendert.

 const fragmentshader = `

  einheitliche VEC3 -Farbe;
  einheitliche Sampler2d -Karte;
  Variierender VEC2 VUV;
  
  void main () {
    vec4 texcolor = texture2d (map, vuv);
    // rendern nur die Innenseite der Glyphe.
    float alpha = Schritt (0,5, texcolor.a);

    GL_FRAGCOLOR = VEC4 (Farbe, Alpha);
    if (gl_fragcolor.a <p> In ?hnlicher Weise k?nnen wir die Schriftart aus dem Drei-BMFont-Text importieren, der mit Antialiasing aus dem Box ausgestattet ist. Dann k?nnen wir es direkt auf einem Rawshadermaterial verwenden:</p><pre rel="JavaScript"> sei sdfShader = require ('Drei-bmfont-text/saders/sdf');
Sei Material = new Three.rawShadermaterial (msdfshader ({{{
  Karte: Textur,
  transparent: wahr,
  Farbe: 0x000000
}));

MSDF -Schriftarten sind etwas anders. Sie stellen scharfe Ecken durch die Kreuzungen zweier Farbkan?le wieder her. Zwei oder mehr Farbkan?le müssen sich darauf einigen. Bevor wir Alpha -SMS durchführen, müssen wir den Median der drei Farbkan?le bekommen, um zu sehen, wo sie zustimmen:

 const fragmentshader = `

  einheitliche VEC3 -Farbe;
  einheitliche Sampler2d -Karte;
  Variierender VEC2 VUV;

  float median (float r, float g, float b) {
    return max (min (r, g), min (max (r, g), b));
  }
  
  void main () {
    vec4 texcolor = texture2d (map, vuv);
    // rendern nur die Innenseite der Glyphe.
    float sigdist = median (texcolor.r, texcolor.g, texcolor.b) - 0.5;
    float alpha = Schritt (0,5, sigdist);
    GL_FRAGCOLOR = VEC4 (Farbe, Alpha);
    if (gl_fragcolor.a <p> Auch hier k?nnen wir mit seinem MSDFSHADER, der auch mit Antialiasing in der Box ausgestattet ist, aus dem Drei-BMFont-Text importieren. Dann k?nnen wir es direkt auf einem Rawshadermaterial verwenden:</p><pre rel="JavaScript"> msdfShader = require ('Drei-BMFont-Text/Shaders/msdf');
Sei Material = new Three.rawShadermaterial (msdfshader ({{{
  Karte: Textur,
  transparent: wahr,
  Farbe: 0x000000
}));

Demo: Star Wars Intro

Das Star Wars Drawl Intro ist ein gutes Beispiel, bei dem MSDF- und SDF -Schriftarten gut funktionieren, da der Effekt den Text in mehreren Gr??en ben?tigt. Wir k?nnen einen einzelnen MSDF verwenden und der Text sieht immer scharf aus! Leider unterstützt drei BM-FONT noch keinen gerechten Text. Die Anwendung der linken Rechtfertigung würde eine ausgewogenere Pr?sentation erm?glichen.

Für den leichten S?beleffekt raycastiere eine unsichtbare Ebene die Gr??e der Ebene, zeichne auf eine Leinwand, die die gleiche Gr??e hat, und die Probenahme dieser Leinwand, indem die Szeneposition zu den Texturkoordinaten abgebildet wird.

Bonus -Tipp: Erzeugen Sie 3D -Text mit H?henkarten

Abgesehen von Schriftgeometrien erzeugen alle Techniken, die wir abgedeckt haben, Strings oder Glyphen auf einem einzelnen Quad. Wenn Sie 3D -Geometrien aus einer flachen Textur bauen m?chten, ist es am besten, eine H?henkarte zu verwenden.

Eine H?henkarte ist eine Technik, bei der die Geometrieh?he mit einer Textur gesto?en wird. Dies wird normalerweise verwendet, um Berge in Spielen zu generieren, es stellt sich jedoch auch als nützlicher Rendering -Text heraus.

Die einzige Einschr?nkung ist, dass Sie viele Gesichter ben?tigen, damit der Text glatt aussieht.

Weitere Lesen

Unterschiedliche Situationen erfordern unterschiedliche Techniken. Nichts, was wir hier gesehen haben, ist eine Silberkugel und alle haben ihre Vor- und Nachteile.

Es gibt viele Tools und Bibliotheken, die dazu beitragen, den WebGL -Text optimal zu nutzen, von denen die meisten tats?chlich von au?erhalb von WebGL stammen. Wenn Sie weiter lernen m?chten, empfehle ich Ihnen dringend, über WebGL hinauszugehen und einige dieser Links zu lesen:

• Wie viele M?glichkeiten, eine Schrift in drei Js zu laden
• Fallstudie zu einer Textkampagne von Text Heavy Spotify
• Interessante Gespr?che über MSDFs
• Weitere Schriftarten -Rendering -Techniken
• Rendering Vector Art (Glyphen) an der GPU
• Wie Freetype das Rendering des Textes
• Erzeugen Sie interessante Effekte mit Bitmaps -Schriftarten

Das obige ist der detaillierte Inhalt vonTechniken zum Rendern von Text mit WebGL. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!