bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc

Camí:
unity_ar

Diferències

Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.

Enllaç a la visualització de la comparació

Ambdós costats versió prèvia Revisió prèvia
Següent revisió 		Revisió prèvia
unity_ar [2022/10/19 05:52]
carlos_marin [Realitat Augmentada amb Unity] 		unity_ar [2022/10/19 13:35] (actual)
carlos_marin [Creant el Prefab]
Línia 13: Línia 13:
 Cal tenir instal·lats Unity i un editor per programar (aquí farem servir Visual Studio). Cal tenir instal·lats Unity i un editor per programar (aquí farem servir Visual Studio).
  
-Si no és així aquí teniu informació per fer-ho.+És molt recomanable que feu una ullada a aquest article, si no l'heu fet ja, abans de continuar.
  
 ** Link a l'article d'iniciació a Unity ** ** Link a l'article d'iniciació a Unity **
 ===== Setup d'Unity per la Realitat Augmentada ===== ===== Setup d'Unity per la Realitat Augmentada =====
  
-Obrim Unity Hub i cliquem a "New project". Als templates cerquem i seleccionem el template d'AR Core. La primera vegada que fem servir un template segurament us l'haureu de descarregar abans de poder crear el projecte.+Obrim Unity Hub i cliquem a "New project". Als templates cerquem i seleccionem el template d'AR Core. La primera vegada que fem servir un template segurament us haureu de descarregar alguns paquets abans de poder crear el projecte.
  
-Tingueu present quina versió de l'editor d'Unity feu servir pel desenvolupament de la aplicació. És recomanable fer servir versions LTS que ens assegura que són versions a les que Unity donarà suport durant molt de temps. +Tingueu present quina versió de l'editor d'Unity fareu servir pel desenvolupament de la aplicació. És recomanable fer servir versions LTS que ens assegura que són versions a les que l'equip d'Unity donarà suport durant molt de temps. 
  
 Jo faré servir la versió 2021.3.5f1 LTS Jo faré servir la versió 2021.3.5f1 LTS
  
-Donem un nom al nostre projecte, per exemple "DemoAR", donem la localització on es desarà al nostre PC i cliquem a "Create project"+A continuació donem un nom al nostre projecte, per exemple "DemoAR", indiquem la localització on es desarà el projecte al nostre PC i cliquem a "Create project"
  
 {{ unity_ar_image01.jpg?direct }} {{ unity_ar_image01.jpg?direct }}
  
