Hľadal som riešenie pre vytvorenie AR/ VR konceptu, teda rozšírenej reality pre webaplikáciu. Zároveň som vyžadoval, aby mohol byť spúšťačom pre AR scénu naskenovaný QR kód. Je dostupných mnoho knižníc pre AR, líšia sa zložitosťou, či možnosťami. Veľmi zaujímavá bola AR.js, ktorá bola prezentovaná aj na blogovej platforme Medium od Nicolòa Carpignoliho. Priamo popisované použitie s QR kódom a dokumentáciou dema na Github Pages. Bohužiaľ, samotný tutoriál zanikol pred viac než 6-timi rokmi a dnes už nie je dostupný.

Samozrejme, že v commitoch repozitára by šlo pôvodnú verziu nájsť, no nemusela by už dnes byť plne kompatibilná s aktuálnou verziou knižnice, či funkciami, ktoré obsahuje. Ďalej som narazil na A-Frame, ktorý sa priamo označuje ako WebVR framework a bol pôvodne vyvíjaný tímom Mozilla VR. Je postavený nad 3D knižnicou Three.js. Samotný framework A-Frame nemá API pre skenovanie QR kódov, musíme preto použiť niečo iné, ľubovoľné. To mi umožnilo využiť identický QR skener, ako sme používali v aplikácii Watmonitora, kedy sa po preskenovaní QR kódu vypísali dáta do HTML tabuľky.

V tomto prípade to bude fungovať ako trigger pre vyvolanie AR scény, ktorá sa vykreslí do priestoru. Začal som teda so spúšťaním hotových príkladov, aby som pochopil, ako to vôbec funguje, pričom som do riešení obsiahol už aj samotné skenovanie QR kódu, aby došlo k trigger akcii. Triggerom nie je samotné načítanie QR kódu, ale načítanie konkrétneho QR kódu, ktorý nesie určitý obsah. Môže ísť o text, URL adresu, hash a podobne.

Začal som teda s príkladom, ktorý vykreslí kocku s rotujúcou animáciou v priestore po naskenovaní preddefinovaného QR kódu. Práca s frameworkom A-Frame bola zaujímavá, keďže práca s objektami je úplne odlišná od toho, ako poznám web design / development, kedy sú prakticky všetky veci definované v percentách, či pixeloch. V prípade A-Framu sú objekty a ich pozícia v priestore definovaná trojrozmerne v metroch. Príde mi to ako v hernom engine, napr. Unity, kde sa objekty podobne vytvárajú do prostredia a trojdimenzionálneho sveta.

Samotná mierka v akej objekt vidíte je definovaná jeho rozmermi, ale zároveň aj jeho vzdialenosťou od kamery. Mierku rozmerov je ale možné definovať aj priamo parametrom, teda objekt môžeme mať 10x fyzicky väčší, ale zmenšíte ho parametrom scale. Je potrebné spomenúť aj rozdiel medzi AR a VR. Pri AR vykresľujete objekt do reálneho priestoru, ktorý používateľ vidí na displeji a je snímaný kamerou, v prípade VR vytvárate priamo priestor v ktorom sa pohybuje - samostatný svet, vrátane pozadia a celej scény. Pre účely testovania mi režim VR príde lepší, nakoľko tam bude menej rušivých elementov a do AR sa to môže prepracovať až vo finálnej fáze.

Trochu mi trvalo pochopiť to, že sa pracuje v trojdimenzionálnom systéme. Pri skúšaní bolo zaujímavé vidieť, že s telefónom sa môžete ľubovoľne otáčať a objekt je stále dostupný v mieste pôvodného natočenia telefónu, kde bol zaznamenaný QR kód. Rovnako tak bolo možné obraz vyosiť aj skrz touch na obrazovku telefónu do bokov. Pri spustení z počítača je možné sa klávesami WASD pohybovať aj priamo v AR scéne.

