7. WebXR: Alternatíva založená na prehliadači

WebXR umožňuje vývojárom vytvárať pohlcujúce zážitky, ktoré bežia priamo v prehliadači Meta Quest. Je postavený na štandardných webových technológiách, vďaka čomu je "VR na webe" rovnako prístupný ako webová stránka.

Prečo si vybrať WebXR?

• Bezproblémový prístup: Používatelia nemusia sťahovať veľké súbory z Meta Store; jednoducho kliknú na URL a kliknú na "Enter VR."
• Frameworky: Využíva výkonné JavaScriptové knižnice ako Three.js, A-Frame (HTML) alebo Babylon.js.
• Multiplatformové: Jedna WebXR aplikácia často beží na Quest 3, Android telefóne (AR režim) alebo stolnom počítači.
  
  

7.1 Analýza knižnice

Three.js (Renderovací engine)

Three.js zvláda ťažkú prácu WebGL. Spravuje scénu, kameru a renderer. Vo vašom kóde je renderer nastavený na alfa: true, čo je pre AR kľúčové, pretože umožňuje "prázdnym" častiam prehliadača stať sa oknom do reálneho sveta.

TensorFlow.js & COCO-SSD

COCO-SSD (Common Objects in Context - Single Shot MultiBox Detector) je model trénovaný na rozpoznávanie 80 tried objektov. Krásou TF.js je jeho WebGL backend, ktorý zabezpečuje, že výpočty AI sa vykonávajú na GPU Questu, nie na CPU, čím zabraňuje prehrievaniu zariadenia.

7.2 Matematická projekcia (z 2D do 3D)

Toto je najtechnickejšia časť scenára. AI model vracia bbox (ohraničujúci rámec) v pixeloch (napr. x=100, y=200).

Funkcia detectionTo3D vykonáva neprojekciu:

• Normalizácia: Prevádza súradnice obrazovky na rozsah od $-1$ do $+1$.
• Výpočet zorného poľa: Zohľadňuje zorné pole kamery.
• Vektorový lúč: Vytvára smerový vektor od polohy hlavy používateľa smerom k objektu.
• Umiestnenie: Umiestni 3D označenie na tento vektor v definovanej vzdialenosti (DIST).

 

7.3 Implementácia testovania zásahov

Testovanie zásahov umožňuje aplikácii "vystreliť" neviditeľný lúč (raycast) do reálneho priestoru, aby detegovala prieniky s podlahami alebo stolmi. Keď hitTestSource vráti výsledok, kurzor (zelený kruh) sa prichytí do danej pozície (pozícia a orientácia).

 

7.4 AI pipeline: Detekcia a označovanie

V kóde sa detekcia nevykonáva každý snímok (čo by oneskorilo headset), ale každých $2000ms$ (DETECT_INTERVAL_MS).

• Label Sprite: Keďže Three.js nedokáže priamo vykresliť štandardné HTML fonty v 3D scéne, používame CanvasTexture. Text "kreslíme" na neviditeľné 2D HTML plátno a aplikujeme ho ako textúru na 3D sprite, ktorý je vždy otočený k používateľovi (billboarding).

 

7.5 Nutnosť HTTPS

WebXR a prístup do kamery (getUserMedia) sú dodávateľmi prehliadačov klasifikované ako "Výkonné funkcie". Fungujú len v  zabezpečenom kontexte.

• Výnimka localhost: Môžete testovať na svojom PC pomocou http://localhost, ale hneď ako sa pokúsite pristupovať k serveru cez headset Quest 3, prehliadač zablokuje XR funkcie, pretože vidí nezabezpečenú sieťovú IP adresu (napr. http://192.168.1.10).
• Riešenie: Musíte použiť tunelovaciu službu alebo zabezpečený hosting.

 

7.6 Meta Quest Link & Vývojársky režim

Aby ste mohli efektívne spúšťať a ladiť svoj kód, váš Quest 3 musí byť uznaný ako vývojárske zariadenie.

Aktivácia krok za krokom:

• Developerský účet: Zaregistrujte sa na dashboard.oculus.comhttps://dashboard.oculus.com/. Budete musieť vytvoriť "Organizáciu" (môže mať akýkoľvek názov).
• Mobilná aplikácia: Otvorte aplikáciu Meta Quest na telefóne, choďte do menu > Zariadenia > Nastavenia headsetu > Developer Mode a zapnite ju.
• Link: Pripojte svoj Quest 3 k PC pomocou kvalitného USB-C 3.0 kábla alebo cez Air Link (vysokorýchlostné Wi-Fi 6).

7.7 Nadácia Three.js (Boilerplate)

Pred vstupom do AR musíme inicializovať štandardné 3D prostredie. Avšak pre Quest 3 sú dve nastavenia nevyhnutné:

• Alpha & Antialias:
   

• Aktivácia XR:
  
   

To Three.js povie, aby počúvali údaje o sledovaní hlavy Questu (6 $DOF$) a automaticky ich aplikovali na objekt 'kamera'.

7.8 Riadenie AR relácie (Životný cyklus)

Tlačidlo "Enter AR" spustí navigator.xr.requestSession. Tu definujeme, aké "superschopnosti" naša aplikácia potrebuje od hardvéru Quest 3.

Povinné a voliteľné funkcie:

• lokálne poschodie: Toto hovorí Questu, aby nastavil súradnicu $Y=0$ na skutočnej fyzickej úrovni poschodia.
• HIT-TEST: Umožňuje raycast proti reálnej geometrii.
• detekcia roviny: Žiada "sémantické" dáta (vie, ktorá sieť je "tabuľka" a ktorá "stena").