Text in WebVR rendern

Zur Website

Innerhalb von (https://with.in/) ist eine Plattform für Storytelling in Virtual Reality. Als das Team beim ersten Mal von WebVR erfuhr, 2015 waren wir unmittelbar am Potenzial interessiert. Heute geht es darum, sich in einer eindeutigen Subdomain unserer Webplattform niederschlägt, https://vr.with.in/. Jeder mit einem VR-fähigen Browser kann klicken Sie auf eine Schaltfläche und setzen Sie ein Headset auf. Virtual-Reality-Filmen.

Dazu gehört unter anderem Chrome in Daydream View. Für Informationen zu deinem Gerät und deinem Head-Mounted Display https://webvr.info/.

Wie andere Virtual-Reality-spezifische Rendering-Umgebungen hauptsächlich auf einer dreidimensionalen Darstellung einer Szene. Dieses Szene enthält eine Kamera, Ihre Perspektive und beliebig viele Objekte. Zum Verwalten für diese Szene, die Kamera und alle Objekte. Three.js, bei der das Element <canvas> genutzt wird, auf der GPU Ihres Computers aus. Es gibt viele nützliche Three.js-Add-ons für um Ihre Szene in WebVR anzeigen zu lassen. Die beiden wichtigsten sind THREE.VREffect zum Erstellen eines Darstellungsbereichs für jedes Auge THREE.VRControls zum Übersetzen der Perspektive (z. B. die Drehung und Position des Head-Mount Display) überzeugen. Es gibt viele Beispiele für wie dies umgesetzt werden kann. In der Three.js-WebVR-Beispiele .

Bei der weiteren Untersuchung von WebVR stießen wir auf ein Problem. Wenn wir uns auf die Inhalte des Webs bezieht, ist Text ein wesentlicher Bestandteil davon. Obwohl die Mehrheit Contents auf Videos basieren. Innerhalb der Website umgibt der Text den Inhalt. die Benutzeroberfläche und zusätzliche Informationen über einen Film oder ähnliche Filme aus Text konstruiert sein. Darüber hinaus wird dieser gesamte Text im DOM erstellt. Unsere Explorative Datenanalysen über WebVR und https://vr.with.in/ sind verfügbar <canvas>

</ph> <ph type="x-smartling-placeholder">

Welche Optionen habe ich?

Zum Glück gibt es noch viel zu tun, um dies zu ermöglichen. Unsere Studien zeigen, haben wir eine Reihe von effektiven Möglichkeiten gefunden, Text in einer dreidimensionalen Darstellung zu rendern. für ein <canvas>-Element. Unten sehen Sie eine Matrix mit einigen jeweils mit den jeweiligen Vor- und Nachteilen:

Unsere Entscheidung: Bitmap-Schriftart für strukturierte Datendateien

Auf 2D-Canvas lassen sich mit ctx.fillText() Textumbruch, Zeichenabstand und Linien festlegen. Höhe, aber der Überlauf wird abgeschnitten und der Text wird verschwommen dargestellt, wenn Sie wirklich heranzoomen weit entfernt. Sie könnten die Größe der Canvas-Textur vergrößern, aber kann die Texturgröße oder die Leistung beeinträchtigt werden, wenn die Textur zu groß ist.

Extrudierter 3D-Text ist im Wesentlichen dasselbe wie triangulierter Vektortext, allerdings mit Tiefe und eventuell eine Abschrägung, sodass sie mindestens doppelt so viel Geometrie aufweist. Entweder könnten diese zwar in kleinen Dosen für Titel oder Logos funktionieren, für große Textmengen geeignet ist und keiner von beiden über typografische Merkmale verfügt.

</ph>

In Bitmap-Schriftarten wird ein Quad (zwei Dreiecke) pro Zeichen verwendet, sodass weniger Geometrie und funktionieren besser als triangulierten Vektoren. Sie basieren weiterhin auf Rastern, da dafür ein Sprite aus einer Texturkarte verwendet wird, aber mit einer strukturierten Datendatei. Sie sind im Grunde auflösungsunabhängig und sehen besser aus als 2D- Canvas-Textur. Matt DesLauriers 3-bmfont-text umfasst auch zuverlässige typografische Funktionen für den Textumbruch, Zeichenabstand, Zeilenhöhe und Ausrichtung. Der Überlauf wird nicht abgeschnitten. Schriftart wird durch den Maßstab gesteuert. Wir haben uns für diese Route entschieden, die besten Designoptionen zu wählen, aber dennoch leistungsstark bleiben. Leider war es nicht so einfach zu implementieren. Wir gehen also die einzelnen Schritte durch, damit wir anderen helfen können, Entwickelnden für WebVR.

1. Bitmapschriftart generieren (.png + .fnt)

</ph>

</ph> .

Hiero ist ein Bitmap-Font Packing. das mit Java ausgeführt wird. Die Hiero-Dokumentation erklärt nicht wirklich, wie Sie ohne einen komplizierten Build-Prozess zu durchlaufen. Installieren Sie zunächst Java, die Sie noch nicht getan haben. Wenn ein Doppelklick auf „runnable-hiero.jar“ Hiero öffnen und versuchen, es mit folgendem Befehl in der Console auszuführen:

java -jar runnable-hiero.jar

Sobald Hiero ausgeführt wird, öffnen Sie eine .ttf- oder .otf-Desktop-Schriftart und geben enthalten sein sollen, ändern Sie das Rendering zu Java, um Effekte zu aktivieren. sodass die Zeichen das gesamte Glyphen-Cache-Quadrat ausfüllen. einen Distanzfeldeffekt hinzufügen, den Maßstab und die Streuung des Distanzfelds anpassen. Die Skalierungswert ist wie eine Auflösung. Je höher der Wert, desto weniger verschwommen ist desto länger dauert es jedoch, bis Hiero die Vorschau rendert. Speichern Sie dann Ihr Bitmap-Schriftart. Es generiert eine Bitmapschriftart aus einem PNG-Bild und einem Beschreibungsdatei für die Schriftart AngelCode (.fnt)

2. AngelCode in JSON konvertieren

Nachdem die Bitmapschriftart generiert wurde, müssen wir sie in unsere JavaScript-Anwendung mit Matt DesLauriers' load-bmfont npm-Paket auf.

Wir könnten „load-bmfont“ mit einem Browser im Frontend verwenden, aber stattdessen wird ausgeführt load-bmfont.js mit Knoten zum Konvertieren und Speichern der AngelCode-.fnt-Datei von Hiero in eine JSON-Datei:

npm install
node load-bmfont.js

</ph>

Jetzt können wir "load-bmfont" umgehen und einfach eine XHR-Anfrage (XMLHttpRequest) für die .json-Schriftartdatei herunter.

var r = new XMLHttpRequest();
r.open('GET', 'fonts/roboto/bitmap/roboto-bold.json');

r.onreadystatechange = function() {
    if (r.readyState === 4 && r.status === 200) {
    setup(JSON.parse(r.responseText));
    }
};

r.send();

function setup(font) {
    // pass font into TextBitmap object
}

3. Browserify 3-BMfont-Text

Sobald die Schriftart geladen ist, kümmert sich Matts drei-bmfont-text um die Ruhe. Da wir Node nicht für unsere eigene Anwendung verwenden, Browserify three-bmfont-text.js in ein nutzbares three-bmfont-text-bundle.js

npm install -g browserify
browserify three-bmfont-text.js -o three-bmfont-text-bundle.js

4. SDF-Shader

Passen Sie die Schieberegler afwidth und threshold an. vr.with.in/archive/text-sdf-bitmap/ um die Auswirkungen des Feld-Shaders mit Vorzeichen zu sehen.

5. Nutzung

Zur Vereinfachung habe ich eine TextBitmap-Wrapper-Klasse für den mit dem Browser markierten "3-bmfont-Text".

</ph>

<script src="three-bmfont-text-bundle.js"></script>
<script src="sdf-shader.js"></script>
<script src="text-bitmap.js"></script>

Erstellen Sie eine XHR-Anfrage für die JSON-Schriftartdatei und erstellen Sie ein Textobjekt im Callback:

var bmtext = new TextBitmap({ options });

So ändern Sie den Text:

bmtext.text = 'The quick brown fox jumps over the lazy dog.';

scene.add( bmtext.group );
hitBoxes.push( bmtext.hitBox );

Die PNG-Datei der Bitmapschrift wird mit DREI .TextureLoader in text-bitmap.js geladen.

TextBitmap enthält außerdem eine unsichtbare Hitbox für Three.js-Raycast-Interaktion per Maus, Kamera oder per Handbewegungs-Controller wie Oculus Touch oder die Vive-Controller. Die Größe der Hitbox wird automatisch aktualisiert, wenn Sie den Text ändern. Optionen.

Bmtext.group wird zur 3.js-Szene hinzugefügt. Zugriff auf die untergeordneten Elemente / Object3Ds enthält, sieht das Szenendiagramm für den Text wie folgt aus:

6. Minimieren von JSON und Ändern von Xoffsets

Wenn die Unterschneidung nicht funktioniert, müssen Sie möglicherweise die xoffsets in der JSON-Datei bearbeiten. Einfügen die JSON-Datei in Jsbeautifier.org ein, um eine nicht minimierte Version der Datei.

xoffset ist im Wesentlichen eine globale Unterschneidung für ein Zeichen. Unterschneidung ist für zwei Zeichen, die nebeneinander stehen. Die Standardwerte in der Spalte Unterschneidungs-Array keinen Unterschied machen. Es wäre zu mühsam, bearbeiten, sodass Sie das Array leeren können, um die Dateigröße der JSON-Datei zu verringern. Dann die xoffsets für die Unterschneidung bearbeiten.

Zunächst müssen Sie herausfinden, welche Zeichen zu welcher Zeichen-ID im Feld JSON. Geben Sie in three-bmfont-text-bundle.js Folgendes ein: Fügen Sie console.log nach Zeile 240 ein:

    var id = text.charCodeAt(i)
    // console.log(id);

Geben Sie dann auf der linken Seite https://vr.with.in/archive/text-sdf-bitmap/ und suchen Sie in der Konsole nach der entsprechenden ID eines Zeichens.

In unserer Bitmapschriftart ist beispielsweise „j“, immer zu weit nach rechts. Das Die Zeichen-ID lautet 106. Suchen Sie in der JSON-Datei nach "id": 106 und ändern Sie den xoffset-Wert von „-1“. bis -10.

7. Layout

Wenn Sie mehrere Textblöcke haben und dieser von oben nach unten verläuft, HTML muss alles manuell positioniert werden, ähnlich wie bei der absoluten Positionierung. mit CSS in jedes Domain-Element ein. Können Sie sich das in CSS vorstellen?

    * { position: absolute; }

So ist das Textlayout in 3D. In der Detailansicht: Titel, Autor, Beschreibung und Dauer sind jeweils ein neues TextBitmap-Objekt mit eigenen Stile, Farbe, Maßstab usw.:

author.group.position.y = title.group.position.y - title.height - padding;
description.group.position.y = author.group.position.y - author.height - padding;
duration.group.position.y = description.group.position.y - description.height - padding;

Dabei wird angenommen, dass der lokale Ursprung jeder TextBitmap-Gruppe vertikal ist. ausgerichtet an der Oberseite des TextBitmap-Mesh-Netzwerks (siehe Zentrierung in text-bitmap.js Update). Wenn Sie später den Text für eines dieser Objekte ändern, Änderungen dieser Objekte müssen Sie diese Positionen ebenfalls neu berechnen. Hier Es wird nur die Y-Position des Textes geändert, Bei 3D können wir den Text in z-Richtung schieben und ziehen sowie um die x-, y- und z-Achse.

Fazit

Text und Layout in WebVR sind noch lange nicht so einfach und häufig als HTML und CSS verwendet. Es gibt jedoch funktionierende Lösungen, als bei einer herkömmlichen HTML-Webseite. WebVR existiert bereits. Morgen gibt es vermutlich bessere Tools. Probieren Sie es bis dahin aus und zu testen. Die Entwicklung ohne ein universelles Framework führt zu und das ist spannend.