Keď som aspoň elementárne pochopil, ako najjednoduchší príklad funguje, začal som bádať po vhodnom komponente pre vizualizáciu dát z projektu Watmonitor (hladinomera) skrz AR. Keďže pôjde o IoT dáta, bude vhodné zvoliť niečo ako dashboard, teda širokouhlú obrazovku. Voľba padla na objekt plane, ktorý umožňuje definovanie jeho polohy, ale aj rozmerov v priestore. Zvolil som šírku 4 a výšku 2,25 metra . Tento pomer odpovedá širokouhlej obrazovke s pomerom strán 16:9. Pokračoval som so samotným vykreslením a tiež som odstránil to, aby som videl video z kamery. Nahradil som pozadie, aby nič okolo nepôsobilo ako rušivý element.

Rovnako tak je badateľný zoom (FOV) vzhľadom na to, či máte telefón na výšku, alebo na šírku. Pri rotácii na výšku je objekt bližšie ako keď máte telefón na šírku. Postupnými krokmi som pokračoval k pridaniu textového výstupu. Použil som JSON parser z Watmonitora, aby som dokázal vykresliť "živé", respektíve posledné známe dáta o objeme vody v studni / nádrži a aktuálnej výške od dna, doplnené informáciami o názve studne a čase posledného záznamu.

To mi na prvý test spoľahlivo fungovalo, avšak nemal som zvolenú vhodnú veľkosť fontu a tiež pozíciu (aby bol text na objekte plane, ale zároveň aj aby bol výškoho pri ňom), šlo ale samozrejme o testovanie neskoršiu a tvorivú činnosť pre zarovnanie textu s predlohou - objektom plane.

AR webplikácia tak začala pomaly nadobúdať kontúry a smer funkčnej aplikácie, ktorú je možné viazať na IoT projekt. Texty je možné zapuzdriť do kontajera (entity). Tým je možné efektívne nastavovať totožné parametre celej textovej sekcii (skupine viacerých elementov). V A-Frame frameworku to funguje tak, že tu funguje systém hierarchie a všetky prvky zdieľajú súradnicový systém vzhľadom na rodičovský objekt. Preto napríklad súradnice 0 0 0 odpovedajú stredu rodičovského objektu / prvku, i keď ten je hlbšie v priestore, keďže jeho súradnice sú vzhľadom na kameru scény.

Pohral som sa teda s textami, nastavil im farbu, rovnako tak aj objektu plane. Ako je možné vidieť, celá skupina textov je zarovnaná na stred. To nemusí byť vždy výhoda, najmä ak používate texty rôznej dĺžky. Môže byť problémové texty potom rozumne zarovnať a preto je možné použiť aj iné typy zarovnaní, napr. zľava, sprava... Textom je možné nastaviť rôzny font, ale aj veľkosť skrz width parameter, tak som sa trochu pohral aj s tým.

Tu som narazil aj na takzvaný problém s "z-fighting", čo je situácia, kedy pri otáčaní sa v AR scéne bliká text, resp. pozadie (plane) za ním, alebo sa robia pruhy. Je to spôsobené tým, ako grafická karta vykresľuje scénu a dochádza k prelínaniu medzi osou z a robí to takýto glitch. Pomohlo pridanie ofsetu na z súradnice oboch entít. I keď sa scéna po naskenovaní QR kódu objaví dynamicky, obsah pôsobí dosť staticky v takomto prevedení, keďže je to len text na 2D podložke, i keď majú aj tretí rozmerový parameter.

Preto som ho chcel rozšíriť aj o vizualizáciu niečo ďalšie, napríklad obrázky, grafiku, či 3D model reprezentujúci studňu aj s úrovňou naplnenia. Do štandardného JSON výstupu som si doplnil ďalšie kľúče s hodnotami, konkrétne celkovú hĺbku studne, aby som dokázal v percentách vyjadriť aktuálne naplnenie studne, teda že v prípade hĺbky studne 400 cm odpovedá hladina vody 327 cm naplneniu studne na 81,75 %.

Samotnú nádobu sa mi podarilo vyrenderovať z objektov cylinder, kde môžem dynamicky nastavovať jednak veľkosť celej nádoby (studne / nádrže) a druhý cylinder reprezentuje hladinu vody. Samotné cylindre su urobené tak, že nemajú vrch ani spodok, tie sú plne priehľadné. V prípade valca, ktorý reprezentuje vodu je horný "surface" lid vytvorený ako plný kruh a je mu možné nastavovať aj špecifické materiály. Vďaka tomu bude možné pridať efekt hladiny, ktorá sa dynamicky vlní a podobne, alebo je možné pridať aj špecifický materiál, ktorý zvýši odraz nasvietenia, teda sa odlíši od zvyšku stĺpca vody. Pre objekt plane je možné nastaviť povrch dreva formou textúry.

Pomerne veľa sa dá experimentovať s nasvietením scény, čo dokáže dramaticky vylepšiť používateľský zážitok v AR scéne. K objektom je možné pridať aj lable v určitej výške, ktoré môžu niesť informáciu o tom, čo graficky vidíme v objekte, čo reprezentuje.

Pri vývoji nie je nutné vždy generovať nový kód a ten deplynuť na serveri pre vykonanie zmien. Kombináciou kláves Ctrl + Alt + I môžete otvoriť A-Frame Inspector, kde môžete pracovať priamo v scéne, prezerať si jednotlivé entity, objekty a ich vlastnosti, ktoré môže v reálnom čase aj meniť. Toto môže pomôcť najmä vtedy, ak sa snažíte niečo dopasovať na konkrétne miesto a viete si objekt efektívne posúvať v osiach. Po nasadení na správne miesto si len skopírujete súradnice, kde sa objekt vykreslí a nemusíte sa hrať po desatinkách metra a zakaždým spúšťať deploy aplikácie, čo môže byť zdĺhavé, najmä pri minoritných úpravách, kedy chcete vidieť zmenu hneď.


Ako hrátky s A-Frame frameworkom dopadli v spojitosti s Watmonitorom si ukážeme už čoskoro v druhom článku. Rozoberieme si finálne riešenie, spomeniem problémy na ktoré som narazil pri práci s AR scénou, objektmi. Popíšeme si aj ďalšie veci relevantné pre HTML5 aplikáciu s A-Frame frameworkom. Nepochybne najväčšia práca bude predovšetkým s nasvietením, ktoré dokáže pridať rôzne efekty odrazov, svetlostí.

Prvý test AR scény s viacerými objektmi a náhodným nasvietením scény na smartfóne Xiaomi s OS Android (HyperOS) v prehliadači Chrome. Improvizovaný pohyb pomocou tlačidiel v priamej osi, nakoľko telefón nemá wasd-controls komponent frameworku A-Frame, ktorý je natívne podporovaný len u počítačov. U smartfónu je možné sa štandardne len otáčať okolo svojej osi či už otáčaním telefónu, alebo ťahaním prsta po obrazovke.

Pre telefón je možné implementovať aj pohyb na základe reálneho pohybu osoby v reálnom svete. Je potrebné implementovať WebXR komponent, čo je o niečo zložitejšie. Samotný pohyb nie je len kombináciou senzorov ako akcelerometer, gyroskop a kompas, ale taktiež z informácii získaných priamo z kamery, kde je samotný pohyb viditeľný s meniacim sa obrazom.

Využívajú sa tu aj vstavané knižnice v zariadeniach ako ARCore, nad ktorými WebXR beží. Tieto knižnice dokážu rozpoznať rovinu, odhad pozície  a ponúka vyššiu presnosť v priestore, kedy sa môže scéna dynamicky prispôsobiť možnostiam reálneho priestoru. WebXR má na toto aj rôzne parametre na základe priestoru, kde ho chcete použiť, líšia sa pomerom asistencie a prevádzania mierky AR scény podľa priestoru limitovaného / nelimitovaného. To môže byť zaujímavé aj pri využití VR headsetu, či lowcost cardboard verzie. Zážitok z AR aplikácie tak bude prirodzenejší.

Prístupov 886

Kvalita článku