-Si de moment hem fet tot correcte, se'ns obrirà un projecte d'Unity amb una escena on tindrem els elements bàsics per crear una realitat augmentada ja a la escena (finestra de //Hierarchy//). Ara modificarem i ens assegurarem que el projecte tingui els settings correctes.+Si de moment hem fet tot correcte, se'ns obrirà un projecte d'Unity amb una escena on tindrem els elements bàsics  per crear una realitat augmentada ja a l'escena (finestra de //Hierarchy//). 
  
-Per començar hem de configurar el nostre projecte per assegurar-nos que la plataforma de desenvolupament sigui Android. Per això el que farem serà:+Ara modificarem i ens assegurarem que el projecte tingui la configuració correcta. 
 + 
 +Començarem configurant el nostre projecte per assegurar-nos que la plataforma de desenvolupament sigui Android. Per això el que farem serà:
  
   File -> Build Settings -> Android -> Switch Platform   File -> Build Settings -> Android -> Switch Platform
  
-Si l'opció d'Android ens surt inactiva vol dir que quan vam fer la instal·lació del Unity al nostre PC no vam afegir els mòduls necessaris per poder desenvolupar a Android. Si és el cas, tanquem l'Unity i tornem a l'aplicació d'Unity Hub, anem a l'opció d'"Installs", a l'esquerra de la finestra i allà veurem totes les versions d'Unity que tenim instal·lades. Cliquem a sobre de la rodeta de settings i a continuació "Add Modules" i allà seleccionem la plataforma d'Android i els components que l'acompanyen si escau. Esperem a la completa instal·lació abans de continuar+Si l'opció d'Android ens surt inactiva vol dir que quan vam fer la instal·lació del Unity al nostre PC no vam afegir els mòduls necessaris per poder desenvolupar a Android. Si és el cas, tanqueu l'Unity i torneu a l'aplicació d'Unity Hub. Aneu a l'opció d'"Installs", a l'esquerra de la finestra i allà veureu totes les versions d'Unity que teniu instal·lades. Cliqueu a sobre de la rodeta de settings de la versió que ens interessa i a continuació "Add Modules" i allà seleccioneu la plataforma d'Android i els components que l'acompanyen si escau. Espereu a la completa instal·lació abans de continuar
  
 {{ unity_ar_image02.jpg?direct }} {{ unity_ar_image02.jpg?direct }}
  
-Ara, ens assegurarem al gestor de paquets d'Unity que tenim tot el necessari instal·lat i actualitzarem un paquet que no acostuma a venir actualitzat. Anem a la finestra de gestor de paquets fent:+Ara, amb la plataforma Android seleccionada, passarem al gestor de paquets d'Unity per assegurar-nos que tot s'ha instal·lat i actualitzarem un paquet que no acostuma a venir actualitzat.  
 + 
 +Anem a la finestra de gestor de paquets fent:
  
   Window -> Package Manager   Window -> Package Manager
Línia 44: Línia 48:
 Seleccionem "Packages: In Project" a la barra superior esquerra de la finestra i ens assegurem que tenim el Package AR instal·lat.  Seleccionem "Packages: In Project" a la barra superior esquerra de la finestra i ens assegurem que tenim el Package AR instal·lat. 
  
-També actualitzarem el Package "XR Plugin Management" per assegurar-nos que estem amb la versió 4.2.1. Si no estem en aquesta versió, seleccionem aquest paquet i cliquem al botó d'Update a la part inferior dreta.+També actualitzarem el Package "XR Plugin Management" per assegurar-nos que estem a la versió 4.2.1. Si no estem en aquesta versió, seleccioneu aquest paquet i cliqueu al botó d'Update a la part inferior dreta.
  
 {{ unity_ar_image03.jpg?direct }} {{ unity_ar_image03.jpg?direct }}
Línia 50: Línia 54:
 Si esteu interessats en aquests Kit de desenvolupament d'AR podeu fer una ullada a aquest link: [[https://developers.google.com/ar | AR Core]] Si esteu interessats en aquests Kit de desenvolupament d'AR podeu fer una ullada a aquest link: [[https://developers.google.com/ar | AR Core]]
  
-Ja estem a prop d'acabar aquest primer punt farragós. Només falta configurar les opcions de Player en el project settings. Per treure aquesta finestra farem:+Ja estem a prop d'acabar aquest primer punt farragós. Només falten configurar les opcions de Player en el project settings. Per treure aquesta finestra farem:
  
   File -> Build Settings -> Player Settings   File -> Build Settings -> Player Settings
      
-Se'ns obrirà una nova finestra.+Se'ns obrirà la finestra de //Project Settings// amb l'opció de Player seleccionat.
      
 Es considera de bona praxis identificar el desenvolupador de l'aplicació tot i que no és obligatori. Això es fa a l'slot de Company Name. En el meu cas sempre m'identifico com a "Dedalo" Es considera de bona praxis identificar el desenvolupador de l'aplicació tot i que no és obligatori. Això es fa a l'slot de Company Name. En el meu cas sempre m'identifico com a "Dedalo"
  
-Més abaix, a "Other Settings" busquem **"Minimum API Level"** i al desplegable seleccionem la **Api Level 26**, que serà el requeriment mínim de la versió d'Android que tindrà que tenir instal·lat l'usuari de la nostre aplicació per a que funcioni correctament la Realitat Augmentada.+Més abaix, a "Other Settings" busquem **"Minimum API Level"** i al desplegable seleccionem l' **Api Level 26**, que serà el requeriment mínim de la versió d'Android que tindrà que tenir instal·lat l'usuari de la nostre aplicació per a que funcioni correctament la Realitat Augmentada.
  
 {{ unity_ar_image04.jpg?direct }} {{ unity_ar_image04.jpg?direct }}
Línia 64: Línia 68:
 Ja tenim, per fi, configurat el nostre projecte d'Unity per fer l'aplicació de Realitat Augmentada.  Ja tenim, per fi, configurat el nostre projecte d'Unity per fer l'aplicació de Realitat Augmentada. 
  
-Anem a fer la nostra primera AR+Anem a modificar l'escena per crear la nostra AR
  
  
Línia 70: Línia 74:
 ===== L'Aplicació ===== ===== L'Aplicació =====
  
-Ara toca preparar l'escena principal de la nostra aplicació. +Farem una Realitat Augmentada on a l'enfocar la càmera del mòbil a una imatge se'ns dibuixarà enganxat a aquesta imatge elements digitals.
  
-Farem una Realitat Augmentada on enfocarem amb la càmera del mòbil a una imatge i enganxat a aquesta imatge pintarem elements digitals.+==== Crear un nou AR Session Origin ====
  
 Partirem de l'escena per defecte que s'ha obert a l'inici tot i que la modificarem una mica. Partirem de l'escena per defecte que s'ha obert a l'inici tot i que la modificarem una mica.
  
-Seleccionem i esborrem el gameObject anomenat AR Session Origin de la nostra finestra //Hierarchy//. Aquest gameObject està pensat per fer una realitat augmentada de detecció de plànols i no és el que farem servir nosaltres.+Seleccionem i esborrem el gameObject anomenat **AR Session Origin** de la nostra finestra //Hierarchy//. Aquest gameObject porta uns settings per fer una realitat augmentada de detecció de plànols i no és el que farem servir nosaltres.
  
-Amb el ratolí sobre la finestra d'//Hierarchy// cliquem botó dret, seleccionem XR i allà seleccionem AR Session Origin per crear un nou gameObject d'AR però en aquest cas vindrà quasi net, només amb la base mínima necessària per poder fer un AR que és una càmera virtual (que quadrarà amb la càmera física del dispositiu) i un Script per controlar la càmera i fer que es mogui seguint el moviment que fent del nostre mòbil.+Amb el ratolí sobre la finestra d'//Hierarchy// cliquem botó dret, seleccionem XR i allà seleccionem AR Session Origin per crear un nou gameObject d'AR però en aquest cas vindrà quasi net, només amb el mínim necessari per poder fer un AR, una càmera virtual (que quadrarà amb la càmera física del dispositiu) amb un Script per controlar la càmera i poc més.
  
 {{unity_ar_image05.jpg?direct}} {{unity_ar_image05.jpg?direct}}
  
 Amb aquest gameObject seleccionat ens assegurem que la seva posició i rotació a la finestra //Inspector// és tot a zero. Amb aquest gameObject seleccionat ens assegurem que la seva posició i rotació a la finestra //Inspector// és tot a zero.
 +
 +==== Afegim components i la imatge pel tracking ====
  
 Com hem dit abans, aquest AR Session Origin està pràcticament buit pel que l'haurem d'afegir el component pensat per fet track d'imatge en AR. Per això, i amb l'AR Session Origin que acabem de crear seleccionat, anirem a la finestra d'Inspector i clicarem a "Add Component", buscarem un component d'Script anomenat "AR TRacked Image Manager". i l'afegim al gameObject.  Com hem dit abans, aquest AR Session Origin està pràcticament buit pel que l'haurem d'afegir el component pensat per fet track d'imatge en AR. Per això, i amb l'AR Session Origin que acabem de crear seleccionat, anirem a la finestra d'Inspector i clicarem a "Add Component", buscarem un component d'Script anomenat "AR TRacked Image Manager". i l'afegim al gameObject. 
  
-Aquest script s'ha d'omplir amb una llibreria d'imatges (les imatges que vulguem fer servir per fer el Track) i un prefab. Els prefabs són objectes que creem i fem servir en runtime (temps d'execució de l'app) a la nostra aplicació. Els prefabs es fan servir per instanciar els enemics que van apareixent mentres avancem a un joc, o les bales de la nostra arma quan disparem, o les pròpies armes, o les monedes de recompensa, etc. +Aquest script s'ha d'omplir amb una llibreria d'imatges (les imatges que vulguem fer servir per fer el Track) i un prefab. Els prefabs són objectes que creem i fem servir en runtime (temps d'execució de l'app). Els prefabs es fan servir per instanciar enemics que van apareixent mentres avancem a un joc, o les bales de la nostra arma quan disparem, o les pròpies armes, o les monedes de recompensa, etc. 
  
 En aquest cas el nostre prefab serà l'objecte que s'instanciarà quan la nostra aplicació detecti la imatge i activi el track  En aquest cas el nostre prefab serà l'objecte que s'instanciarà quan la nostra aplicació detecti la imatge i activi el track 
Línia 113: Línia 119:
  
 <WRAP Important> <WRAP Important>
-Per saber el tamany de la imatge és tan fàcil com mesurar amb un regla la imatge impresa sobre la que volem fer l'AR. Les unitats que espera Unity és amb metres.+Per saber el tamany de la imatge és tan fàcil com mesurar amb un regla la imatge impresa sobre la que volem fer l'AR. Les unitats que espera Unity és en metres.
 </WRAP> </WRAP>
 +
 +==== Creem el Prefab ====
  
 Ara crearem el nostre prefab que serà el que s'instanciarà al moment de detectar i fer track de la imatge. Ara crearem el nostre prefab que serà el que s'instanciarà al moment de detectar i fer track de la imatge.
Línia 128: Línia 136:
   Create -> Material   Create -> Material
  
-A l'inspector modifiquem el color a negre i per aplicar el nou material al cilindre l'arrosseguem des de la finestra d'assets a sobre del nostre cilindre a l'escena.+A l'inspector modifiquem el color a un gris més o menys fosc i per aplicar el nou material al cilindre l'arrosseguem des de la finestra d'assets a sobre del nostre cilindre a l'escena.
  
 <WRAP todo> <WRAP todo>
-Us animo a jugar amb les opcions del material per donar-li color, textura o efectes de brillantor i metàlics.+Us animo a jugar amb les opcions del material per provar coses com ara la brillantor i efectes metàlics.
 </WRAP> </WRAP>
  
Línia 138: Línia 146:
   Botó dret del ratolí -> Create -> Folder   Botó dret del ratolí -> Create -> Folder
      
-Finalment, per crear el prefab és tan senzill com agafar el nostre Cylinder de la finestra //Hierarchy// i arrossegar-lo fins a la carpeta que acabem de crear. El cylinder de la nostra escena (A //Hierarchy//) es posarà en color blau indicant-nos que és un prefab. De fet, l'esborrarem de l'escena ja que el crearem en temps d'execució.+Finalment, per crear el prefab és tan senzill com agafar el nostre Cylinder de la finestra //Hierarchy// i arrossegar-lo fins a la carpeta que acabem de crear. El cylinder de la nostra escena (A //Hierarchy//) es posarà en color blau indicant-nos que és un prefab. De fet, l'esborrarem de l'escena ja que el crearem en temps d'execució, no cal que estigui a l'escena.
  
-Esborrem el Cylinder de l'escena, no el de la carpeta prefab, +Aneu en compte i esborreu el cilindre de l'escena, no el de la carpeta prefab. 
  
 +==== Afegim el Prefab i la llibreria d'imatges a l'AR Session Origin ====
  
 Ara acabarem de configurar el GameObject "AR Session Origin" per poder donar-li tota la informació que necessita per poder fer el track sobre la imatge. Aquesta informació serà la llibreria d'imatges i l'objecte 3D que es pintarà al detectar la imatge de track.  Ara acabarem de configurar el GameObject "AR Session Origin" per poder donar-li tota la informació que necessita per poder fer el track sobre la imatge. Aquesta informació serà la llibreria d'imatges i l'objecte 3D que es pintarà al detectar la imatge de track. 
  
-Amb el "AR Session Origin" seleccionat arrosseguem la llibreria des d'//Assets// a l'Slot "Serialized Library". Per afegir el prefab no l'arrossegarem i aprendrem una altra manera. Clicarem a l'icone que hi ha a la dreta de l'slot de "Tracked Image Prefab" (el punt amb un circle al voltant) i a la finestra que s'obre seleccionarem el nostre Cylinder.+Amb el "AR Session Origin" seleccionat arrosseguem la llibreria des d'//Assets// a l'Slot "Serialized Library". Per afegir el prefab no l'arrossegarem i aprendrem una altra manera. Clicarem a l'icone que hi ha a la dreta de l'slot de "Tracked Image Prefab" (el punt amb un circle al voltant) i a la finestra que s'obre seleccionarem el nostre cilindre.
  
 El projecte hauria de tenir aquest aspecte: El projecte hauria de tenir aquest aspecte:
Línia 153: Línia 162:
 Ja tenim tot preparat per publicar i testejar la nostra primera aplicació d'AR. Ja tenim tot preparat per publicar i testejar la nostra primera aplicació d'AR.
  
-Ens assegurem que salvem l'escena per aplicar tots els canvis. +==== Publiquem i instal·lem l'aplicació ==== 
 + 
 +Primer salvem l'escena per aplicar tots els canvis.  
 +   
 +  File -> Save 
 +   
 +I a continuació el Build
  
   File -> Build Settings -> Build    File -> Build Settings -> Build 
Línia 165: Línia 180:
 Ara, connectarem el nostre mòbil al PC amb un cable USB i copiarem l'arxiu DemoAR.apk al nostre mòbil. Una vegada al mòbil simplemente l'instal·lem, li diem que confiem en el desenvolupador, ja que són nosaltres mateixos, i ja la podem testejar. Ara, connectarem el nostre mòbil al PC amb un cable USB i copiarem l'arxiu DemoAR.apk al nostre mòbil. Una vegada al mòbil simplemente l'instal·lem, li diem que confiem en el desenvolupador, ja que són nosaltres mateixos, i ja la podem testejar.
  
-Li donem permisos per fer servir la càmera i quan enfoquem a la nostra imatge de Track ens ha de sortir el cylinder en negre.+Li donem permisos per fer servir la càmera i quan enfoquem a la nostra imatge de Track ens ha de sortir el nostre cilindre a sobre de la imatge.  
 + 
 +Moveu el mòbil sense deixar d'enfocar la imatge per comprovar que el cilindre està ben enganxat al món físic.
  
  
Línia 176: Línia 193:
 ==== Afegir un nou GameObject ===== ==== Afegir un nou GameObject =====
  
-Començarem cream un nou GameObject a la nostra escena:+Començarem creant un nou GameObject a la nostra escena:
  
   Botó dret del ratolí sobre //Hierarchy// -> Create Empty   Botó dret del ratolí sobre //Hierarchy// -> Create Empty
      
-Modifiquem a l'inspector la seva posició (x:0 ; y:0; z:0) i canviem el nom a un nom que ens ajudi a reconèixer la seva funció. Per canviar el nom tant ho podem fer clicant botò dret sobre l'objecte a //Hierarchy// o a la finestra de //Inspector// +Modifiquem a l'inspector la seva posició (x:0 ; y:0; z:0) i canviem el nom a un que ens ajudi a reconèixer la seva funció. Posar noms ens ajudarà quan tinguem escenes grans amb molts elements.  
 + 
 +Per canviar el nom tant ho podem fer clicant botò dret sobre l'objecte a //Hierarchy// o a la finestra de //Inspector// 
  
 Jo li he posat "BeetleSpawner" Jo li he posat "BeetleSpawner"
Línia 203: Línia 222:
     void Start()     void Start()
     {     {
-        InvokeRepeating("SpawnObject", 0.5f, 3);+        InvokeRepeating("SpawnObject", 0.5f, 2);
     }     }
        
Línia 215: Línia 234:
 Aquest script declara una variable pública de tipus GameObject i anomenada beetle. Aquest script declara una variable pública de tipus GameObject i anomenada beetle.
  
-Després, a la funció Start() que és la funció que s'executa quan s'inicia l'script, hem posat el mètode **InvokeRepeating** que cridarà la funció anomenada "SpawnObject" quan passin 0.5 segons i després tornarà a cridar la funció de manera indefinida cada 3 segons.+Després, a la funció Start() que és la funció que s'executa quan s'inicia l'script, hem posat el mètode **InvokeRepeating** que cridarà la funció anomenada "SpawnObject" quan passin 0.5 segons i després tornarà a cridar la funció de manera indefinida cada 2 segons.
  
 Per últim, a la funció "SpawnObject" cridem el mètode **Instantiate** on en crea una instancia de l'objecte "beetle", amb una posició i una rotació a la nostra escena. Hem donat una rotació de 90 graus en l'eix de les x perquè volem que el cilindre s'instanciï tombat i la rotació a l'eix de les Y serà random. Per últim, a la funció "SpawnObject" cridem el mètode **Instantiate** on en crea una instancia de l'objecte "beetle", amb una posició i una rotació a la nostra escena. Hem donat una rotació de 90 graus en l'eix de les x perquè volem que el cilindre s'instanciï tombat i la rotació a l'eix de les Y serà random.
Línia 221: Línia 240:
 Salvem l'script i tornem al Unity.  Salvem l'script i tornem al Unity. 
  
-Veurem que ara, el nostre Script te un nou slot anomenat Beetle i que és buit. Arrossegarem aqui el Cylinder que vam crear en la secció anterior i que tenim a la carpeta "Prefab"+Veurem que ara, el nostre Script, te un nou slot anomenat Beetle i que és buit. Arrossegarem aqui el Cylinder que vam crear en la secció anterior i que tenim a la carpeta "Prefab"
  
  
Línia 231: Línia 250:
 Anem a la carpeta "Prefab" i fem doble click sobre el nostre Cylinder Anem a la carpeta "Prefab" i fem doble click sobre el nostre Cylinder
  
-L'editor se'ns modificará una mica per indicar-nos que ja no estem editant l'escena sinó que estem editant el prefab.+L'editor d'Unity se'ns modificará una mica per indicar-nos que ja no estem editant l'escena sinó que estem editant el prefab.
  
 Si volem sortir d'edició del prefab i tornar a la nostra escena clicarem al signe "**<**" de la finestra //Hierarchy// Si volem sortir d'edició del prefab i tornar a la nostra escena clicarem al signe "**<**" de la finestra //Hierarchy//
Línia 324: Línia 343:
 Ara, amb el nostre prefab desat a la carpeta podem esborrar el BeetleSpawner de la nostra escena. Ara, amb el nostre prefab desat a la carpeta podem esborrar el BeetleSpawner de la nostra escena.
  
-==== Modifiquem el AR Session Origin ====+==== Modifiquem l'AR Session Origin ====
  
 L'últim pas que ens queda a fer és modificar el AR Session Origin perquè en comptes d'instanciar el cilindre en el moment de fer track a la imatge, instaciï el nostre spawner d'escarabat. L'últim pas que ens queda a fer és modificar el AR Session Origin perquè en comptes d'instanciar el cilindre en el moment de fer track a la imatge, instaciï el nostre spawner d'escarabat.
Línia 344: Línia 363:
 Sobrescribim l'apk anterior i només queda passar-lo al nostre dispositiu a travès del cable USB i tornar a instal·lar-lo. Sobrescribim l'apk anterior i només queda passar-lo al nostre dispositiu a travès del cable USB i tornar a instal·lar-lo.
  
-==== Innovacions a l'aplicació ====+===== Innovacions a l'aplicació =====
  
 Us proposo que modifiqueu el codi per fer coses noves com ara: Us proposo que modifiqueu el codi per fer coses noves com ara:
Línia 355: Línia 374:
  
   transform.Rotate(0, 0, Random.Range(0f, 360f));   transform.Rotate(0, 0, Random.Range(0f, 360f));
 +  
 + * Si teniu coneixements de 3D podeu provar d'importar al projecte un model vostre i canviar el cilindre pel vostre.
    
 </WRAP> </WRAP>
unity_ar.1666158754.txt.gz · Darrera modificació: 2022/10/19 05:52 per carlos_marin

Eines de la pàgina

Excepte on es digui una altra cosa, el contingut d'aquest wiki està subjecte a la llicència següent: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki