Techniken zum Rendern von Text mit WebGL

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 .

Schriftbeschreibungsformat	Dateigröße
Binär	3 kb
Roher Text	11 kb
Xml	12 kb

Texturformat	Dateigröße
Png	7 kb
Targa	64 kb
DirectDraw -Oberfläche	65 kb

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!