UNITY TUTORIAL #1 – Realtà Aumentata

0

UNITY TUTORIAL #1 – Realtà Aumentata – Realizziamo la prima app in AR

Per vedere tutti i tutorial: www.marcopucci.it

 

SE NON HAI INSTALLATO UNITY CLICCA QUI (PER PC) O QUI PER (iOS)

In questo tutorial realizziamo la prima applicazione per Android e iOS in Realtà Aumentata utilizzando Unity e Vuforia.
Unity è un software che permette di creare giochi, realtà virtuale e AR mentre Vuforia è una libreria che deve essere integrata con Unity e permette il riconoscimento del marker visivo.

Apriamo Unity e creiamo un nuovo progetto.
Click su File / Build Settings e poi su Player Settings. A destra si apre la finestra delle proprietà. Click su
XR Settings (in fondo in basso) e attivare la modalità Vuforia Augmented Reality Support.
In questo modo Unity è pronto ad utilizzare la Realtà Aumentata con la libreria Vuforia.

Click su GameObject / Vuforia / AR Camera. Importiamo tutti i componenti.
Quella appena inserita è la camera del dispositivo che si accenderà appena avviata l’applicazione.
Eliminiamo dalla scena la Main Camera.
Click su GameObject / Vuforia / Image. Nella parte sinistra della scena è apparso l’elemento ImageTarget che sarà il nostro marker visivo.
A questo punto dobbiamo integrare Unity con Vuforia.
Collegatevi al sito https://developer.vuforia.com/ e registratevi.
Click su Develop e poi su GET DEVELOPMENT KEY

 

 vuforia-key

 

Copiate tutta la licenza. Dobbiamo copiarla all’interno di Unity.
Apriamo Unity, selezioniamo AR Camera e nella parte destra della scena (all’interno della finestra Inspector)
click su Open Vuforia Configuration.

All’interno di App License Key incolliamo il codice copiato da Vuforia (ATTENZIONE: dopo aver copiato il codice NON cliccate su Add License).
Torniamo sul sito di Vuforia per preparare l’immagine Trigger, il nostro marker visivo.
Click su Target Manager (nella foto in basso evidenziato in rosso).

vuforia-target-image

 

Click su Add Database.
All’interno della finestra che si apre inseriamo un altro nome (io di solito utilizzo lo stesso, in questo caso space).
Click su Device e poi su Create.
Selezionate il nome appena creato e poi click su Add Target. A questo punto dobbiamo scegliere l’immagine che farà patire la nostra realtà aumentata. Cercate sul web un’immagine qualsiasi che poi dovrete stampare. Per questo primo tutorial ho scelto l’immagine qui sotto.
Potete scaricarla dal sito FreePik inserendo la parola “space” nel motore di ricerca.

marker

 

Non tutte le immagini funzionano bene come marker. Una grafica colorata e con tanti elementi grafici è perfetta per rendere più stabile l’oggetto 3D che poi posizieneremo sopra.
Caricate l’immagine su Vuforia, inseriamo 1 nel campo Width e poi click su Add.

vuforia-marker

Le stelline colorate indicano se l’immagine caricata va bene oppure è un marker debole.
Se avete 5 stelle cliccate su Download Database. Nella finestra successiva selezioniamo Unity Editor e poi click su Download.
In questo modo abbiamo scaricato la libreria che consentirà alla camera degli
smartphone di riconoscere il marker. Stampate il marker a colori.

Apriamo Unity.
Click su Assets / Import Package / Custom Package e selezionate il file appena scaricato da Vuforia.
Terminata l’importazione del package completiamo il settaggio dell’immagine trigger e della camera AR.

Click su Image Target (a sinistra). Nella sezione Inspector (a destra) si apre il pannello di configurazione.
Click su menù a tendina di Database e selezionate Space (o il nome che avete dato al vostro componente su Vuforia).

 

unity-vuforia

 

Click su AR Camera (a sinistra).
Click, nel pannello delle impostazioni a destra, sul menù a tendina di World Center Mode e selezionate
DEVICE TRACKING. In questo modo attiviamo la camera del nostro smartphone.
Click su Open Vuforia Configuration.

 

vuforia-AR-Camera

 

Click su AR Camera (a sinistra).
Click, nel pannello delle impostazioni a destra, sul menù a tendina di World Center Mode e selezionate
DEVICE TRACKING. In questo modo attiviamo la camera del nostro smartphone.
Click su Open Vuforia Configuration.

 

vuforia-configuration

 

Attivate Load Space Database (o il nome che avete scelto su Vuforia) e disattivate i tre elementi sottostanti.
In questo modo abbiamo eliminato il riconoscimento di tre marker di esempio di Vuforia e abbiamo attivato il nostro marker.
La fase di impostazione della camera e dell’immagine marker è terminata.
Ora inizia la parte divertente di Unity!

 

unity-Ar-camera2

 

Selezioniamo la AR Camera a sinistra. All’interno della scena appaiono delle frecce colorate. Selezionate lo strumento MOVE (in alto cerchiato in rosso), trascinate la AR Camera con la freccia verde (spostatela leggermente più in alto). Un secondo sistema per muovere la camera è farlo dal pannello INSPECTOR a destra.
Nel box della Y inserite il valore 3.

unity-Ar-camera3

Ruotiamo la AR Camera in modo che possa inquadrare il marker. Utilizzate lo strumento ROTATE o
inserite il valore 90 nella X di Rotation (a destra).
Se tutto è andato bene nella finestra Game possiamo vedere il nostro marker inquadrato dall’alto.

Inseriamo un oggetto 3d all’interno della scena.

Click su GameObject / 3D Object / Sphere.
Una sfera apparirà all’interno della scena.

 

 unity-scale-object

Facciamo la sfera più piccola con lo strumento SCALE. Cliccate sul cubo giallo al centro e trascinate il mouse.
Spostiamola in alto in modo da rimanere staccata dal marker.
Infine trasciniamo (nel pannello a destra) la sfera all’interno di Image Target (come nella figura qui sotto).

 

unity-AR-Camera-augmented-reality

Se stiamo utilizzando un computer con una webcam possiamo vedere se il lavoro realizzato funziona.
Click sul tasto PLAY. Nella finestra Game apparirà la nostra immagine.
Posizioniamo il marker visivo che abbiamo stampato e puntiamolo verso la webcam.
La sfera apparirà al centro del disegno. Click nuovamente su PLAY per bloccare l’anteprima.

Inseriamo una texture per rendere la sfera un pianeta.
Aprite Google e cercate “pianeta terra texture”. Scaricate un’immagine simile a quella qui sotto.

 

terra

 

Trascinate la foto all’interno di Unity dentro l’area Assets (come nella foto qui sotto).

unity-assets

 

Trascinate la foto dalla cartella ASSETS all’interno della sfera.

unity_augmented-rality

 

Finito!
Ora dobbiamo solamente esportare.

 

Click su File / Save Scenes
Click su File / Build Settings
Qui dovete rifare i passaggi effettuati nel primo tutorial, in fondo alla voce ESPORTIAMO
Clicca qui per utenti Windows / Android
Clicca qui per utenti iOS / iPhone
Qui sotto uno screenshot del mio smartphone.

 

aunity-aurasma

 

 

 

Licenza Creative Commons

I tutorial sono liberamente scaricabili e condivisibili sotto l’etichetta Creative Commons (non è possibile commercializzarli e modificarli)

 

 

 

 

 

 

dat

 

About The Author