Differences

This shows you the differences between two versions of the page.

Link to this comparison view

irva:laboratoarevr:01 [2024/10/07 13:44]
andrei.lapusteanu Updates for 2024 lab
irva:laboratoarevr:01 [2025/09/27 01:32] (current)
andrei.lapusteanu Revamped lab (text, images)
Line 1: Line 1:
-===== Laborator ​AR 01. Google Cardboard =====+===== Laborator ​VR 01. Google Cardboard ​XR =====
  
 ==== Înainte de a începe laboratorul... ==== ==== Înainte de a începe laboratorul... ====
Line 11: Line 11:
 </​note>​ </​note>​
  
-Link către ​repo-ul de git<​LINK_WIP>​+Link către ​[[https://​github.com/​UPB-Graphics/​IRVA|GitHub repo]].
  
 ==== Introducere ==== ==== Introducere ====
  
-**Google Cardboard (XR Plugin for Unity)** este un SDK ce permite dezvoltatorilor să creeze experințe în realitate virtuală folosind dispozitive mobile (smartphone-uri) în motorul de jocuri ​Unty. Acest plugin este destinat utilizării împreună cu Google Cardboard (vezi imaginea de mai jos), un dispozitiv de tip holder pentru telefoane, ce permite o variantă low-cost de a experimenta cu realitatea virtuală.+**Google Cardboard (XR Plugin for Unity)** este un SDK ce permite dezvoltatorilor să creeze experințe în realitate virtuală folosind dispozitive mobile (smartphone-uri) în motorul de jocuri ​Unity. Acest plugin este destinat utilizării împreună cu Google Cardboard (vezi imaginea de mai jos), un dispozitiv de tip holder pentru telefoane, ce permite o variantă low-cost de experimentare ​realitații virtuale.
  
 {{ :​irva:​laboratoare:​l6_cardboardgif.gif?​400 |}} {{ :​irva:​laboratoare:​l6_cardboardgif.gif?​400 |}}
  
-Aceste dispozitive de tip holder se pot achiziționa de la diverse brand-uri – se pot achiziționa,​ de asemenea, ​controller-e ​de tip joystick ce comunică pe Bluetooth cu telefonul, pentru a avea un control sporit în scenele virtuale (de exemplu, se poate implementa movement-ul sau diferite interacțiuni ​folosing ​aceste ​controller-e).+Aceste dispozitive de tip holder se pot achiziționa de la diverse brand-uri – se pot achiziționa,​ de asemenea, ​controllere ​de tip joystick ce comunică pe Bluetooth cu telefonul, pentru a avea un control sporit în scenele virtuale (de exemplu, se poate implementa movement-ul sau diferite interacțiuni ​folosind ​aceste ​controllere).
  
 {{ :​irva:​laboratoare:​l6_bt_controller.jpg?​200 |}} {{ :​irva:​laboratoare:​l6_bt_controller.jpg?​200 |}}
  
-În continuare puteți studia un demo ce prezintă laboratorul cu task-urile rezolvate (fără bonus-uri):​ +=== Highlights ​tehnologie ===
- +
-<​VIDEO_WIP>​ +
- +
-=== Higlights ​tehnologie ===+
  
   * **Compatibilitate**:​ Există suport atât pentru Android cât și pentru iOS   * **Compatibilitate**:​ Există suport atât pentru Android cât și pentru iOS
   * **Integrare seamless**: Se folosește de framework-ul de XR din Unity, facilitând astfel dezvoltarea rapidă a aplicațiilor de tip VR   * **Integrare seamless**: Se folosește de framework-ul de XR din Unity, facilitând astfel dezvoltarea rapidă a aplicațiilor de tip VR
-  * **Feature-uri**:​ Suport pentru head tracking (folosind senzorii giroscopici și accelerometrele găsite în telefoane), randare stereoscopică (un render pentru fiecare ochi – se desenează ​fiecare render ​pe jumătate din ecranul dispozitivului),​ precum și diverse metode implementate în software, precum gaze interaction,​ ce permite interacțiunea cu diverse obicte prin simpla privire a acestora+  * **Feature-uri**:​ Suport pentru head tracking (folosind senzorii giroscopici și accelerometrele găsite în telefoane), randare stereoscopică (un render pentru fiecare ochi – se desenează pe jumătate din ecranul dispozitivului),​ precum și diverse metode implementate în software, precum gaze interaction,​ ce permite interacțiunea cu diverse obicte prin simpla privire a acestora
  
 <note tip>În mod evident, soluțiile dedicate pentru VR (HTC Vive, Meta Quest 2/3, Meta Pro, etc.) oferă o experiență virtuală mult superioară procesării posibile pe un smartphone, dar acest plugin ne permite să avem un prim sneak peek al tehnologiei VR într-un mod accesibil.</​note>​ <note tip>În mod evident, soluțiile dedicate pentru VR (HTC Vive, Meta Quest 2/3, Meta Pro, etc.) oferă o experiență virtuală mult superioară procesării posibile pe un smartphone, dar acest plugin ne permite să avem un prim sneak peek al tehnologiei VR într-un mod accesibil.</​note>​
Line 40: Line 36:
   * Prezentăm pe scurt modalitatea de **integrare a plugin-ului** într-un proiect de Unity   * Prezentăm pe scurt modalitatea de **integrare a plugin-ului** într-un proiect de Unity
   * **Testăm** demo sample-ul pentru a valida funcționarea corectă a plugin-ului   * **Testăm** demo sample-ul pentru a valida funcționarea corectă a plugin-ului
-  * Implementăm ​cateva ​feature-uri pentru un joc simplu (balloon popper), ce funcționează pe conceptul de **gaze interaction**+  * Implementăm ​câteva ​feature-uri pentru un joc simplu (balloon popper), ce funcționează pe conceptul de **gaze interaction**
  
 <note tip>În mod ideal, testarea funcționalităților din laborator se face folosind un dispozitiv de tip holder VR pentru smartphone, dar se poate testa și în absența acestuia. De asemenea, nu este necesară folosirea unui joystick pentru mobile.</​note>​ <note tip>În mod ideal, testarea funcționalităților din laborator se face folosind un dispozitiv de tip holder VR pentru smartphone, dar se poate testa și în absența acestuia. De asemenea, nu este necesară folosirea unui joystick pentru mobile.</​note>​
  
-În continuare puteți studia un demo ce prezintă laboratorul cu task-urile rezolvate (fără bonus-uri):+==== Unity build profiles ====
  
-<VIDEO_WIP>+Începând cu Unity 6, modalitatea de lucru cu build-urile si scenele de inclus în build a suferit mici modificări. Noile funcționalități se regăsesc în **File -> Build Profiles**. 
 + 
 +{{ :​irva:​laboratoarevr:​irva_2025_vr_l1_build_profiles_1.png?​500 |}} 
 + 
 +<note tip>Spre deosebire de vesiunile anterioare de Unity, aici avem conceptul de **profile de build**, care ne ajută sa diferențiem setările în funcție de platforma target (de ex., Android), precum și setările pentru device-uri diferite (de ex., puteți crea un build profile pentru Android specific pentru Google Cardboard XR și alt profil tot de Android pentru dispozitivele Quest de la Meta).</note> 
 + 
 +  * Creați-vă un nou **profil de build** pentru **Android**,​ selectați-l și apăsați pe **Switch Platform** 
 +  * Pe profilul nou creat, puteți crea un **override** la setările tip **Player** din Unity (setări aferente build-ului). Având profilul creat selectat, apăsați pe **Customize Player Settings** 
 +  * Interfața ar trebui să arate similar imaginii de mai jos 
 + 
 +{{ :​irva:​laboratoarevr:​irva_2025_vr_l1_build_profiles_3.png?​500 |}}
  
 ==== Integrare Google Cardboard XR Plugin în proiect ==== ==== Integrare Google Cardboard XR Plugin în proiect ====
  
-Întrucât pașii pentru integrarea acestui pachet sunt bine descrișîn [[https://developers.google.com/​cardboard/​develop/​unity/​quickstart|acest]] acest ghid, vă recomandăm să-l urmați și voi - cel mai probabil ​veți face acești pași împreună cu asistenul ​de laborator+<note warning>​ 
 +Asigurați-vă că aveți [[https://git-scm.com|Git]] instalat pe sistemul vostru! Altfel nu veți putea adăuga pachete via managerul ​de pachete din Unity folosit URL-uri git. 
 +</​note>​
  
-**⚠️ ​Atenție ⚠️** ​pentru build-urile pe Android! S-ar putea ca API-ul grafic Vulkan ​să nu ruleze deloc pe smartphone-ul vostru. Așadar, când ajungeți la pasul de setup al API-ului grafic: +<note important>​**⚠️ ​Înainte să implementați ghidul din link-ul de mai jos ⚠️** ​ 
-  ​Asigurați-vă ca din **File -> Build Settings** este selectată platofrma Android +  * Tutorialul vă va indica ​să setați **Target ​API Level 33**. Folosiți în schimb nivelul ​**34** pentru a nu avea erori la build-uri 
-  * Navigați ​la **Player Settings... ​-> Other Settings -> Graphics APIs** și setați ''​OpenGLES3''​ ca primul din listă ​+</note>
  
-{{ :irva:​laboratoarevr:​irva_2024_vr_l1_graphicsapis.png?​500 ​|}}+Întrucât pașii pentru integrarea acestui pachet sunt bine descriși în [[https://​developers.google.com/​cardboard/​develop/​unity/​quickstart|acest]] acest ghid, vă recomandăm să-l urmați și voi - cel mai probabil veți face acești pași împreună cu asistentul de laborator.
  
-==== Testarea scenei ​sample ​====+Instalați, pe baza ghidului, ​sample-ul inclus în pachet.
  
-  * Mergeți în **File > Build Settings** și asigurați-vă că platforma pentru care doriți să faceți build este corectăÎn caz contrar, faceți switch pe platforma dorită (Android sau iOS) +{{ :​irva:​laboratoarevr:​irva_2024_vr_l1_cardboardsamples.png?500 |}}
-  * Vom testa scena **Assets -> Samples -> Google Cardboard XR Plugin for Unity -> <​versiune>​ -> Hello Cardboard -> Scenes -> HelloCardboard**. Mergeți în **File -> Build Settings** și setați această scenă ca fiind singura activă (folosing checkbox-ul) în panoul de **Scenes In Build**+
  
-{{ :​irva:​laboratoarevr:​irva_2024_vr_l1_buildscenes.png?500 |}}+**⚠️ Atenție ⚠️** la build-urile pe Android! S-ar putea ca API-ul grafic Vulkan să nu ruleze deloc (sau cu artefacte) pe smartphone-ul vostru. Așadar, când ajungeți la pasul de setup al API-ului grafic: 
 +  * Asigurați-vă că aveți selectat **build profile-ul** corect 
 +  * Din setările **Player** (sau **Player Settings Override** dacă ați făcut override pe profilul de build creat), din secțiunea **Other Settings** debifați opțiunea **Auto Graphics API** 
 +  * Setați ''​OpenGLES3''​ ca primul (sau singurul) din listă  
 + 
 +{{ :​irva:​laboratoarevr:​irva_2025_vr_l1_graphicsapis.jpg?​500 |}} 
 + 
 +==== Pre-build setup ==== 
 + 
 +Îndată ce se încheie instalarea pachetului Google Cardboard XR Plugin, ar trebui să vă apară în toolbar-ul din Unity un nou menu item, pe care va trebui să-l folosiți pentru a seta o serie de dependințe ce țin de bibliotecile XR. 
 + 
 +În proiectul Unity de VR veți include, pe parcursul laboratoarelor,​ diverse SDK-uri necesare pentru rezolvarea acestora. Întrucât integrarea tuturor acestora într-un singur proiect poate crea unele probleme, a fost implementat un script custom în proiect (accesat din acest meniu) care se ocupă de configurarea soluției dependent de laboratorul pentru care doriți să faceți build. 
 + 
 +{{ :​irva:​laboratoarevr:​irva_2025_vr_l1_xrloader.png?​300 |}} 
 + 
 +<note warning>​ 
 +În cazul în care toate elementele din meniu sunt grayed out și prmiți null ref-uri în consolă, încercați să restartați editorul. 
 +</​note>​ 
 + 
 +<note important>​ 
 +  * Notați existența acestui meniu întrucât la trebui să-l folosiți și să selectați opțiunea corespunzătoare și în următoarele laboratoare de VR. 
 +  * În cazul în care nu vă apare acest meniu, sau dacă sunt actualizări ale acestuia, stergeți din proiect folder-ul **Assets -> Project Setup -> CustomXRPluginProvider** si reimportați ultima versiune a pachetului ''​IRVA_ProjectSetup_XRPluginProviderController'',​ care se găsește în folder-ul **UnityPackages** din folder-ul root al proiectului,​ după care restartați Unity. 
 +</​note>​ 
 + 
 +<​note>​Pentru acest laborator va trebui să setați activă opțiunea **Set Cardboard XR loader**.</​note>​ 
 + 
 +În cazul în care în consolă vă apar următoarele mesaje, operațiunea a avut loc cu succes. 
 + 
 +{{ :​irva:​laboratoarevr:​irva_2025_vr_l1_xrpluginmessages_1.png?​600 |}} 
 + 
 +Mesajele marcate cu roșu indică incompatibilități între loader-ul XR și platforma target (nu sunt erori: se specifică doar faptul ca de exemplu SteamVR nu este suportat ca un XR loader valid în cazul în care build target-ul este Android). 
 + 
 +Mesajele cu galben sugerează compatibilitate între XR loader și platforma target, dar loader-ul nu a fost setat cu succes întrucat pachet-ul / SDK-ul nu a fost (încă) instalat. 
 + 
 +{{ :​irva:​laboratoarevr:​irva_2025_vr_l1_xrpluginmessages_2.png?​600 |}} 
 + 
 +==== Adăugarea scenelor virtuale în build ==== 
 + 
 +Totodată cu Unity 6, modalitatea de lucru cu scenele a suferit câteva modificări. În **File -> Build Profiles** găsiți **Scene List**, ce reprezintă modalitatea centralizată prin care se pot include scene în build-urile voastre. 
 + 
 +  * Vom testa scena **Assets -> Samples -> Google Cardboard XR Plugin for Unity -> <​versiune>​ -> Hello Cardboard -> Scenes -> HelloCardboard**.  
 + 
 +  * Adăugați scena **HelloCardboard** în această lista, precum în imaginea de mai jos 
 + 
 +{{ :​irva:​laboratoarevr:​irva_2025_vr_l1_scene_list.png?500 |}}
  
   * Vom realiza un build acum pe smartphone! Pașii următori sunt specifici unui telefon Android:   * Vom realiza un build acum pe smartphone! Pașii următori sunt specifici unui telefon Android:
     * **Conectați-vă telefonul** prin cablu la laptop / PC     * **Conectați-vă telefonul** prin cablu la laptop / PC
     * Puneți telefonul în modul de **transfer de fișiere**     * Puneți telefonul în modul de **transfer de fișiere**
 +    * Dacă doriți să faceți **deploy direct pe telefon** la finalizarea build-ului (modul **Build And Run**), va trebui întâi să aveți **USB Debugging** activat pe telefon (opțiunea se poate activa din setările de dezvoltator ale telefonului vostru)
  
   * În continuare, puteți crea un **Build** pe care să-l testați pe telefon. Pentru a realiza acest build, din acesași panoul (Build Settings), selectați **Build** sau **Build And Run**:   * În continuare, puteți crea un **Build** pe care să-l testați pe telefon. Pentru a realiza acest build, din acesași panoul (Build Settings), selectați **Build** sau **Build And Run**:
Line 85: Line 137:
 === Testarea scenei sample === === Testarea scenei sample ===
  
-  * **CubeRoom** reprezinta modelul ​envroment-ului scenei +  * **CubeRoom** reprezinta modelul ​environment-ului scenei 
-  * **Treasure** reprezinta un obiect interactibil – daca îl studiați în inspector, veți observa că are atașat un script de tip **ObjectController** +  * **Treasure** reprezinta un obiect interactibil – daca îl studiați în inspector, veți observa că are atașat un script de tip ''​ObjectController''​ 
-  * Camera are un obiect copil numit **CardboardReticlePointer** ce reprezintă reticle-ul / crosshair-ul direcției de vizualizare. Script-ul atașat pe acesta interacționează cu script-urile de tip **ObjectController**, căruia îi transmite mesaje de tip **OnPoinerEnter** și **OnPointerExit**, ceea ce denotă acțiunea de gaze (privire) asupra obiectelor+  * Camera are un obiect copil numit **CardboardReticlePointer** ce reprezintă reticle-ul / crosshair-ul direcției de vizualizare. Script-ul atașat pe acesta interacționează cu script-urile de tip ''​ObjectController''​, căruia îi transmite mesaje de tip ''​OnPoinerEnter'' ​și ''​OnPointerExit''​, ceea ce denotă acțiunea de gaze (privire) asupra obiectelor
  
 ==== Implementarea jocului ==== ==== Implementarea jocului ====
Line 93: Line 145:
 Veți avea de implementat un joculeț în care se spawnează în mod contnuu baloane, care pot fi sparte dacă player-ul le privește pentru un timp îndelungat – așadar, ne folosim de acest concept de gaze interaction. O parte a jocului este deja implementată,​ voi va trebui sa urmăriți todo-urile din cod pentru rezolva complet laboratorul. Veți avea de implementat un joculeț în care se spawnează în mod contnuu baloane, care pot fi sparte dacă player-ul le privește pentru un timp îndelungat – așadar, ne folosim de acest concept de gaze interaction. O parte a jocului este deja implementată,​ voi va trebui sa urmăriți todo-urile din cod pentru rezolva complet laboratorul.
  
-  * Deschideți scena **Assets -> L6_GoogleCardboard -> Scenes -> L6_BalloonPopper**+==== Import schelet laborator ====
  
-{{ :​irva:​laboratoare:​l6_game-hierarchy.png?​200 |}}+  * Importați ultima versiune a pachetului ''​IRVA_L1_VR_GoogleCardboardXR_Skeleton''​ care se găsește în folder-ul **UnityPackages** din folder-ul root al proiectului 
 +  * Folder-ul **Assets -> L1_VR_GoogleCardboard** conține asset-urile suport pentru acest laborator 
 +  * Deschideți scena **Assets -> L1_VR_GoogleCardboard -> Scenes -> L1_VR_GoogleCardboard_BalloonPopper**
  
-  ​* **BaloonSpawner** este obiectul care va instanția baloanele în scenă. Acesta se află în zona podelei scenei. Are o componentă de tip BoxCollider,​ în volumul căreia trebuie instanțiate baloanele la locații random +{{ :​irva:​laboratoarevr:​irva_2024_vr_l1_skeletonscene.png?​200 |}} 
-  * **BaloonController** (nu se regăsește în ierarhie, este un script atașat prefab-ului ​Baloon) reprezintă obiectul de tip balon – acesta trebuie să fie translatat pe Y și va conține logica de interacțiune cu reticle-ul player-ului+ 
 +  ​* **BaloonSpawner** este obiectul care va instanția baloanele în scenă. Acesta se află în zona podelei scenei. Are o componentă de tip ''​BoxCollider''​, în volumul căreia trebuie instanțiate baloanele la locații random 
 +  * **BaloonController** (nu se regăsește în ierarhie, este un script atașat prefab-ului ​'Baloon') reprezintă obiectul de tip balon – acesta trebuie să fie translatat pe Y și va conține logica de interacțiune cu reticle-ul player-ului
   * **BalloonPopper** are atașat un script ce distruge baloanele dacă există overlap cu collider-ul obiectelor de tip balon. Acesta este definit în zona de tavan a scenei   * **BalloonPopper** are atașat un script ce distruge baloanele dacă există overlap cu collider-ul obiectelor de tip balon. Acesta este definit în zona de tavan a scenei
-  * **ScoreCanvas** conține logică pentru scor și poate seta textul unui element de UI definit în worldspace+  * **ScoreCanvas** conține logică pentru scor și poate seta textul unui element de UI definit în world space
  
 ==== Task-uri ==== ==== Task-uri ====
  
-  - Realizați un build folosing ​scena sample din plugin ​– validați funcționarea corectă a acestui build – ar trebui sa aveți un render stereoscopicsă se realizeze head tracking-ul, iar obiectul ‘Treasure’ din scenă ar trebui să-și ​schime ​culoarea dacă reticle-ul player-ului interacționează cu aceasta +  - Realizați un build folosind ​scena sample din plugin. Validați funcționarea corectă a acestui build
-  - Instanțiați obiectele de tip balon din script-ul de spawnerCalculați, de asemenea, poziția acestora de instanțiere +    * Ar trebui sa aveți un render stereoscopic 
-  - Realizați translația baloanelor instanțiate ​– în cel mai simplu mod, translatați-le cu o viteză constantă pe axa Y +    * Ar trebui ​să se realizeze head tracking-ul 
-  - Implementați mecanica de spargere a baloanelor ​– întâi, setați flag-ul ce denotă faptul că un balon este privit ​(targeted)iar apoi, implementați logica de timerÎn esență, atât timp cât balonul ​este privitacest timer trebuie incrementat – daca timpul contorizat este mai mare decât o limită impusă, spargeți balonul ​folosind metodele deja implementate +    * Obiectul 'Treasure' ​din scenă ar trebui să-și ​schimbe ​culoarea dacă reticle-ul player-ului interacționează cu aceasta 
-  - Implementați funcționalitatea de scor – un balon spart de player reprezintă un punct primit, un balon spart de catre BalloonPopper reprezintă un punct scăzut. ​**ScoreController** și **BalloonPopper*conțin todo-urile relevante acestui task +  - Importați scheletul de laborator 
- +    * Din toolbar-ul editor-ului,​ **Assets -> Import Package -> Custom Package** 
 +    * Selectați ultima versiune a pachetului ''​IRVA_L1_VR_GoogleCardboard_Skeleton''​ care se găsește în folder-ul **UnityPackages** din folder-ul root al proiectului 
 +  - Instanțiați obiectele de tip balon  
 +    * Instanțiați obiectele ​din script-ul de spawner ​la o poziție random in volumul ''​BoxCollider''​-ului atașat de obiectul spawner 
 +    * Calculați, de asemenea, poziția acestora de instanțiere 
 +  - Realizați translația baloanelor instanțiate 
 +    * În cel mai simplu mod, translatați-le cu o viteză constantă pe axa Y 
 +  - Implementați mecanica de spargere a baloanelor 
 +    * Aveți în script-ul ce controlează baloanele metodele ''​OnPointerEnter''​ și ''​OnPointerExit'',​ care sunt apelate în mod automat atunci când un balon este privit ​sau când se încheie privirea acestuia 
 +    * **Cât timp** un balon este **targeted**incrementați timer-ul intern 
 +    * **În momentul** în care un balon **nu mai este targeted**restetați ​timer-ul intern 
 +    * Dacă timer-ul intern **depășește** valoarea maximă definită (variabila ''​requiredTimeToPop''​)**spargeți balonul** 
 +  - Implementați funcționalitatea de **scor**  
 +    * Un balon spart de jucător va **incrementa** scorul 
 +    * Un balon spart de tavan (ratat de jucător) va **decrementa** scorul 
 +    ​Folosiți-vă de ''​ScoreController''​ pentru a ține cont de scor și pentru a actualiza componenta text 
irva/laboratoarevr/01.1728297894.txt.gz · Last modified: 2024/10/07 13:44 by andrei.lapusteanu
CC Attribution-Share Alike 3.0 Unported
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0