Rendering del testo in WebVR

Visualizza il sito

In (https://with.in/) è disponibile una piattaforma per lo storytelling in realtà virtuale. Perciò, quando il team ha sentito parlare di WebVR in il 2015 ci interessava fin da subito il suo potenziale. Oggi, questo interesse si manifesta in un sottodominio univoco della nostra piattaforma web, https://vr.with.in/. Chiunque disponga di un browser abilitato per la VR può visita il sito, fai clic su un pulsante e indossa un paio di cuffie per immergerti nella nostra una gamma di film VR.

Attualmente è incluso, a titolo esemplificativo, Chrome su Daydream View. Per le informazioni sul dispositivo e sul display https://webvr.info/.

Come altri ambienti di rendering specifici per la realtà virtuale, il web si basa principalmente su una rappresentazione tridimensionale di una scena. Questo la scena include una videocamera, la tua prospettiva e un numero qualsiasi di oggetti. Per facilitare la gestione questa scena, la videocamera e gli oggetti che usiamo in una libreria chiamata Three.js, che utilizza l'elemento <canvas> per generare il rendering nella GPU del computer. Esistono molti componenti aggiuntivi di Three.js utili per rendi visibile la scena in WebVR. I due principali sono THREE.VREffect per creare un'area visibile per ogni occhio THREE.VRControls per tradurre la prospettiva (ad es.la rotazione e la posizione del montato sulla testa) in modo convincente nella scena. Ci sono molti esempi come implementare questa funzionalità. Consulta le Esempi di WebVR Three.js per scoprire come iniziare.

Man mano che approfondiremo l'esplorazione di WebVR, abbiamo riscontrato un problema. Se guardiamo a livello di contenuti del web, il testo ne è parte integrante. Anche se la maggioranza dei nostri contenuti è basato su video, se visiti I contenuti sono circondati da testo all'interno del sito. l'interfaccia utente e ulteriori informazioni su un film o film correlati sono tutti costruito con il testo. Inoltre, tutto questo testo viene creato nel DOM. Le nostre Le esplorazioni WebVR e https://vr.with.in/ sono tutte disponibili <canvas>.

Quali sono le opzioni a mia disposizione?

Fortunatamente, c'è del lavoro in corso per renderlo possibile. Infatti nella nostra ricerca abbiamo individuato diversi modi efficaci per eseguire il rendering del testo su un elemento <canvas>. Di seguito è riportata una matrice di alcuni modelli con pro e contro per ognuna:

La nostra decisione: carattere bitmap SDF

Il canvas 2D con ctx.fillText() può eseguire operazioni di wrapping di testo, spaziatura tra lettere e righe altezza, ma l'overflow viene tagliato e il testo sarà sfocato se aumenti lo zoom davvero lontano. Potresti aumentare le dimensioni della texture della tela, ma potresti raggiungere un valore superiore di dimensioni o prestazioni della texture potrebbero risentirne se la texture è troppo grande.

Il testo 3D estruso è essenzialmente uguale al testo vettoriale triangolare, ma con ed eventualmente una superficie smussata, in modo che abbia almeno il doppio della geometria. Una di potrebbero funzionare in piccole dosi per titoli o loghi, ma non offrirebbero bene per grandi quantità di testo e nessuno dei due presenta caratteristiche tipografiche.

I caratteri bitmap utilizzano un quadrato (due triangoli) per carattere, quindi ne utilizzano meno e le prestazioni migliori di vettori triangolari. Sono ancora basati su raster poiché utilizzano uno sprite di mappa di texture, ma con un SDF sono fondamentalmente indipendenti dalla risoluzione, quindi hanno un aspetto migliore rispetto a una 2D trama canvas. "Matt DesLauriers" tre-bmfont-text include anche caratteristiche tipografiche affidabili per la funzione di testo a capo, spaziatura tra le lettere, altezza delle righe e allineamento. L'overflow non viene tagliato. Tipo di carattere la dimensione è controllata attraverso la scala. Abbiamo scelto questo percorso perché ci ha permesso le migliori opzioni per il design mantenendo prestazioni sempre elevate. Purtroppo non è stato così facile da implementare, così esamineremo la procedura nella speranza di aiutare altri che lavorano in WebVR.

1. Genera un carattere bitmap (.png + .fnt)

Hiero è un pacchetto di caratteri bitmap. eseguito con Java. La documentazione di Hiero non spiega davvero come senza dover seguire un complicato processo di compilazione. Innanzitutto, installa Java non l'hai ancora fatto. Quindi, se fai doppio clic sul file runnable-hiero.jar apri Hiero, prova a eseguirlo con questo comando nella console:

java -jar runnable-hiero.jar

Quando Hiero è in esecuzione, apri un carattere desktop .ttf o .otf e inserisci eventuali caratteri da includere, cambia il rendering in Java per abilitare gli effetti aumenta la dimensione in modo che i caratteri riempiano l'intera cache dei glifo quadrato, aggiungi un effetto di campo di distanza, regola la scala e la diffusione del campo della distanza. La valore di scala è come una risoluzione. Più alto è, meno sfocato sarà, ma più tempo impiegherà Hiero per il rendering dell'anteprima. Quindi salva il carattere bitmap. Genera un font bitmap costituito da un'immagine .png e un File di descrizione del carattere AngelCode .fnt.

2. Converti AngelCode in JSON

Ora che il carattere bitmap è stato generato, dobbiamo caricarlo nella nostra app JavaScript del sito di Matt DesLauriers pacchetto npm load-bmfont.

Potremmo inserire nel browser load-bmfont e usarlo sul front-end, ma verrà eseguito load-bmfont.js con Nodo per convertire e salvare il codice AngelCode .fnt di Hiero in un File.json:

npm install
node load-bmfont.js

Ora possiamo bypassare load-bmfont ed eseguire semplicemente una richiesta XHR (XMLHttpRequest) sulla File dei caratteri .json.

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. Testo tre bmfont di Browserify

Una volta caricato il font, il testo a tre bmfont di Matt si occupa e riposare. Poiché non utilizziamo Node per la nostra app, useremo browserify three-bmfont-text.js in un file three-bmfont-text-bundle.js utilizzabile,

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

4. Shar SDF

Imposta i cursori afwidth e soglia su On vr.with.in/archive/text-sdf-bitmap/ per vedere l'effetto dello shar del campo della distanza con firma.

5. Utilizzo

Per praticità, ho creato un Classe wrapper TextBitmap per il testo a tre bmfont browser.

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

Creare una richiesta XHR per il file del carattere .json e creare un oggetto di testo nel callback:

var bmtext = new TextBitmap({ options });

Per modificare il testo:

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

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

Il file .png del carattere bitmap viene caricato con THREE.TextureLoader in text-bitmap.js

TextBitmap include anche una hitbox invisibile per l'interazione raycast tre.js. tramite mouse, fotocamera o controller di movimento con rilevamento manuale come Oculus Touch o i controller Vive. Le dimensioni della hitbox si aggiornano automaticamente quando modifichi il testo le opzioni di CPU e memoria disponibili.

Bmtext.group viene aggiunto alla scena3.js. Se hai bisogno di accedere ai bambini / Object3D, il grafico della scena per il testo ha questo aspetto:

6. Elimina il json e modifica gli xoffset

Se la crenatura ha un aspetto spento, potrebbe essere necessario modificare gli xoffset nel file JSON. Incolla il file json in Jsbeautifier.org per ottenere un la versione non minimizzata del file.

xoffset è essenzialmente una crenatura globale per un carattere. La crenatura è per due caratteri specifici che appaiono uno accanto all'altro. I valori predefiniti nel campo che in realtà non fanno la differenza e sarebbe troppo noioso modifica, in modo da poter svuotare l'array per ridurre le dimensioni del file del json. Poi e modificare gli xoffsets per la crenatura.

Per prima cosa devi stabilire quali caratteri si abbinano a un determinato ID carattere nella json. In three-bmfont-text-bundle.js, inserisci console.log dopo la riga 240:

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

Digita poi nel campo di testo dat.gui https://vr.with.in/archive/text-sdf-bitmap/ e controlla nella console l'ID corrispondente di un carattere.

Ad esempio, nel nostro font bitmap, "j" è costantemente troppo a destra. È L'ID carattere è 106. Quindi, trova "id": 106 nel file JSON e modifica il valore xoffset da -1 a -10.

7. Layout

Se hai più blocchi di testo e vuoi che scorrano dall'alto verso il basso, ad esempio HTML, tutti gli elementi devono essere posizionati manualmente, come nel caso del posizionamento assoluto ogni elemento dom autonomamente con CSS. Vi immagini di fare questa operazione in CSS?

    * { position: absolute; }

Questo è il layout del testo in 3D. Nella visualizzazione dei dettagli: titolo, autore, descrizione e durata sono entrambi un nuovo oggetto TextBitmap con il proprio stili, colore, scala ecc.:

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;

Questo presuppone che l'origine locale di ogni gruppo TextBitmap sia verticalmente allineato con la parte superiore della mesh TextBitmap (vedi centratura in text-bitmap.js aggiornamento). Se in seguito modifichi il testo di uno di questi oggetti e l'altezza alle modifiche dell'oggetto, dovrai ricalcolare anche queste posizioni. Qui, viene modificata solo la posizione y del testo, ma un'opportunità per lavorare Il 3D è che possiamo spingere e trascinare il testo nella direzione z e ruotare intorno agli assi x, y e z.

Conclusione

Testo e layout in WebVR hanno ancora molta strada da fare prima che siano semplici ampiamente utilizzate come HTML e CSS. Ma esistono soluzioni di lavoro e puoi fare molto di più in WebVR rispetto a una pagina web HTML tradizionale. WebVR esiste oggi. Probabilmente domani ci saranno strumenti migliori. Nel frattempo, provala e dell'esperimento. Lo sviluppo senza un framework onnipresente porta a una maggiore progetti ed è emozionante.