Rzeczywistość wirtualna (VR) dla każdego - Aframe i HTML 5 - ebook

9. Wprowadzenie do Aframe

Aframe to szkielet do budowy aplikacji stworzony przez ludzi z Mozilli. Ułatwia rozpoczęcie pracy z wirtualną rzeczywistością. Jest zbudowany na bazie three.js. Istnieje wiele komponentów zbudowanych na aframe, wraz z wieloma stworzonymi przez społeczność.

Aframe ułatwia tworzenie dobrych doświadczeń VR nawet amatorom JS. Mając trochę więcej wiedzy na temat threejs, możesz także tworzyć własne komponenty aframe. Dzięki temu, że szkielet ten wewnętrznie korzysta z aplikacji three.js, możliwości są nieograniczone, ponieważ możesz tworzyć własne komponenty niestandardowe, gdy coś, czego chcesz, nie jest dostępne.

10. Czym jest aframe

Aframe to system programowania jednostkowo-komponentowego, oparty na three.js.

Ułatwia pracę z three.js, ma również wiele komponentów tworzonych przez społeczność, co ułatwia każdemu rozpoczęcie pracy z wirtualną rzeczywistością przy pełnej wiedzy o threejs. Najlepsze w Aframe jest to, że jeśli chcesz stworzyć własne niestandardowe komponenty, możesz to zrobić za pomocą three.js.

Najlepszym sposobem, by zrozumieć Aframe, jest zapoznanie się z przykładowym sposobem jego użycia.

Stwórzmy prosty sposób wyświetlania obrazów 360-stopniowych.

Istnieją różne sposoby budowania aplikacji VR za pomocą Aframe. Tutaj będziemy budować je przy użyciu zwykłego HTML.

11. Rozbudowywanie HTML 5 o aframe

Najpierw musimy uwzględnić Aframe JS wbudowany w HTML. Cała akcja Aframe odbywa się wewnątrz komponentu a-scene. Wewnątrz tego możesz dodać pozostałe komponenty.

Dodajmy do naszej sceny prostą kulę.

I tyle. Spójrzmy na komponenty, których użyliśmy.

a-scene

Tworzy scenę threejs. Wszystkie jednostki są zawarte w scenie. Scena może zawierać zasoby, geometrię i tak dalej. Podczas pisania kodu Aframe komponenty są budowane wewnątrz a-sceny.

a-sphere

Ten komponent tworzy kształty sferyczne lub wielościenne. Wewnątrz tworzy komponent geometryczny z prymitywnym zestawem jako kulą. Jest to najbardziej podstawowy przykład w Aframe.

Teraz, gdy udało nam się stworzyć kulę w naszym środowisku, stwórzmy coś bardziej złożonego.

11.1. Panorama w wirtualnej rzeczywistości

We wprowadzeniu do Aframe będziemy wyświetlać panoramę wewnątrz naszej a-scene. Kiedy oglądamy na urządzeniu innym niż VR, takim jak komputer stacjonarny, możemy przeciągać wokół panoramy. Aby przejrzeć panoramę podczas oglądania w VR, wystarczy poruszać głową.

Ponieważ używamy Aframe, która owija funkcje threejs w niestandardowe komponenty, jesteśmy w stanie bardzo łatwo stworzyć 360-stopniową wirtualną rzeczywistość panoramiczną. Gdybyśmy robili to w zwykły sposób w threejs, potrzebowalibyśmy więcej kodów i musielibyśmy dłużej nad tym pomyśleć. Musielibyśmy napisać kod do obsługi jednocześnie w urządzeniach VR oraz innych niż VR.

To takie proste.

11.2. Co udało nam się tu zrobić dzięki Aframe

Przejdźmy przez to, co udało się zrobić dzięki Aframe. Pierwszym znacznikiem jest a-scene. Jak wyjaśniono wcześniej, tworzymy tu scenę threejs, gdzie dodajemy nasze treści.

a-sky tworzy sferyczną geometrię w threejs. Używa się go do nadania tła lub wyświetlania 360-stopniowych równoodległościowych zdjęć. Kiedy ten kod jest uruchamiany, kamera znajduje się w centrum kuli i rozglądamy się wokół.

Gdy tryb VR jest włączony w urządzeniach nieobsługujących VR, przełącza się na pełny ekran. W przeciwnym razie wyświetli efekt VR.

