Renderowanie tekstu w WebVR

Wyświetl stronę

Wewnątrz (https://with.in/) to platforma do marketingu narracyjnego: do rzeczywistości wirtualnej. Gdy zespół usłyszał o WebVR Rok 2015 od razu interesował nas jego potencjał. Dzisiaj to zainteresowanie pojawia się w unikalnej subdomenie naszej platformy internetowej, https://vr.with.in/. Każda osoba z przeglądarką z obsługą rzeczywistości wirtualnej może aby wejść na stronę, kliknąć przycisk i założyć zestaw słuchawkowy, aby poznać z serii filmów VR.

Dziś jest to m.in. Chrome w Daydream View. Dla: informacje o urządzeniu i wyświetlaczu zamontowanym na głowie, https://webvr.info/.

Podobnie jak w przypadku innych środowisk renderowania stron internetowych, polega głównie na trójwymiarowym odzwierciedleniu sceny. Ten może mieć aparat, perspektywę i dowolną liczbę obiektów. Aby ułatwić zarządzanie tę scenę, aparat i obiekty, których używamy, Three.js, który wykorzystuje element <canvas> do wywołania. i renderowanie na GPU komputera. Jest wiele przydatnych dodatków Three.js do udostępnić swoją scenę za pomocą WebVR. 2 główne – THREE.VREffect tworząc widoczny obszar dla każdego oka. THREE.VRControls do tłumaczenia perspektywy (np.do obrotu i położenia zamontowany na głowie), Istnieje wiele przykładów jak to wdrożyć. Zobacz Przykłady WebVR w środowisku Three.js , aby dowiedzieć się, jak zacząć.

Gdy zaczęliśmy korzystać z WebVR, natrafiliśmy na problem. Jeśli spojrzymy na w sieci reklamowej, tekst jest ich integralną częścią. Chociaż większość naszych treści są oparte na filmach, w witrynie znajduje się tekst, który otacza treść; interfejs oraz dodatkowe informacje na temat filmu lub powiązanych filmów są złożone z tekstu. Ponadto cały ten tekst jest tworzony w DOM. Nasze Eksploracje WebVR i strona https://vr.with.in/ są już dostępne <canvas>

Jakie mam opcje?

Na szczęście pracujemy nad tym. Nasze badania znaleźliśmy kilka skutecznych sposobów renderowania tekstu w trójwymiarowym w elemencie <canvas>. Poniżej znajduje się macierz kilku znalezionych przez nas połączeń, zawiera wady i zalety poszczególnych rozwiązań:

Nasza decyzja: czcionka mapy bitowej SDF

Obszar roboczy 2D w ctx.fillText() umożliwia zawijanie tekstu, korzystanie z odstępów między literami i liniami wysokość, ale przepełnienie zostanie obcięte i tekst będzie rozmyty po powiększeniu jak daleko. Możesz zwiększyć rozmiar tekstury płótna, ale możesz trafić jeśli tekstura jest zbyt duża, może to negatywnie wpłynąć na rozmiar lub wydajność tekstury.

Wyciągnięty tekst 3D jest zasadniczo taki sam jak tekst triangulowany wektorowy, ale i wierzchołki, aby geometria była co najmniej dwa razy większa. Jedna z tych wartości: w małych dawkach w tytułach czy logo, ale nie będą dobrze się sprawdza w dużych ilościach tekstu, a w obu przypadkach nie ma funkcji typograficznych.

Czcionki bitmapowe korzystają z jednego czworokąta (2 trójkąty) na znak, więc używają mniej i ma lepsze wyniki niż wektory triangulacyjne. Są w dalszym ciągu oparte na rastrach, ponieważ używają sprite’a mapy tekstur, ale korzystają z plików SDF cienienie są w zasadzie niezależne od rozdzielczości, więc wyglądają lepiej niż dwuwymiarowe modele. tekstury odbitki na płótnie. Matt DesLauriers 3-bmfont-text zawiera też niezawodne funkcje typograficzne do zawijania tekstu, odstępy między literami, wysokość wierszy i wyrównanie. Przepełnienie nie zostaje ucięte. Czcionka jest ustalana za pomocą skali. Wybraliśmy tę trasę, ponieważ dała nam i zadbać o wydajność. Okazało się, że nie tak, jest łatwe do wdrożenia, więc omówię kroki, mając nadzieję, że uda nam się dla deweloperów pracujących w WebVR.

1. Wygeneruj czcionkę bitmapową (.png + .fnt)

Hiero to pakiet znaków bitmapowych. które działa w języku Java. Dokumentacja Hiero nie wyjaśnia dokładnie, go uruchomić bez przechodzenia skomplikowanego procesu kompilacji. Najpierw zainstaluj Javę, jeśli z którego już nie korzystasz. Jeśli dwukrotne kliknięcie pliku runnable-hiero.jar nie otwórz Hiero, spróbuj go uruchomić za pomocą tego polecenia w konsoli:

java -jar runnable-hiero.jar

Po uruchomieniu Hiero otwórz czcionkę w formacie .ttf lub .otf i wpisz dodatkowe które chcesz uwzględnić, zmień renderowanie na Java, aby włączyć efekty. zwiększ rozmiar, aby znaki zapełniły cały kwadrat pamięci podręcznej glifów, dodać efekt pola odległości, dostosować skalę pola odległości i rozsunąć obiekt. jest jak rozdzielczość. Im większa wartość, tym mniej rozmyte ale tym więcej czasu zajmie renderowanie podglądu przez Hiero. Następnie zapisz czcionka bitmapy. Generuje czcionkę bitmapową składającą się z obrazu .png i Plik z opisem czcionki AngelCode .fnt.

2. Konwertuj AngelCode na format JSON

Po wygenerowaniu czcionki bitmapy musimy wczytać ją aplikacja JavaScript z Mattem DesLauriersem load-bmfont npm package.

Moglibyśmy przeprowadzić przeglądarkę load-bmfont i użyć go w interfejsie, ale będę biec load-bmfont.js z Węzeł do przekonwertowania i zapisania pliku AngelCode .fnt Hiero Plik.json:

npm install
node load-bmfont.js

.

Teraz możemy ominąć komponent load-bmfont i wysłać żądanie XHR (XMLHttpRequest) do .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. Browserify – czcionka z 3-tekstowym tekstem

Gdy wczytamy czcionkę, tekst Matta 3 czcionki w kolorze czcionki odpoczynek. Ponieważ nie używamy Node we własnej aplikacji, browserify three-bmfont-text.js w użyteczny plik three-bmfont-text-bundle.js

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

4. Program do cieniowania SDF

Ustaw suwaki afwidth i thshold na vr.with.in/archive/text-sdf-bitmap/ aby sprawdzić wpływ cieniowania pola ze znakiem odległości.

5. Wykorzystanie

Dla wygody przygotowałam Klasa kodu TextBitmap dla redagowanego tekstu (3-bmfont-text).

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

Utwórz żądanie XHR dla pliku czcionek .json i utwórz obiekt tekstowy w pliku wywołanie zwrotne:

var bmtext = new TextBitmap({ options });

Aby zmienić tekst:

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

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

Plik .png czcionki bitmapy jest wczytywany za pomocą komponentu THREE.TextureLoader w pliku text-bitmap.js

TextBitmap zawiera też niewidoczne pole trafienia do interakcji z raycastem 3.js. za pomocą myszy, aparatu lub kontrolerów ruchu z ręcznym śledzeniem, takich jak Oculus Touch jak kontrolery Vive. Rozmiar pola działania jest aktualizowany automatycznie, gdy zmienisz tekst .

Do sceny 3.js dodano tekst bmtext.group. Jeśli chcesz uzyskać dostęp do kont podrzędnych / Object3D, wykres sceny dla tekstu wygląda tak:

6. Wyłącz minimalizację pliku json i zmodyfikuj xoffsety

Jeśli kerning wygląda nieprawidłowo, konieczna może być edycja xoffset w pliku JSON. Wklej za pomocą json w Jsbeautifier.org, aby uzyskać niezminimalizowaną wersję pliku.

xoffset to zasadniczo globalny kerning dla 1 znaku. Kerning jest dla dwojga znaków, które pojawiają się obok siebie. Domyślne wartości w kolumnach nie mają żadnego znaczenia, a byłoby zbyt pracochłonne Edit (Edytuj), więc możesz opróżnić tę tablicę i zmniejszyć rozmiar pliku JSON. Potem dla kerningu.

Najpierw musisz ustalić, które znaki pasują do poszczególnych identyfikatorów JSON. W pliku three-bmfont-text-bundle.js wstaw console.log po wierszu 240:

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

Następnie wpisz w polu tekstowym dat.gui https://vr.with.in/archive/text-sdf-bitmap/ i sprawdź w konsoli odpowiedni identyfikator znaku.

Na przykład w czcionki bitmapowej „j” jest stale za bardzo w prawo. To identyfikator znaku to 106. Znajdź więc "id": 106 w pliku json i zmień jego wartość xoffset z -1 do -10.

7. Układ

Jeśli masz kilka bloków tekstu i chcesz, żeby przesuwał się on od góry do dołu, w HTML, wszystko musi być pozycjonowane ręcznie, podobnie jak w przypadku pozycjonowania bezwzględnego każdego elementu DOM za pomocą CSS. Czy wyobrażasz sobie, że możesz to zrobić w CSS?

    * { position: absolute; }

Właśnie tak działa układ tekstu w 3D. W widoku szczegółowym: tytuł, autor, opisu i czasu trwania to nowy obiekt TextBitmap z własnym style, kolor, skala itp.:

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;

Zakładamy, że lokalne źródło każdej grupy TextBitmap jest pionowe wyrównane z górną krawędzią siatki TextBitmap (patrz wyśrodkowanie text-bitmap.js ). Jeśli później zmienisz tekst któregokolwiek z tych obiektów, a wysokość tych zmian obiektu, konieczne będzie również ponowne obliczenie tych pozycji. Tutaj zmodyfikowano tylko pozycję y tekstu, ale można też pracować W 3D możemy wypychać i pociągnąć tekst w kierunku Z, a także obracać go wokół osi x, y i z.

Podsumowanie

Zanim tekst i układ w WebVR są tak proste, powszechnie używanych jako HTML i CSS. Istnieją jednak aktywne rozwiązania i możesz zrobić o wiele więcej w WebVR niż na tradycyjnej stronie HTML. WebVR jest obecnie dostępny. Jutro prawdopodobnie istnieją lepsze narzędzia. Do tego czasu wypróbuj je i eksperymentu. Rozwój bez powszechnego stosowania sprawia, że To bardzo ekscytujące.