Share
Questo tutorial spiegherà come implementare un'applicazione di realtà aumentata di base con Vuforia SDK su Unity. Durante il tutorial, imparerai come generare una scena compatibile con Vuforia e come implementare vari script, incluso il ray-tracing, per poter interagire con l'oggetto all'interno della scena.
Prima di iniziare, è necessario registrarsi per un account sviluppatore Vuforia. Vai al Portale degli sviluppatori di Vuforia per creare un account.
Una volta creato il tuo account, è ora di scaricare il pacchetto Unity di Vuforia. Vai alla pagina di download e scarica il pacchetto specifico per Unity.
È necessario un obiettivo immagine per consentire alla fotocamera di un dispositivo di riconoscere un riferimento e tracciarlo. L'orientamento e le dimensioni effettive dell'immagine di destinazione influenzano direttamente gli stessi attributi delle immagini sovrapposte.
Qualsiasi immagine può essere assegnata come bersaglio. Tuttavia, le caratteristiche dell'immagine di destinazione determinano in modo efficace il modo in cui viene tracciato il target. In questo tutorial, utilizzeremo uno strumento online per generare immagini target ricche di funzionalità. Genera un target immagine utilizzando lo strumento online Generatore di indicatori di guadagno aumentato e salva l'immagine sul tuo computer.
Crea un nuovo progetto di unità 3D e quindi fai doppio clic sul pacchetto Unity scaricato per Vuforia. Questo richiederà la seguente finestra. Clic Tutti per selezionare tutto il contenuto del pacchetto, quindi premere Importare. Questo sta per importare tutti gli strumenti necessari per l'applicazione AR.
Il prossimo passo è quello di importare i file di destinazione dell'immagine. Per ottenere i file di destinazione dell'immagine, è necessario utilizzare la pagina degli sviluppatori di Vuforia.
Vai al Portale degli sviluppatori di Vuforia e poi accedi al tuo account. Sotto il Sviluppare scheda, vedrai il Target Manager. Per prima cosa devi aggiungere un database. Usa il pulsante designato e aggiungi un database.
Assegna un nome al database come desideri e seleziona Dispositivo come il tipo.
Ora siamo pronti per aggiungere un obiettivo in questo database. Clicca sul Aggiungi obiettivo pulsante, e apparirà la seguente finestra. Il tipo dovrebbe essere selezionato come Immagine singola nel nostro caso. Seleziona il target immagine che abbiamo generato utilizzando lo strumento online. Se hai problemi a caricare il file, prova a convertirlo in formato .jpg e a caricarlo di nuovo.
La larghezza è un parametro cruciale. Questo dovrebbe corrispondere alla dimensione reale dell'immagine di destinazione che alla fine si stamperà su carta. Ho impostato la larghezza a 40. Non c'è unità poiché corrisponde all'unità della scena.
Una volta aggiunto il target nel tuo database, Vuforia valuta il tuo obiettivo. Con il generatore di immagini di destinazione che abbiamo usato, le caratteristiche sono alte e quindi ottiene 5 stelle, il che significa che è facile per Vuforia riconoscere e tracciare questo target.
Ora devi scaricare questo database. Per farlo, colpisci Scarica il database pulsante e selezionare Unity Editor come piattaforma di sviluppo.
Una volta scaricato il database, fare doppio clic su di esso e importare tutti i contenuti nella scena Unity su cui stiamo lavorando.
Iniziamo aggiungendo l'oggetto ARCamera di Vuforia alla nostra scena. Per fare ciò, basta seguire il Asset> Vuforia> Prefabbricati directory e aggiungere l'oggetto ARCamera trascinando e rilasciando la scena.
Selezionare l'oggetto ARCamera e sotto il Ispettore scheda, vedrai il Chiave di licenza dell'app sezione. Questa chiave di licenza sarà ottenuta dal portale per sviluppatori di Vuforia.
Accedi al tuo account Vuforia sul Portale degli sviluppatori e sotto il Sviluppare scheda, troverai il Manager delle licenze sezione. Clicca il Aggiungi chiave di licenza pulsante. Nella pagina seguente, selezionare Sviluppo come il tipo di progetto e definire un nome di applicazione per il progetto. Questo nome non è cruciale e puoi modificarlo in seguito, se lo desideri.
Colpire Il prossimo, e quindi confermare il codice di licenza nella pagina successiva.
Seleziona la licenza che hai appena creato. Rivelerà la chiave di licenza che dobbiamo copiare e incollare nell'oggetto ARCamera. Copia questa licenza e incollala nel Chiave di licenza dell'app sezione sotto le impostazioni di ARCamera.
Sotto Comportamento di caricamento del database, controlla il Carica il database ARdemo opzione. Dopo averlo verificato, viene visualizzata un'altra opzione Attivare apparirà proprio sotto di esso. Controlla anche questa opzione.
Il ARdemo parte di Carica il database ARdemo l'opzione dipende da come hai chiamato il tuo database.
Il secondo oggetto di cui abbiamo bisogno nella nostra scena è il Immagine Target oggetto.
Sotto il Asset> Vuforia> Prefabbricati directory, troverai anche l'oggetto "ImageTarget". Aggiungi questo oggetto alla tua scena e selezionalo per rivelare le opzioni.
Sotto il Comportamento dell'obiettivo dell'immagine sezione, vedrai il Banca dati opzione. Seleziona il tuo database dal menu a discesa e seleziona il target immagine specifico che desideri assegnare all'oggetto target dell'immagine dal menu a discesa dell'opzione "Target immagine". Se hai più obiettivi immagine per un database, saranno tutti elencati qui.
I parametri width e height verranno impostati automaticamente in base al valore assegnato durante la creazione dei target immagine nel portale per sviluppatori di Vuforia.
Il prossimo passo è creare la grafica e legarli al target dell'immagine. È possibile creare un oggetto GameObject oppure importare il proprio modello 3D in Unity e utilizzarlo. In questo tutorial useremo un semplice oggetto cubo 3D per semplicità.
Aggiungi un oggetto cubo alla scena come mostrato nella figura seguente.
Impostare i parametri x, y e z per Scala opzione sotto Trasformare a 40, in modo che corrisponda alla dimensione del target dell'immagine che abbiamo generato.
Se imposti un altro valore di larghezza per il target dell'immagine quando lo generi nel portale per sviluppatori, utilizza il valore selezionato per adattarlo alle dimensioni dell'intero target dell'immagine.
L'ultimo passaggio per far funzionare la nostra applicazione AR è impostare l'oggetto cubo come figlio della destinazione dell'immagine. Per fare ciò, trascina semplicemente l'oggetto cubo e rilasciatelo nell'oggetto imageTarget sotto il menu della gerarchia.
Lo stato finale della scena dovrebbe essere il seguente:
Ora colpisci il Giocare pulsante per eseguire la tua applicazione. Userà la tua webcam. Stampare l'immagine di destinazione o aprirla dal telefono in modo che Vuforia possa rilevarla tramite la webcam. Ho fatto quest'ultimo e ho aperto l'immagine di destinazione dal mio telefono.
Ecco lo screenshot effettivo della vista della webcam. Puoi vedere che l'oggetto cubo copre l'intera immagine di destinazione, poiché abbiamo confrontato i valori del fattore di scala sia per l'oggetto 3D che per l'immagine di destinazione.
Finora, abbiamo sviluppato un'applicazione AR di base che riconosce e tiene traccia della nostra immagine di destinazione e visualizza la grafica 3D designata. Tuttavia, per un'applicazione AR completa, dobbiamo anche essere in grado di interagire con gli oggetti, aumentando la realtà.
A tale scopo, dobbiamo essere in grado di rilevare dove abbiamo fatto clic o che abbiamo toccato, nel caso di un dispositivo mobile. Lo faremo implementando un ray-tracer.
Innanzitutto, crea una cartella denominata "script" sotto Risorse per mantenere tutto organizzato. Stiamo andando a memorizzare i nostri file di script in questa cartella. Quindi creare un file script C # in questa cartella. Chiamalo "rayTracer". La denominazione è importante perché il codice seguente deve corrispondere a questo nome di file specifico. Se si preferisce utilizzare un nome diverso per il file di script, è necessario modificare anche il codice fornito di conseguenza.
Copia e incolla il seguente codice nel file C # Script appena creato e denominato "rayTracer".
usando UnityEngine; usando System.Collections; using System.Collections.Generic; public class rayTracer: MonoBehaviour Lista privatatouchList = nuova lista (); GameObject privato [] touchPrev; hit privato RaycastHit; void Update () #if UNITY_EDITOR if (Input.GetMouseButton (0) || Input.GetMouseButtonDown (0) || Input.GetMouseButtonUp (0)) touchPrev = new GameObject [touchList.Count]; touchList.CopyTo (touchPrev); touchList.Clear (); Ray ray = Camera.main.ScreenPointToRay (Input.mousePosition); //Debug.DrawRay(ray.origin, ray.direction * 10000, Color.green, 10, false); if (Physics.Raycast (ray, out hit)) Destinatario GameObject = hit.transform.gameObject; touchList.Add (destinatario); if (Input.GetMouseButtonDown (0)) recipient.SendMessage ("touchBegan", hit.point, SendMessageOptions.DontRequireReceiver); if (Input.GetMouseButtonUp (0)) recipient.SendMessage ("touchEnded", hit.point, SendMessageOptions.DontRequireReceiver); if (Input.GetMouseButton (0)) recipient.SendMessage ("touchStay", hit.point, SendMessageOptions.DontRequireReceiver); foreach (GameObject g in touchPrev) if (! touchList.Contains (g)) g.SendMessage ("touchExit", hit.point, SendMessageOptions.DontRequireReceiver); #endif if (Input.touchCount> 0) touchPrev = new GameObject [touchList.Count]; touchList.CopyTo (touchPrev); touchList.Clear (); foreach (Tocca tocco in Input.touches) Ray ray = Camera.main.ScreenPointToRay (touch.position); if (Physics.Raycast (ray, out hit)) Destinatario GameObject = hit.transform.gameObject; touchList.Add (destinatario); if (touch.phase == TouchPhase.Began) recipient.SendMessage ("touchBegan", hit.point, SendMessageOptions.DontRequireReceiver); if (touch.phase == TouchPhase.Ended) recipient.SendMessage ("touchEnded", hit.point, SendMessageOptions.DontRequireReceiver); if (touch.phase == TouchPhase.Stationary || touch.phase == TouchPhase.Moved) recipient.SendMessage ("touchStay", hit.point, SendMessageOptions.DontRequireReceiver); if (touch.phase == TouchPhase.Canceled) recipient.SendMessage ("touchExit", hit.point, SendMessageOptions.DontRequireReceiver); foreach (GameObject g in touchPrev) if (! touchList.Contains (g)) g.SendMessage ("touchExit", hit.point, SendMessageOptions.DontRequireReceiver);
Questo script rileva entrambi i clic del mouse se si sta lavorando sull'editor Unity e si toccano gli input se è stata distribuita l'applicazione su un dispositivo mobile con uno schermo tattile.
Una volta creato lo script raytracer, è necessario attivarlo assegnandolo a uno degli oggetti nella scena. Ho selezionato l'oggetto ARCamera e aggiunto gli script rayTracer come componente utilizzando il Aggiungi componente pulsante sotto il Ispettore linguetta.
Ora assegneremo un materiale al nostro oggetto Cube e cambieremo il colore del materiale in seguito all'interazione con il cubo.
Sotto Risorse, crea un materiale e nominalo come desideri.
Ora assegna questo materiale trascinando e rilasciando l'oggetto cubo.
Crea un nuovo script C # nella cartella degli script e chiamalo "interazione".
Copia il seguente codice C # nel tuo file di script "interazione" e poi aggiungi questo file di script all'oggetto cubo come componente, proprio come abbiamo fatto con il file di script "rayTracer". Tuttavia, questa volta dovrebbe essere un componente dell'oggetto cubo, questo è importante per poter interagire solo con l'oggetto cubo.
usando UnityEngine; usando System.Collections; interazione di classe pubblica: MonoBehaviour public static Color defaultColor; public static Color selectedColor; materiale statico pubblico mat; void Start () mat = GetComponent().Materiale; mat.SetFloat ("_ Mode", 2); mat.SetInt ("_ SrcBlend", (int) UnityEngine.Rendering.BlendMode.SrcAlpha); mat.SetInt ("_ DstBlend", (int) UnityEngine.Rendering.BlendMode.OneMinusSrcAlpha); mat.SetInt ("_ ZWrite", 0); mat.DisableKeyword ( "_ ALPHATEST_ON"); mat.EnableKeyword ( "_ ALPHABLEND_ON"); mat.DisableKeyword ( "_ ALPHAPREMULTIPLY_ON"); mat.renderQueue = 3000; defaultColor = new Color32 (255, 255, 255, 255); selectedColor = new Color32 (255, 0, 0, 255); mat.color = defaultColor; void touchBegan () mat.color = selectedColor; void touchEnded () mat.color = defaultColor; void touchStay () mat.color = selectedColor; void touchExit () mat.color = defaultColor;
In questo script di "interazione", ci riferiamo al materiale dell'oggetto cubo come "mat".
Abbiamo creato due oggetti materiali diversi chiamati DefaultColor e selectedColor. DefaultColor è selezionato per essere bianco, come indicano i parametri RGBA, quali sono (255, 255, 255, 255).
Inizializziamo il colore del materiale dell'oggetto cubo come DefaultColor dalla seguente riga:
mat.color = defaultColor;
Abbiamo quattro diverse funzioni per quattro diversi stati:
Accentsconagua
touchBegan () viene chiamato nell'istante in cui hai toccato l'oggetto.touchEnded () viene chiamato quando si rilascia il dito.touchStay () viene chiamato subito dopo aver toccato l'oggetto: questa funzione segue touchBegan (). Quindi, se assegni colori diversi al tuo materiale in queste funzioni, è improbabile che tu veda il colore assegnato nel touchStay () funzione, poiché è il primo istante in cui viene riconosciuto il tocco.touchExit () viene chiamato quando trascini il dito fuori dalla superficie dell'oggetto cubo, invece di rilasciare il dito, che chiama il touchEnded () funzione come spiegato sopra.Nel nostro codice, quando tocchiamo l'oggetto cubo, assegniamo il selectedColor oggetto a mat.color, che è il colore del materiale del nostro oggetto cubo.
Assegnando il selectedColor all'interno del touchStay () funzione, ci assicuriamo che il colore dell'oggetto cubo sia uguale a selectedColor finché teniamo il dito sull'oggetto cubo. Se rilasciamo il nostro dito o lo trasciniamo fuori dall'oggetto cubo, lo assegniamo DefaultColor al parametro del colore del materiale chiamando il touchEnded () o touchExit () funzioni in conformità con l'azione che abbiamo intrapreso.
Ora esegui il progetto e fai clic sull'oggetto cubo una volta che l'immagine di destinazione viene riconosciuta e l'oggetto cubo è apparso. Dovrebbe diventare nuovamente rosso e bianco quando rilasci il tuo clic o lo sposti dalla superficie dell'oggetto cubo.
Puoi sperimentare con colori diversi per le quattro diverse azioni per comprenderle a fondo.
In questo tutorial, abbiamo presentato un'introduzione all'SDK di Vuforia per Unity insieme al suo portale per gli sviluppatori e abbiamo visto come generare un'immagine di destinazione e una chiave di licenza appropriata.
Inoltre, abbiamo generato file di script personalizzati per poter interagire con la grafica aumentata. Questo tutorial è solo un'introduzione per consentirti di iniziare a utilizzare Vuforia con Unity e creare le tue applicazioni AR.