12. Jak zbudować swoją pierwszą scenę w VR

Pomocna okazuje się dokumentacja a-frame. Jest wiele przydatnych sekcji, które możesz sprawdzić, aby uzyskać bardziej dogłębny wygląd. Mają też bloga i możesz do nich łatwo dotrzeć.

Pierwsza scena w a-frame

Podstawowy przykład, który widzisz na powyższym zrzucie ekranu, ma w sumie 9 linii.

Pierwsza linia, określana jako skrypt, to plik JavaScript, który zawiera kod do wykonania ramki. Linia ta musi być obecna we wszystkich scenach a-frame.

Pozostałe linie opisują to, co jest wewnątrz samej sceny, która obejmuje kulę, skrzynkę, cylinder, samolot i niebo. Możesz modyfikować te obiekty (zwane także jednostkami) zgodnie z własnymi potrzebami. Na przykład, aby przesunąć obiekty dookoła, można zmienić wartości osi x, y, z wewnątrz atrybutów położenia i obrotu.

Możesz równie łatwo modyfikować wartości promienia, szerokości, wysokości i głębokości, aby obiekty były większe lub mniejsze, większe lub cieńsze itd.

Możesz także zmienić kolor, bawiąc się kodami kolorów HTML (użytymi w powyższym przykładzie) lub po prostu wpisując nazwę wybranego koloru.

Mój pierwszy „twórczy” przykład

Kiedy zrozumiesz podstawowy przykład, możesz zaszaleć i zbudować bardziej osobistą (w moim przypadku bardziej psychodeliczną) scenę.

Zrzut ekranu powyżej pokazuje pierwszy, łatwy do zbudowania „kreatywny” przykład. Rzućmy okiem na kod.

Jak widzisz, dodałem do sceny cztery różne jednostki torusa. Zmieniłem ich promień i kolor, pozostawiając je w tej samej pozycji, aby uzyskać okrągły efekt podobny do tęczy.

Dla filarów mojego nagłówka zmodyfikowałem tylko dwa cylindry w kolorze magenta, dzięki czemu były one wyższe i cieńsze. I aby „wspierać” moje filary, dodałem grunt, który jest w zasadzie płaszczyzną, jaka pokrywa powierzchnię. Na końcu nadałem niebu kolor jasnoniebieski.

12.1. Dodawanie tekstu

Dodawanie tekstu jest bardzo proste, jak wszystko w a-frame. Pierwsza linia powyższego zrzutu ekranu to wszystko, czego potrzebujesz: komponent tekstowy klatki , wartość (cokolwiek chcesz napisać), pozycja (gdzie chcesz umieścić ją na scenie), kolor (nie muszę wyjaśniać, o co chodzi) i szerokość (jak gruby ma być tekst).

Aby uczynić z niego nagłówek, właśnie umieściłem tekst na wierzchu pudełka, które zmodyfikowałem tak, by mieściło się pomiędzy dwoma cylindrycznymi filarami.

13. Tryb VR

Jak można zobaczyć swoją scenę w rzeczywistości wirtualnej za pomocą jednego kliknięcia?

To jedna z najfajniejszych rzeczy w A-Frame. To jest szkielet, który umożliwia tworzenie wirtualnej rzeczywistości, dzięki czemu możesz jednym kliknięciem zamienić swoją scenę w VR.

Aby móc zobaczyć to na swoim telefonie, po prostu skopiuj adres URL i wklej go w przeglądarce mobilnej. Gdy scena pojawi się na ekranie, możesz wejść z nią w interakcję, a po kliknięciu w przycisk przypominający parę kartonowych okularów w prawym dolnym rogu wejdziesz w tryb VR. Jest to użyteczne (i można używać od zaraz!), jeśli posiadasz urządzenia takie jak Google Cardboard czy Gear VR albo urządzenia obsługujące platformę Daydream, itd.

I tyle, właśnie stworzyliście pierwszą scenę VR!

14. Budowanie większej sceny

Zacznijmy od stworzenia podstawowej sceny A-Frame. W tym celu potrzebujemy podstawowej wiedzy na temat HTML. Nauczymy się, jak:

• dodawać elementy 3D (np. Obiekty) za pomocą elementów podstawowych,

• przekształcać obiekty w przestrzeni 3D z pozycją, obrotem, skalą,

• dodawać środowisko,

• dodawać tekstury,

• dodawać podstawową interaktywność za pomocą animacji i zdarzeń,

• dodawać tekst.

Zaczynamy od minimalnej struktury HTML:



















Załączamy A-Frame jako znacznik skryptu w , wskazując na kompilację A-Frame hostowaną na CDN. To musi być zawarte przed , ponieważ A-Frame rejestruje niestandardowe elementy HTML, które muszą być zdefiniowane, zanim zostanie dopisane, w innym przypadku nic nie zmieni.

Następnie dodajemy do . będzie zawierał każdą jednostkę w naszej scenie. obsługuje całą konfigurację, która jest wymagana dla 3D: konfigurowanie WebGL, obrazy, kamery, światła, renderer, renderowanie, a także obsługa WebVR na platformach takich jak HTC Vive, Oculus Rift, Samsung GearVR i smartfony (Google Cardboard). Sam wymaga od nas włożenia dużo wysiłku.

14.1. Dodawanie jednostki

W ramach naszej dołączamy obiekty 3D, używając jednego ze standardowych prymitywów graficznych A-Frame . Możemy użyć tak jak normalnego elementu HTML, definiując znacznik i używając atrybutów HTML, aby go dostosować. Inne przykłady prymitywów, które pochodzą z A-Frame, to , lub . Tutaj definiujemy kolor . Zobacz dokumentację , aby uzyskać więcej atrybutów (np. szerokość, wysokość, głębokość).

Zdjęcie autorstwa Rubena Muellera z vrjump.de







Na marginesie chcielibyśmy dodać, że prymitywy są łatwymi w użyciu elementami HTML A-Frame, które stanowią podstawowy zespół jednostek i komponentów. Mogą być wygodne w użyciu, ale pod jest z geometrią i komponentami materiałowymi:



Niemniej jednak, ponieważ domyślna kamera i skrzynka są ustawione w domyślnej pozycji w punkcie początkowym 0 0 0, nie będziemy mogli zobaczyć tego pola, chyba że je przeniesiemy. Możemy to zrobić, używając komponentu pozycji do transformacji pudełka w przestrzeni 3D.

14.2. Przekształcanie jednostki w 3D

Przejdźmy najpierw przez przestrzeń 3D. A-Frame używa praworęcznego układu współrzędnych. Przy domyślnym kierunku kamery: dodatnia oś X rozciąga się w prawo, dodatnia oś Y wystaje w górę, a dodatnia oś Z wychodzi z ekranu w naszą stronę:

Obraz z what-when-how.com

Jednostka odległości A-Frame podana jest w metrach, ponieważ interfejs WebVR API wykazuje dane pozycyjne w metrach. Projektując scenę dla VR, należy wziąć pod uwagę rzeczywistą skalę świata tworzonych przez nas obiektów. Pudło o wysokości height="10" może wyglądać normalnie na ekranach komputerów, ale w rzeczywistości wirtualnej skrzynka będzie wyglądać masywnie.

Obrotowa jednostka A-Frame podana jest w stopniach, chociaż zostanie przekształcona wewnętrznie na radiany, gdy przejdzie do pliku three.js. Aby określić dodatni kierunek obrotu, użyj reguły prawej ręki. Skieruj kciuki w dół w kierunku osi dodatniej i w kierunku, w którym nasze palce kręcą się wokół dodatniego kierunku obrotu.

Aby przetłumaczyć, obrócić i przeskalować skrzynkę, możemy zmienić pozycję, obrót i komponenty skali. Najpierw zastosujmy komponenty rotacji i skali:







Spowoduje to obrócenie pudełka pod kątem i podwoi jego rozmiar.

Transformacje rodzica i potomka

A-Frame HTML reprezentuje wykres sceny 3D. Na wykresie sceny jednostki mogą mieć jednego rodzica i wiele potomków. Jednostki potomków dziedziczą transformacje (tj. pozycję, obrót i skalę) od swoich jednostek nadrzędnych (rodziców).

Na przykład możemy mieć kulę jako dziecko pudełka:











Jeśli obliczysz światową pozycję kuli, będzie to 1 2 3, osiągnięte przez ułożenie pozycji macierzystej sfery z jej własną pozycją. Podobnie w przypadku obrotu i skali, sfera odziedziczyłaby obrót i skalę pudełka. Kula również byłaby obracana i rozciągana, podobnie jak jej pudełko macierzyste. Jeśli pudełko zmieni swoją pozycję, obrót lub skalę, natychmiast zastosuje się do sfery i wpłynie na nią.

