Marco Pucci

personal website

UNITY TUTORIAL #1 – Realtà Aumentata

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.

 

ATTENZIONE: Vuforia è gratuito per applicazioni in fase di sviluppo. Se la vostra applicazione è destinata ai market Apple e Android il costo di Vuforia è di 500$  (https://developer.vuforia.com/vui/pricing) per tutte e due le versioni della singola App.

Vuforia è stato integrato all’interno di Unity perchè molto potente e ben realizzato. Il mio consiglio è quello di utilizzarlo e fare spendere 500$ al vostro cliente. 
Per realizzare applicazioni in AR a costo zero vi invito a leggere il tutorial di Unity e EasyAR al posto di Vuforia.

 

 

Apriamo Unity e creiamo un nuovo progetto.
Click su Window /Package Manager.
Si aprirà una finestra, selezionare Vuforia Engine AR, dalla lista dei componenti che appare sotto.
Click su Install, in basso a destra.

Click su GameObject / Vuforia Engine / AR Camera.  Apparirà una finestra, click su Accept.

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. Click su Import.
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 posizioneremo 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 non dovessero apparire, fare un refresh della pagina)
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. In questo modo attiviamo la camera del nostro smartphone.

vuforia-AR-Camera

 

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
Click su Player Settings, apparirà una schermata (a destra) chiamata Projects Settings.

Click su Player.
Click su Other Settings. In rendering, eliminare la voce Vulkan.

Infine seguite tutti i passaggi effettuati nel primo tutorial, in fondo alla voce ESPORTIAMO.

Per utenti Windows: in File Building / Player Settings togliete la spunta su Android TV e Android Game.

Clicca qui per utenti Windows / Android (IN FONDO ALLA VOCE ESPORTIAMO)
Clicca qui per utenti iOS / iPhone (IN FONDO ALLA VOCE ESPORTIAMO)

 

ATTENZIONE PER UTENTI iOS:

Se durante l’esportazione appare un errore come quello presente nella figura qui sotto:

tutorial-unity-ios

 

In Target minimun iOS version inserite il valore 10.0

In Camera Usage Description inserite il seguente testo: Camera access required for target detection and tracking

 

Se riscontrate altri errori scrivetemi al seguente indirizzo email puccimarco76@yahoo.it.

 

 

 

 

Licenza Creative Commons

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

 

 

 

 

 

 

dat

 

Succ Articolo

Precedente Articolo

© 2024 Marco Pucci

Tema di Anders Norén