POUŽÍVANIE WEBXR S BABYLON.JS

V tomto prehľade technológií WebXR a rámca Babylon.js sa vydáme na cestu minulosťou, súčasnosťou a budúcnosťou zmiešanej reality na webe aj na pohlcujúcich náhlavných súpravách. Skontrolujeme základy WebXR a najdôležitejšie aspekty rozhrania WebXR Device API predtým, než upriamime svoju pozornosť na Babylon.js, rámec na vytváranie pohlcujúcich aplikácií v JavaScripte pre web, mobil a náhlavnú súpravu. Tento tutoriál je zameraný na vývojárov webu a JavaScriptu, ktorí vytvárajú webové aplikácie, ale chcú sa ponoriť do pohlcujúcich zážitkov.

Pohlcujúce zážitky, najmä tie, ktoré sa riadia zmiešaná realita (XR), ktorý zahŕňa rozšírenú aj virtuálnu realitu, rýchlo získava novú pozornosť medzi vývojármi a architektmi, ktorí majú záujem osloviť používateľov a zákazníkov novými spôsobmi. Nedostatočné osvojenie si skúseností so zmiešanou realitou po mnoho rokov spôsobilo hardvér – príliš drahý a nepraktický – a softvér – príliš zložitý a náročný na použitie.

Pandémia koronavírusu však môže prekaziť všetky tieto staré výpočty tým, že podporuje druhy zážitkov, ktoré sú väčšinou obmedzené na herný svet, ktorý obrovský nárast hracieho času počas súčasnej krízy. Matematika za trojrozmernými priestormi môže tiež predstavovať prekážky pre vývojárov, ale našťastie potrebujete len trochu vektorovej geometrie a maticovej matematiky, aby ste uspeli so skúsenosťami XR, nie vysokoškolský kurz lineárnej algebry a viacrozmerného počtu.

Hoci sa podpora prehliadača pre WebXR rozširuje, vytváranie pohlcujúcich zážitkov do prehliadačov alebo náhlavných súprav môže byť komplikované v dôsledku posúvania špecifikácií a rozhraní API, ako aj rýchlo sa vyvíjajúcich rámcov a osvedčených postupov. Ale začlenenie ponorenia do vašej ďalšej webovej aplikácie môže tiež priniesť novú dimenziu a bohatosť vašej používateľskej skúsenosti – a to všetko bez potreby učiť sa nový programovací jazyk.

Čo je WebXR?
- Špecifikácia WebXR a podpora prehliadača
- Zorné pole (FOV) a stupne voľnosti (DoF)
- Režimy relácie WebXR
Nastavenie scény pomocou WebXR a Babylon.js
- Predstavujeme Babylon.js
- Svetlá, kamera, akcia!
  - Rýchla alternatíva geometrie WebXR
  - Kamery
  - Svetlá
  - Svetelné zdroje
  - Svetelné parametre
- Prijatie tvaru: nastavené a parametrické tvary
- Dať to všetko dohromady: vykreslenie scény
- Ďalšie kroky: Podpora a správa používateľského vstupu
Ladenie, rozširovanie a spájanie Babylon.js
- Ladenie Babylon.js pomocou nástroja Inspector
- Integrácia a spájanie Babylon.js s iným JavaScriptom
Ponorte sa do WebXR

Čo je WebXR?

Jednoducho povedané, WebXR je zoskupenie štandardov zodpovedných za podporu renderovaných trojrozmerných scén vo virtuálnej a rozšírenej realite, pričom obe zážitkové sféry sú spoločne známe ako zmiešaná realita (XR). Virtuálna realita (VR), ktorá predstavuje úplne pohlcujúci svet, ktorého fyzické prvky sú úplne nakreslené zariadením, sa značne líši od rozšírenej reality (AR), ktorá namiesto toho prekrýva grafické prvky do prostredia skutočného sveta.

ako obnoviť odstránený tweet

Zariadenia kompatibilné s WebXR ponúkajú široký rozsah od pohlcujúcich 3D náhlavných súprav so zabudovaným sledovaním pohybu a orientácie a názvami ako Vive, Oculus a Hololens až po okuliare s grafikou umiestnenou na obrázkoch skutočného sveta a smartfóny, ktoré zobrazujú svet – a ďalšie prvky – na ich pôvodné fotoaparáty.

Špecifikácia WebXR a podpora prehliadača

The WebXR Device API je primárnym kanálom, pomocou ktorého môžu vývojári interagovať s pôsobivými náhlavnými súpravami, okuliarmi AR a smartfónmi s podporou AR. Zahŕňa možnosti pre vývojárov objaviť kompatibilné výstupné zariadenia, vykresliť trojrozmernú scénu do zariadenia so správnou snímkovou frekvenciou, zrkadliť výstup na dvojrozmerné zobrazenie (napríklad 2D webový prehliadač) a vytvárať vektory, ktoré zachytávajú pohyby vstupných ovládacích prvkov.