Gdybyśmy dodali do kuli cylinder jako jej dziecko, transformacja cylindra będzie zależna zarówno od transformacji kuli, jak i skrzynki. Pod maską w three.js robi się to przez pomnożenie macierzy transformacji. Na szczęście nie musimy o tym myśleć.

14.3. Umieszczanie pudełka przed kamerą

Spróbujmy teraz sprawić, aby pudełko było widoczne na kamerze od samego początku.

Możemy przenieść skrzynię z powrotem o 5 metrów na ujemną oś Z z komponentem pozycji. Musimy również przesunąć go o 2 metry na dodatniej osi Y, aby skrzynia nie przecinała się z ziemią, ponieważ skalowaliśmy skrzynię, a skalowanie odbywa się od środka:







Teraz widzimy nasze pudełko!

14.4. Domyślne elementy sterujące

W przypadku płaskich wyświetlaczy (np. laptopa, komputera stacjonarnego) domyślny schemat sterowania pozwala rozglądać się za pomocą przeciągania myszą i przeciągania za pomocą klawiszy WASD lub strzałek. W smartfonie, aby obrócić kamerę, możemy obrócić telefon. Chociaż A-Frame jest dostosowany do WebVR – ten domyślny schemat sterowania umożliwia oglądanie sceny bez zestawu VR.

Sprawdź instrukcje na stronie domowej Mozilla VR, aby skonfigurować i wprowadzić WebVR.

Wchodząc do rzeczywistości wirtualnej, po kliknięciu ikony gogli z podłączonym zestawem słuchawkowym VR (np. Oculus Rift, HTC Vive), możemy doświadczyć tej sceny w realistycznej rzeczywistości wirtualnej. Jeśli dostępna jest skala pokojowa, możemy fizycznie poruszać się po scenie.

14.5. Dodawanie środowiska

A-Frame pozwala programistom tworzyć i udostępniać komponenty wielokrotnego użytku, z których inni mogą z łatwością korzystać. Komponent środowiskowy @feiss’a w ramach procedur generuje dla nas różne środowiska z pojedynczą linią HTML. Komponent środowiska jest świetnym i łatwym sposobem na wizualne organizowanie naszej aplikacji VR, zapewniając kilkunastu środowiskom wiele parametrów.

Najpierw wpisz komponent środowiska za pomocą znacznika skryptu po A-Frame:









Następnie, wewnątrz sceny, dodaj jednostkę z dołączonym komponentem środowiska. Możemy określić wartość fabryczną (np. forest) wraz z wieloma innymi parametrami (np. 200 drzew):











14.6. Stosowanie tekstury obrazu

Upewnij się, że obsługujesz kod HTML za pomocą lokalnego serwera, aby tekstury ładowały się prawidłowo.

Możemy zastosować teksturę obrazu do pudełka z obrazem, wideo lub , używając atrybutu src, tak jak byśmy mieli standardowy element . Powinniśmy również usunąć color="red", który ustawiliśmy tak, aby kolor nie zmieszał się z teksturą. Domyślnym kolorem materiału jest white (biały), więc wystarczy usunąć atrybutu koloru.




scale="2 2 2">





Teraz zobaczymy nasze pudełko z teksturą obrazu pobraną z Internetu.

Korzystanie z systemu zarządzania zasobami

Korzystanie z systemu zarządzania zasobami zalecamy w celu podniesienia wydajności. System zarządzania zasobami ułatwia bowiem przeglądarce przechowywanie zasobów (np. obrazów, filmów, modeli), a z A-Frame mamy pewność, że wszystkie zasoby zostaną pobrane przed renderowaniem.

Jeśli zdefiniujemy w systemie zarządzania zasobami, później plik three.js nie musi wewnętrznie tworzyć elementu . Tworzenie przez nas samych daje nam także większą kontrolę i umożliwia ponowne wykorzystanie tekstury na wielu obiektach. A-Frame jest również wystarczająco inteligentny, aby ustawić crossOrigin i inne tego typu atrybuty, gdy jest to konieczne.

Aby użyć systemu zarządzania zasobami dla tekstury obrazu:

• dodaj do sceny,

• zdefiniuj teksturę jako w ,

