Rzeczywistość wirtualna (VR) dla każdego. Aframe i HTML 5. VR w HTML 5 na każdym urządzeniu z Internetem. Wydanie II - ebook

Wstęp

Z lektury niniejszej publikacji dowiesz się w sposób bardzo praktyczny, oparty na ciekawych przykładach prosto z życia jak zaprogramować swoją stronę internetową korzystając z najnowszych technologii - HTML 5, CSS 3 oraz aplikacja Adobe Dreamwever.

Aplikacja Dreamweaver nie jest wymagana, gdyż tak naprawdę wystarczy dowolny edytor tekstowy np. Notepad++, który pozwala na kolorowanie składni.

Dzięki informacjom zawartym w niniejszej lekturze stworzysz strony www, które będą responsywne oraz posiadały efekt paralaxy. Nauczysz się ręcznie z poziomu kodu modyfikować strony tworzone w generatorach.

Co więcej dowiesz się także jak z przy użyciu HTML 5 oraz zestawu bibliotek Aframe (aframe.io) w bardzo łatwy sposób stworzyć aplikacje działające w wirtualnej rzeczywistości. Będą one bez problemu współpracowały z profesjonalnymi zestawami VR takimi jak Oculus, HTC Vive, ale także tanimi nakładkami na telefony komórkowe takimi jak Google Cardboard.

Materiały znajdziesz pod adresem:

https://drive.google.com/drive/folders/1QgT3rvFb723WtAE-XqoJefJ0pALYzb6j?usp=sharingRozdział 07 - Wprowadzenie do Aframe

Aframe to szkielet do budowy aplikacji rzeczywistości wirtualnej 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.

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

Aframe ułatwia pracę z three.js. Aframe 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. Co jest najlepsze w Aframe, to 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.

1. Rozbudowywanie HTML5 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.

2. Panorama w wirtualnej rzeczywistości

W tym wprowadzeniu do Aframe, będziemy wyświetlać panoramę wewnątrz naszej a-scene. Kiedy oglądamy na urządzeniu innym niż VR, takiego jak komputer stacjonarny, możemy przeciągać wokół panoramy. Podczas oglądania w VR, aby obejrzeć panoramę, 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 innych niż VR i urządzeniach VR.

To takie proste.

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 nie obsługujących VR, przełącza się na pełny ekran. W przeciwnym razie wyświetli efekt VR.

3. Jak zbudować swoją pierwszą scenę w VR?!

Pomocna okazuje się dokumentacja a-frame. Jest tak 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 Twoje 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 ich 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ą, która pokrywa powierzchnię. Na końcu nadałem niebu jasnoniebieski kolor.

4. 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.

5. Tryb VR

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

To jedna z najfajniejszych rzeczy na 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 przycisku przypominającego 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, Gear VR, urządzenia obsługujące platformę Daydream, itd.

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

Koniec Wersji Demonstracyjnej

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

Wydawnictwo Psychoskok