V súčasnosti je pracovný návrh, Špecifikácia WebXR je kombináciou vyššie uvedeného WebVR API, ktoré bolo navrhnuté výhradne pre prípady použitia virtuálnej reality, a úplne nového WebXR Augmented Reality Module, ktorý zostáva vysoko experimentálny. WebVR, predtým prevládajúci a odporúčaný prístup pre zážitky z virtuálnej reality, je teraz nahradený WebXR a mnohé rámce a knižnice ponúkajú stratégie migrácie medzi WebVR a novšou špecifikáciou WebXR.

Hoci WebXR je teraz svedkom prijatia v celom odvetví, podpora prehliadača zostáva fľakatý a ešte nie je zaručené, že aplikácia zmiešanej reality vytvorená podľa špecifikácie WebXR bude fungovať vo výrobe.

Chrome 79, Edge 79, Chrome pre Android 79 a Samsung Internet 11.2 ponúkajú plnú podporu WebXR. Ale pre nepodporované prehliadače ako Firefox, Internet Explorer, Opera, Safari alebo určité mobilné prehliadače (Android webview, Firefox pre Android, Opera pre Android a Safari pre iOS) existuje WebXR Polyfill dostupné vďaka členom komunity WebXR, ktorá implementuje rozhranie WebXR Device API v JavaScripte, takže vývojári môžu písať aplikácie podľa najnovšieho stavu špecifikácie. Vo Firefoxe pre web a Firefoxe pre Android môžete povoliť príznak experimentálnej funkcie tak, že prejdete na |_+_| a nastavenie |_+_| do |_+_| v rozšírených nastaveniach prehliadača.

Inštalácia emulátora WebXR API na Chrome alebo Firefox na osobnom počítači predstaví ďalšie nástroje, ktoré vám pomôžu s ladením a testovaním.

WebXR Device API závisí od WebGL (Web Graphics Library), vykresľovacie jadro, ktoré podporuje trojrozmernú grafiku, a preto využíva mnoho konceptov WebGL, keď vykonáva vykresľovanie, osvetlenie a textúrovanie potrebné pre scénu. Hoci najhlbšie zábery WebGL sú ďaleko za rozsahom tohto článku, tí, ktorí už WebGL poznajú, budú ťažiť z existujúcich odborných znalostí.

Na interakciu s WebGL a WebXR je k dispozícii niekoľko rámcov JavaScript s otvoreným zdrojom Three.js a Babylon.js . Rám , prístup k WebXR založený na prehliadači a zameraný na značkovanie, je postavený na Three.js. V tomto návode sa zameriavame na Babylon.js, ktorý si nedávno získal pozornosť vďaka svojej veľkej ploche API a relatívnej stabilite. Nie sú to však knižnice a rámce JavaScript, ktoré používame na vytváranie dvojrozmerných webových aplikácií; namiesto toho sa hrajú v pieskovisku trojrozmerných priestorov.

Zorné pole (FOV) a stupne voľnosti (DoF)

V tomto článku sa zameriame na vytvorenie jednoduchého pohlcujúceho zážitku s obmedzeným vstupom a statickým objektom, čo znamená, že naše hlboké znalosti o WebGL sú minimálne. Existujú však kritické koncepty WebXR mimo WebGL, ktoré sú základom nie pre samotnú trojrozmernú grafiku, ale pre interakciu s trojrozmernými priestormi. Keďže WebXR vychádza zo zážitku diváka, všetko sa točí okolo pohlcujúcej náhlavnej súpravy alebo výrezu, ktorému používateľ čelí.

Všetky náhlavné súpravy a smartfóny majú fotoaparát, ktorý slúži ako pohľad používateľa na pohlcujúci zážitok. Každý fotoaparát má určité zorné pole (FOV), ktorý zahŕňa rozsah okolia diváka, ktorý je viditeľný v akomkoľvek danom čase v zariadení. Jedno ľudské oko má FOV 135º, zatiaľ čo dve ľudské oči s prekrývajúcimi sa FOV majú kombinované FOV široké 220º. Podľa MDN sa väčšina náhlavných súprav pohybuje medzi 90º až 150º v ich zornom poli.

Virtuálny alebo rozšírený svet videný cez zorné pole kamery je možné upraviť pohyb , ktorý sa vyskytuje pozdĺž stupne slobody vždy, keď sa zariadenie určitým spôsobom posunie, zatiaľ čo používateľ zostáva v pokoji. Rotačné pohyb nastáva pozdĺž tri stupne voľnosti (3DoF), čo je základ pre väčšinu základných pohlcujúcich náhlavných súprav:

Smola

Yaw

Roll

Diagram zobrazujúci tri stupne voľnosti v rotačnom pohybe s vybočením, sklonom a naklonením.

Rotačný pohyb nastáva v troch stupňoch voľnosti (3DoF): sklon (otočný na osi x), vybočenie (otočný na osi y) a naklonenie (otočenie na osi z). ( Veľký náhľad )

Hoci tri stupne voľnosti postačujú na jednoduchšie pohlcujúce zážitky, používatelia sa zvyčajne chcú pohybovať priestorom a nie len meniť svoj pohľad naň. Na to potrebujeme šesť stupňov voľnosti (6DoF), ktorého posledné tri stupne definujú translačný pohyb priestorom – dopredu a dozadu, doľava a doprava, hore a dole – nakláňanie, vybočovanie a otáčanie. Stručne povedané, 6DoF zahŕňa nielen otáčanie pozdĺž osí x, y a z, ale aj pohyb pozdĺž nich. Kvôli častej požiadavke externých senzorov na detekciu translačného pohybu podporujú všetkých šesť stupňov iba špičkové náhlavné súpravy.