• nadaj znacznikowi identyfikator HTML (np. id="boxTexture"),

• odwołaj się do zasobu, używając identyfikatora w formacie selektora obiektowego modelu dokumentu (src="#boxTexture").















14.7. Tworzenie środowiska niestandardowego (opcjonalnie)

Wcześniej omówiliśmy komponent środowiskowy generujący środowisko. Choć dobrze jest wiedzieć trochę o tworzeniu podstawowego środowiska do celów edukacyjnych.

14.8. Dodawanie tła do sceny

Możemy dodać tło z , które otacza scenę. , czyli materiał, który stosuje się wewnątrz dużej kuli, może mieć kolor jednolity, obraz 360-stopniowy lub wideo 360-stopniowe. Na przykład ciemnoszare tło byłoby:









Możemy także użyć tekstury obrazu, aby uzyskać 360-stopniowy obraz tła przy użyciu src zamiast color:








src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">









14.9. Dodawanie podłoża

Aby dodać teren, możemy użyć . Domyślnie płaszczyzny są zorientowane równolegle do osi XY. Aby znajdowała się równolegle do podłoża, musimy ustawić ją wzdłuż osi XZ. Możemy to zrobić, obracając płaszczyznę ujemną o 90 stopni na osi X.



Ważne jest, aby teren był odpowiednio duży, byśmy mogli zwiększyć szerokość i wysokość. Ustawmy dla niego wartość 30 metrów w każdym kierunku:



Następnie możemy zastosować teksturę obrazu do naszego podłoża:

















Aby ustawić teksturę, możemy użyć atrybutu repeat. Atrybut ten przyjmuje dwie liczby: ile razy należy powtórzyć w kierunku X oraz ile razy w kierunku Y (powszechnie określane jako U i V dla tekstur).


repeat="10 10">

14.10. Poprawianie oświetlenia

Możemy zmienić sposób oświetlania sceny za pomocą s. Domyślnie, jeśli nie określamy żadnych świateł, A-Frame dodaje światło otoczenia i światło kierunkowe. Jeśli A-Frame nie doda światła, scena będzie czarna. Gdy dodamy własne światła, domyślna konfiguracja oświetlenia zostanie usunięta i zastąpiona przez naszą konfigurację.

Dodamy światło otoczenia, które ma lekką niebiesko-zieloną barwę, która przypomina kolor nieba. Światła otoczenia są stosowane do wszystkich obiektów na scenie (biorąc pod uwagę, że zastosowano przynajmniej domyślny materiał).

Dodamy również światło punktowe. Światła punktowe są jak żarówki – możemy ustawić je wokół sceny, a wpływ światła punktowego na jednostkę zależy od odległości od niej:








src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">















14.11. Dodawanie animacji

może zostać uznana za przestarzałą w porównaniu z komponentem animacji.

Możemy dodawać animacje do ramki za pomocą wbudowanego systemu animacji A-Frame. Animacje interpolują lub przechodzą między wartościami w czasie. Możemy umieścić element jako element potomny jednostki. Załóżmy, że pudełko unosi się w górę i w dół, aby dodać ruch do sceny.












repeat="indefinite">





służy do tego, by:

• animować atrybut pozycji,

• animować do 0 2.2. -5, który jest 20 centymetrów wyższy,

• zmieniać kierunek animacji w każdym powtarzającym się cyklu animacji,

• nadać czas trwania 2000 milisekund w każdym cyklu,

• powtarzać animację w nieskończoność.

14.12. Zaawansowane szczegóły

przechwytuje pętlę renderowania A-Frame tak, że wywoływana jest tylko raz na ramkę. Jeśli potrzebujesz większej kontroli i chcesz ręcznie interpolować lub animować wartość, możesz napisać komponent A-Frame za pomocą obsługi znaczników tick i biblioteki, takiej jak Tween.js (która na chwilę obecną jest dostępna na stronie AFRAME.TWEEN). Aby osiągnąć najlepszą wydajność, operacje na klatkach raz-na-klatkę powinny być wykonywane na poziomie A-frame. Staraj się nie tworzyć własnych requestAnimationFrame, gdy A-frame już je posiada.

KONIEC WERSJI DEMONSTRACYJNEJ

Dziękujemy za skorzystanie z oferty naszego wydawnictwa i życzymy miło spędzonych chwil przy kolejnych naszych publikacjach.

Wydawnictwo Psychoskok