Technológie virtuálnej reality sú čoraz populárnejšie aj medzi bežnými používateľmi, a preto vznikajú viaceré riešenia pre vytváranie obsahu virtuálnej reality. Obľúbeným miestom pre zdieľanie obsahu je nepochybne internet. Spojením technológií internetových prehliadačov a virtuálnej reality vzniklo WebVR. A-frame je webový rámec, ktorý umožňuje jednoduché a rýchle vytváranie obsahu virtuálnej reality pre webové rozhrania. V tomto článku by som rád priblížil webový rámec A-frame a uviedol jeho vlastnosti, ktoré umožňujú vytvárať zážitky virtuálnej reality jednoduchšie. Uvediem aj príklad pre vytvorenie veľmi jednoduchého modelu virtuálnych rúk vo vývojovom prostredí Glitch s podporou A-frame.
Čo je A-frame
Podľa dokumentácie A‑frame je webový rámec na vytváranie webových aplikácií virtuálnej reality. A‑Frame je založený na webovom jazyku HTML, vďaka čomu urýchľuje osvojenie si práce s týmto rámcom. Napriek tomu to však nie je len obyčajný značkový jazyk pre vytváranie 3D scén. Jadrom tejto platformy je výkonný entitno-komponentový rámec, ktorý poskytuje deklaratívnu, rozšíriteľnú a zostaviteľnú štruktúru pre knižnicu three.js.
A-frame bol vyvinutý ako ľahký a zároveň výkonný spôsob vývoja obsahu pre virtuálnu realitu.
A-frame je nezávislý projekt s otvoreným zdrojovým kódom, ktorý má najväčšiu komunitu medzi nadšencami virtuálnej reality. A-Frame podporuje väčšinu súprav virtuálnej reality, ako je HTC Vive, Oculus Rift, Windows Mixed Reality, Daydream, GearVR, Cardboard, Oculus Go. Aj keď
A-Frame podporuje celé spektrum, kladie si za cieľ definovať úplne pohlcujúce interaktívne zážitky virtuálnej reality, ktoré idú nad rámec základného 360° obsahu, pričom plne využívajú sledovanie polohy a ovládačov.
Vlastnosti rámca A-frame
Rámec A-frame má viacero vlastností, ktoré ho odlišujú od ostatných a zjednodušujú vytváranie obsahu virtuálnej reality.
-
Deklaratívne HTML – Ako bolo už aj vyššie spomínané rámec A-frame je založený na jazyku HTML. HTML je jazyk, ktorý je jednoduchý na čítanie, porozumenie, kopírovanie a vkladanie. Vďaka HTML je rámec A-frame prístupný pre každého a môže ho začať využívať každý, ako napríklad vývojári webov, nadšenci VR, umelci, návrhári, pedagógovia, výrobcovia alebo aj deti.
-
Jednoduché vytváranie VR scény – Vďaka rámcu A-frame je možné vytvoriť VR scénu veľmi rýchlo a jednoducho. Stačí vložiť značku pre skript “
<script>“ a značku pre A-frame scénu “<a-scene>“. Rámec A-frame zvládne nastavenie základného 3D programu a nastavenie VR scény, ako aj nastavenie základných ovládacích prvkov. Vďaka A-frame nie je potrebné inštalovať nič na viac, ani nie je treba vykonať žiadne kroky naviac pre zostavenie funkčnej VR scény. -
Architektúra komponentov-entít – A-frame je výkonný rámec three.js, ktorý poskytuje deklaratívnu, zložiteľnú, opakovane využiteľnú štruktúru entít a komponentov. HTML je len špičkou ľadovca A-frame. Vývojári majú neobmedzený prístup k JavaScriptu, DOM API, three.js, WebVR a WebGL.
-
Vizuálny inšpektor - A-Frame poskytuje zabudovaný praktický vizuálny 3D inšpektor. Ak je otvorená ľubovoľná scéna A-Frame, stlačením kombinácie kláves “
<ctrl> + <alt> + i“ je možné spustiť vizuálny inšpektor. Za pomoci vizuálneho inšpektora je možné meniť vlastnosti entít vo VR scéne a upravené hodnoty vlastností následne využiť v nasledujúcich krokoch vývoja VR aplikácie. Na nasledujúcom obrázku je zobrazené prostredie vizuálneho inšpektora.
Vizuálny inšpektor rámca A-frame -
Výkon - A-Frame je od základu optimalizovaný pre WebVR. Aj keď A-Frame používa DOM, jeho prvky sa nedotýkajú nástroja rozloženia prehliadača. Aktualizácia 3D objektov sa vykonáva v pamäti s malým odpadom a režijnými nákladmi. Najinteraktívnejšie a najrozsiahlejšie aplikácie WebVR sa vytvorili v A-Frame s hladkým chodom 90 snímok za sekundu.
-
Multiplatformové VR – Rámec A-frame umožňuje vytvárať aplikácie VR pre rožne platformy ako sú: Vive, Oculus, Windows Mixed Reality, Daydream, GearVR, Cardboard s podporou všetkých príslušných ovládačov. V prípade, že k dispozícii človek nemá VR headset, A-frame stále funguje aj na štandardných stolových počítačoch a smartfónoch.
-
Osvedčené a škálovateľné - Rámec A-Frame používali spoločnosti ako Google, Disney, Samsung, Toyota, Ford, Chevrolet, Amnesty International, CERN, NPR, Al Jazeera, The Washington Post a dokonca aj NASA. Do rámca A-frame niektoré z nich aj prispeli. Veľký vplyv mali spoločnosti ako Google, Microsoft, Oculus, and Samsung, čím sa použiteľnosť A-frame výrazne zvýšila.
Entita-komponentový systém rámca A-frame (ECS)
Na základe vyššie uvedených vlastností rámca A-frame je jasné, že to je rámec využívajúci three.js a systém entít a komponentov. Podľa opisu dokumentácie rámca A-frame, je ECS (anglická skratka entity-component system) bežným a žiadaným vzorom, ktorý je využívaný pri vývoji 3D scén a hier. Tento systém nasleduje princíp kompozície nad dedením a hierarchiou. Využitie ECS so sebou prináša viacero nasledujúcich výhod:
- Väčšia flexibilita pri definovaní objektov zmiešaním a spojením opakovane použiteľných častí.
- Eliminuje problémy dlhých dedičských reťazcov so zložitou prepletenou funkčnosťou.
- Podporuje čistý dizajn prostredníctvom oddelenia, zapuzdrenia, modularizácie, opätovného použitia.
- Najškálovateľnejší spôsob zostavenia VR aplikácie z hľadiska zložitosti.
- Osvedčená architektúra pre vývoj 3D a VR.
- Umožňuje rozšírenie nových funkcií (prípadne ich zdieľanie ako komponentov komunity).
Reprezentácia častí ECS v rámci A-frame
Každá časť ECS ma v rámci A-frame svoju reprezentáciu vďaka API. Tieto reprezentácie sú nasledovné:
- Entity sú reprezentované elementom a prototypom
<a-entity>. - Komponenty sú reprezentované ako atribúty HTML značky
<a-entity>. Pod komponentmi sú objekty obsahujúce schému, obslužné programy životného cyklu a metódy. Komponenty sa registrujú prostredníctvom API nasledovne: AFRAME.registerComponent(názov, definícia). - Systémy sú reprezentované atribútmi HTML značky
<a-scene>. Systémy sú podobné komponentom v definícii. Systémy sa registrujú prostredníctvom API nasledovne: AFRAME.registerSystem (názov, definícia).
Syntax rámca A-frame
Ako je vyššie spomenuté entity sú reprezentované značkou <a-entity>. Ďalej je ku nim možné pripojiť komponenty ako atribúty značky <a-entity>. Väčšina komponentov má viac vlastností, ktoré sú reprezentované syntaxou podobnou CSS HTMLElement.style. Táto syntax má podobu dvojbodky “:“ oddeľujúcej názvy vlastností od hodnôt vlastností a bodkočiarky “;“, oddeľujúcej rôzne deklarácie vlastností. Postup zápisu je nasledovný :
<a-entity
${názov_komponentu} = "${názov_vlastnosti_1}: ${názov_vlastnosti_2};
${názov_vlastnosti_1}: ${názov_vlastnosti_2}"
></a-entity>
Napríklad máme entitu s pripojenými komponentmi geometrie, materiálu, svetla a polohy s rôznymi vlastnosťami a hodnotami komponentov. Príkladom je kocka, ktorá je definovaná týmito komponentami entity.
Čo je to Glitch
Glitch je online vývojové prostredie založené na myšlienke spolupráci viacerých developerov na jednom projekte. Projekty vytvárané v prostredí glich je jednoduché zdieľať medzi ostatných developerov, ktorí môžu následne začať pracovať na projekte, ktorý im bol pridelený. Glitch podporuje viacero rámcov, pre ktoré má vytvorené aj základné projekty pre tieto rámce. Taktiež je možné tieto projekty použiť ako odrazový mostík pre vytvorenie si vlastného projektu. Ponúkané základné projekty pre rámce sú uvedené na obrázku nižšie. Pomocou nástroja Glitch je možné vytvoriť čokoľvek, od kvalitnej statickej webovej stránky až po kvalitné webové aplikácie webovej virtuálnej reality. Práve pre tieto vlastnosti tohto vývojového prostredia sa využíva prostredie Glitch aj na predmete Systémy virtuálnej reality, kde študentom bol vytvorený základný projekt od ktorého sa mohli odraziť a robiť na svojich zadaniach. V praxi to znamená, že pridelený projekt si skopírovali a pracovali na ňom ako na vlastnom projekte.
Zdieľanie projektov vo vývojovom prostredí Glitch
Glitch ponúka jednoduché vytváranie projektov na základe kopírovania základných projektov. Podobne funguje aj zdieľanie už rozpracovaných projektov. Zdieľanie sa v kontexte s vývojovým prostredím Glitch nazýva “Remix“. Remixovať projekt je vlastne vytvorenie si kópie projektu, ktorá je nezávislá na zdrojovom projekte. Následne si s kópiou projektu môže vývojár zaobchádzať ako len potrebuje. Celý postup ako si projekt remixovať je na možné vidieť na nasledujúcom videu.
Ako je viditeľné na videu vyššie, vývojár po tom ako remixoval daný projekt, sa dostáva rovno do vývojového prostredia. Toto prostredie prevezme všetky potrebné nastavenia od remixovaného projektu, ako aj všetky jeho súbory.
Online vývojové prostredie Glitch
Vývojové prostredie sa dá použiť v samotnom webovom prehliadači a má viacero vlastností. Jednou z nich je aj strom štruktúry súborov projektu. Ďalšou časťou je textový editor, kde developer upravuje súbory projektu. Veľkou výhodou vývojového prostredia Glitch je náhľad na výslednú aplikáciu v reálnom čase. To znamená, že každú zmenu v kóde je následne viditeľná v živom náhľade. Tento náhľad je možné spustiť v okne kde beží vývojové prostredie, prípadne aj na novom okne prehliadača. Prostredie ponúka nástroj “Rewind“, ktorým používateľ vie prechádzať históriu zmien v projekte. Ako používateľ mení časovú stopu programu v tomto nástroji, tak mu prostredie zobrazuje zmeny v súboroch. Ďalším nástrojom je “Logs“ predstavujúci konzolu zachytávajúcu logy prostredia a je v ňom zahrnutý aj debugger. Posledným nástrojom je “Terminal“ umožňujúci pracovať so súbormi projektu ako v konzole operačného systému založenom na Linuxe. Vývojové prostredie ponúka možnosť nahrávania zdrojových súborov, napríklad pre modeli virtuálnych objektov. Na nasledujúcom obrázku je vidieť opisované vývojové prostredie. V pravej časti obrázku sa nachádza strom štruktúry projektových súborov a v strede je textový editor na úpravu súborov. V pravej časti beží živá ukážka projektu, na ktorej sa automaticky ukáže každá zmena v projekte, takže developer ma odozvu v prakticky okamžite. Na spodnej časti prostredia, s tmavým pozadím, sa nachádza spomínaný nástroj “Terminal“.
Využitie A-frame a vývojového prostredia Glitch
Kombináciou vývojového prostredia Glitch a rámca A-frame, je možné získať efektívny nástroj na vývoj rôznorodých projektov pre virtuálnu realitu. Ako príklad využitia vlastností rámca A-frame s vývojovým prostredím Glitch uvediem implementáciu virtuálnych rúk pre avatara, ktorá bola implementáciouiou vytvorenounou počas vývoja zložitejšieho riešenia virtuálnych rúk, ako rozšírenie už existujúceho systému LIRKIS G-CVE.
Návrh virtuálneho modelu rúk
Pre reprezentáciu rúk v 3D priestore je potrebné si vytvoriť najprv abstrakciu reálnych rúk. V tomto modeli by sa mali nachádzať reprezentácie kostí a kĺbov, ktoré vieme pre jednoduchosť návrhu modelu reprezentovať ako tyče a gule. Teda ramenný kĺb, lakťový kĺb a kĺby zápästia môžeme reprezentovať v modeli ako gule a rameno s predlatkm sú v návrhu reprezentované tyčami. Nakoľko cieľom je vytvoriť model pre obe ruky používateľa, je potrebné uvažovať nad modelom, ktorý reprezentuje kĺby pravej aj ľavej hornej končatiny človeka. Časťou navrhovaného modelu sú aj všetky ostatné svaly a kosti, ktoré vytvárajú spojenie medzi pravým a ľavým ramenom. Navrhnutý model je možné vidieť na nasledujúcom obrázku.
Postupná implementácia modelu v prostredí Glitch
Prvým krokom pri implementácií je v tomto prípade “Remix“-ovať existujúceho projektu v prostredí Glitch. Pre tento príklad bol vytvorený osobitný projekt, ktorého základom je kostra projektu využívaná na hodinách predmetu Systémy virtuálnej reality. Táto kostra bude rozšírená o implementáciu virtuálneho modelu rúk.
Projekt obsahuje dva súbory, ktoré sú pre ukážku dôležité:
- index.html - html súbor obsahujúci implementáciu celej virtuálnej scény spoločne aj s implementáciou virtuálnych rúk
- shoulders.js - skript jazyka JavaScript obsahujúci implementáciu vlastného komponentu.
“Remix“-ovať tento projekt je možné na tomto odkaze, postup “Remix“-ovania je rovnaký ako vo videu v ďalšej kapitole.
Pridanie modelov virtuálnej ruky
Aby náš model vo virtuálnom svete mal nejakú podobu, potrebujeme do projektu pridať modely objektov pre časti modelu virtuálnych rúk. Vo vývojovom prostredí sa dajú modely nahrávať do projektu dvoma spôsobmi. A to nahratím do zložky “assets” (spôsob uvedený vo videu nižšie) alebo nahratím súboru “zip” a jeho následné rozbalenie pomocou terminálu.
Druhý pôsob je o niečo zložitejší, ale je rýchlejší ak chceme nahrať do projektu veľké množstvo modelov. Je však dôležité pri zabalení do súboru “.zip” dodržať rovnakú štruktúru priečinkov ako má samotný projekt. Celý postup je možne vidieť na nalsedujúcom videu.
Príkazy použité v nástroji “Terminal” boli:
wget -O file.zip odkaz_na_súbor_.zip
unzip file.zip -d
rm file.zip
refresh
Aby sme tieto modeli vedeli do virtuálnej scény pridať, potrebujeme ich načítať do scény. Najprv je potrebné určiť umiestnenie, kde sa má model hľadať. Po správnom definovaní umiestnenia je možné vytvoriť entitu, ktorá bude používať daný model. Nasledujúci kus kódu reprezentuje príklad, kde v štruktúre HTML súboru je možné inicializovať model (riadok č. 15) a následne ho použiť.
<html>
<head>
...
rôzne skripty
...
</head>
<body>
<a-scene>
<a-assets timeout="60000">
<a-asset-item //priklad ked sa nahral model do priečinka Assets
id="ramena_gltf"
src="https://cdn.glitch.com/cb83be77-a6f6-49c4-92f5-6ba2ba31189b%2Framena_gltf.gltf?v=1617983021681"
></a-asset-item>
<a-asset-item //priklad ked sa nahral model do struktúry projektu
id="rameno_gltf"
src="objects/rameno_gltf.gltf"
></a-asset-item>
</a-assets>
<a-entity
id="shoulders"
gltf-model="#ramena_gltf"
position="0 0 0"
rotation="0 0 0"
></a-entity>
<a-entity
id="larm"
gltf-model="#rameno_gltf"
position="0 0 0"
rotation="0 0 0"
></a-entity>
...
zvyšok implementácie
...
</a-scene>
</body>
</html>
Využitie existujúceho komponentu rámca A-frame
Jedna z výhod rámca A-frame je široká ponuka existujúcich komponentov. Jeden takýto existujúci komponent využitý v modeli virtuálnych rúk je komponent hand-controls. Je to komponent, ktorý vo virtuálnom svete dodá reprezentáciu ovládačov používateľa. Komponent má svoj vlastný model ľudskej ruky, správanie a má vlastné animácie jednoduchých gest ruky na základe stavu tlačidiel na ovládačoch. Ukážka modelu ja znázornená na nasledujúcom obrázku.
Pridanie týchto rúk do virtuálnej scény je v celku jednoduché, pre obe ruky potrebujeme jednu entitu. Tieto entity budú mať v sebe uvedený komponent hand-controls. Zápis týchto entít je nasledovný.
<a-entity
id="rhand"
hand-controls="hand: right; handModelStyle: highPoly; color: #FFFFFF"
></a-entity>
<a-entity
id="lhand"
hand-controls="hand: left; handModelStyle: highPoly; color: #FFFFFF"
></a-entity>
Celú dokumentáciu komponentu hand-controls je možné nájsť na stránke rámca A-frame.
Ďalší už existujúci komponent potrebný pre model virtuálnych rúk, je komponent look-at. Úlohou tohto komponentu je natočiť entitu smerom k cieľovej entite. Tento komponent sa využije na to, aby sa entita ramena natočila za ramenným kĺbom.
Vytvorenie vlastného komponentu
Ďalšia vlastnosť rámca A-frame je možnosť vytvorenia vlastného komponentu. Vlastný komponent je možné definovať v samotnom HTML súbore s využitím značky <script>. Lepšou definíciou vlastného komponentu je definícia mimo hlavného súboru HTML. V tomto prípade bol vytvorený súbor shoulder.js obsahujúci implementáciu vlastného komponentu. Funkciou tohto komponentu je zabezpečiť pohyb entity ramien. Komponent bude nasledovať cieľovú entitu s tým, že poloha cieľovej entity a entity s komponentom sa bude líšiť iba vo výške, v ktorej sa nachádzajú. Tento rozdiel je výška krku avatara. Komponent rieši aj rotáciu ramien v prípade, ak rozdiel rotácie cieľovej entity a entity s komponentom je väčší, ako hraničná hodnota. V takom prípade upraví rotáciu entity s komponentom v takom smere, aby rozdiel klesol pod hraničnú hodnotu.
Prvým krokom pri vytváraní vlastného komponentu je jeho registrácia. Na túto registráciu sa používa funkcia rámca A-frame, a to registerComponent.
AFRAME.registerComponent('shoulders', {
/*
telo komponentu
*/
});
Ďalším krokom je pridanie schémy komponentu opisujúca, aké vlastnosti tento nový komponent bude mať. Schéma sa definuje na začiatku komponentu. V tomto prípade schéma bude obsahovať iba jednu vlastnosť, a to selektor cieľovej entity. Názov vlastnosti je “target” a hodnota “selector” s typom “type”.
AFRAME.registerComponent('shoulders', {
schema: {
target: { type: "selector" }
},
/*
telo komponentu
*/
});
Ak komponent už obsahuje potrebnú schému, môžeme využiť niektoré metódy životného cyklu komponentu. V tomto prípade to bude metóda tick(). Metóda tick() je metóda, ktorá sa volá pri každom vykreslení snímky virtuálnej scény. Všetky ďalšie dostupné metódy sú uvedené v dokumentácii dostupných metód životného cyklu komponentu.
AFRAME.registerComponent('shoulders', {
schema: {
target: { type: "selector" }
},
tick: function(time, timeDelta) {
/*
telo funkcie tick
*/
}
});
Vo funkcii tick() sa vykonajú všetky potrebné príkazy, ktoré zabezpečujú potrebné správanie opísané vyššie. Celú implementáciu funkcie tick() je možné nájsť v projekte, ktorý si môžete “Remix“-ovať.
Pre použitie vlastného komponentu, je potrebné súbor shoulder.js pripojiť do HTML súboru pomocou značky <script> s uvedením jeho celej cesty.
Podobne by sa komponent mohol definovať priamo v HTML súbore pomocou značky <script>, ktorá by obsahovala celý skript súboru shouder.js.
<html>
<head>
...
ostané skripty
...
<script src="js/shoulders.js"></script>
</head>
<body>
...
zvyšok implementácie
...
</body>
</html>
Zostrojenie virtuálneho modelu rúk
Na zostrojenie modelu virtuálnych rúk máme všetky potrebné objekty spomenuté vyššie. Posledným krokom je správne použitie týchto entít a komponentov. Pre tento jednoduchý model sa pozícia a rotácia objektov určuje len na základe dedičnosti. Je dôležité si uvedomiť, ako sú entity v scéne štruktúrované. Nasledujúci graf opisuje vzťahy medzi entitami v scéne a jednotlivé entity obsahujú ich hlavné vlastnosti. Ako príklad je možné uviesť entitu “rarm”, postupným dedením sa pozícia tejto entity odvíja od entity “rhand”, ale zároveň komponent “look-at” ju spája s entitou “rshoulder”.
Presná implementácia aj so všetkými ostatnými komponentami a vlastnosťami entít, je v projekte ktorý si je možné “Remix”-ovať.
Výsledný model virtuálnych rúk
Ak boli všetky potrebné záležitosti správne implementované a použité, výsledný model virtuálnych rúk by mal vyzerať ako na nasledujúcom videu.
Záver
Vývojové prostredie Glitch spolu s rámcom A-frame ponúkajú jednoduché a efektívne nástroje na vytváranie obsahu pre webovú virtuálnu realitu. K tomu, že uľahčujú prácu pri vývoji VR obsahu, Glitch ponúka mnoho ďalších nástrojov na to, aby sa mohli vyvíjať projekty v spolupráci s viacerými vývojármi. Možnosť vyvíjané projekty zdieľať so všetkými potrebnými nastaveniami a modelmi využívaných v projekte dodáva vývoju úžasnú flexibilitu. Do vývoja projektu sa môže zapojiť nový vývojár bez zdĺhavého nastavovania vývojového prostredia prostredia, čím môžu začať vznikať kvalitnejšie a zaujímavejšie projekty pre webovú virtuálnu realitu.