Diagram znázorňujúci šesť stupňov voľnosti v rotačnom a translačnom pohybe.

Rotačný a translačný pohyb sa vyskytuje pozdĺž šiestich stupňov voľnosti (6DoF). ( Veľký náhľad )

Režimy relácie WebXR

S WebXR, ktorý nahrádza vyššie uvedenú špecifikáciu WebVR, teraz poskytuje jedno API ako jediný zdroj pravdy pre rozšírenú aj virtuálnu realitu. Každá aplikácia WebXR začína spustením a relácie , čo predstavuje pohlcujúci zážitok. Pre virtuálnu realitu WebXR sprístupňuje dva režimy relácie: |_+_|, ktorý ukladá vykreslenú scénu do dokumentu prehliadača, a |_+_|, ktorý závisí od náhlavnej súpravy. Pre rozšírenú realitu, pretože vykresľovanie je možné len do kamier smartfónov a priehľadných skiel alebo okuliarov namiesto prehliadačov, |_+_| je jediný dostupný režim.

Pretože mnohí z nás nemajú doma po ruke pohlcujúcu náhlavnú súpravu a pretože modul rozšírenej reality WebXR je stále vo fáze intenzívneho vývoja, zameriame svoju pozornosť na pohlcujúci zážitok z VR, ktorý možno vykresliť na plátno prehliadača.

Nastavenie scény pomocou WebXR a Babylon.js

V tejto časti sa naučíme, ako vytvoriť a vykresliť WebXR scénu s Babylon.js, okolím nášho prostredia a nastavením našej skúsenosti, skôr než zameriame akúkoľvek pozornosť na akcie, ako je vstup používateľa alebo pohyb. Babylon.js je bezplatný a open-source webový renderovací engine založený na WebGL, ktorý zahŕňa podporu pre WebXR a multiplatformové aplikácie vo forme Babylon Native. Babylon.js ponúka množstvo ďalších funkcií vrátane editora node Material Editor s nízkym kódom na vytváranie shaderov a hlbokú integráciu s funkciami WebXR, ako je správa relácií a vstupov. Webová stránka Babylon.js poskytuje aj prostredia detských ihrísk a pieskovísk.

Hoci výber medzi Babylon.js a Three.js závisí od preferencií vývojárov, Three.js sa zameriava na rozšíriteľnosť pred komplexnosťou s množstvom vymeniteľných modulov, ktoré pridávajú doplnkové funkcie. Babylon.js medzitým poskytuje plnohodnotnejšiu sadu, ktorá sa môže ukázať ako prehnaná pre menšie projekty, ale ponúka potrebnú plochu pre mnohé implementácie.

Predstavujeme Babylon.js

Aj keď môžete všetky interakcie s rozhraním WebXR Device API zvládnuť sami, Babylon.js poskytuje voliteľné Predvolený pomocník zážitku ktoré môžu nastaviť a ukončiť relácie vo vašom mene. Pomocník predvoleného prostredia WebXR zahŕňa aj ovládacie prvky vstupu a ďalšie funkcie, ako aj základné tlačidlo HTML na vstup do pohlcujúceho zážitku. Ak chcete experimentovať s predvoleným pomocníkom, napíšme stránku HTML, ktorá poskytuje plátno pre zobrazenie XR a poskytuje zdroj Babylon.js z CDN. Môžeš túto stránku HTML nájdete v úložisku GitHub pre tento návod na |_+_| pobočka.

Otvoriť |_+_| vo vašom preferovanom editore kódu a v prehliadači. V tejto prvej časti tutoriálu skontrolujeme súbor namiesto pridávania kódu. V prehliadači s povoleným WebXR, ako je Chrome alebo Firefox (s povoleným príznakom funkcie WebXR v prípade Firefoxu), uvidíte plátno obsahujúce počiatočné ihrisko Babylon.js – akýsi Hello World – a môžete ťahať myšou. na obrazovke, aby ste sa preorientovali. Snímka obrazovky nižšie zobrazuje tento počiatočný stav.

Snímka obrazovky zobrazujúca počiatočný stav predvoleného ihriska Babylon.js.

Počiatočný stav predvoleného ihriska Babylon.js. ( Veľký náhľad )

Najprv vložíme najnovšie verzie Babylon.js z Babylon CDN, ako aj ďalšie užitočné závislosti. Pridáme tiež niekoľko štýlov pre náš prvok plátna scény v |_+_|, kde sa vykreslí náš pohlcujúci zážitok.

|_+_|

Teraz je čas na implementáciu Babylon.js. Vo vnútri |_+_| prvok tesne pred koncovkou |_+_| začneme identifikáciou nášho prvku canvas do Babylon.js počas vytvárania nového motora Babylon s predvolenou konfiguráciou.

|_+_|

www.smashingmagazine.com