Creiamo un'app di realtà aumentata per MEMES!: 8 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:04

In questo Instructable creeremo un'app di realtà aumentata per Android e IOS in Unity3D che utilizza l'API di Google per cercare meme. Useremo il rilevamento del piano di terra di Vuforia in Unity, quindi questa app mobile funzionerà per la maggior parte degli utenti Android e IOS. L'uso di Vuforia ci consentirà anche di avere le immagini ancorate in una posizione in modo da poter camminare attraverso questo campo di immagini e gli oggetti rimarranno dove sono.

Testeremo anche la nuova API Watson di IBM in modo da poter eseguire queste ricerche con la nostra voce e sfruttare l'elaborazione del linguaggio naturale.

Quindi la cattiva notizia è che nessuna di queste API è totalmente gratuita, ma la buona notizia è che entrambe possono essere provate gratuitamente. L'API di ricerca personalizzata di Google ti offre 100 ricerche gratuite al giorno e l'API IBM Watson ti offre il primo mese gratuito.

In breve, questa app otterrà il nostro discorso dal microfono in Unity, lo invierà ai server IBM Watson, che ci restituiranno il testo. Prenderemo quindi quel testo e lo invieremo ai server di Google che ci restituiranno un elenco di URL di immagini in formato JSON.

Passaggio 1: configurare l'SDK IBM Watson in Unity

Per far funzionare l'API Watson devi prima ottenere le tue credenziali dal loro sito. Vai a Console.bluemix.net, crea un account e accedi. Vai al tuo account IBM e vai a Cloud Foundry Orgs e crea un nuovo spazio. Ora vai alla tua dashboard e fai clic per sfogliare i servizi, aggiungi il servizio vocale al testo perché è quello che useremo. Scegli la tua regione, organizzazione e spazio e crea il progetto. Ora vedrai le tue credenziali API in basso.

Scarica Unity se non lo hai già e importa l'SDK IBM Watson dall'archivio risorse in Unity. Possiamo testarlo creando un oggetto di gioco vuoto e chiamandolo IBM Watson e aggiungendo lo script di streaming di esempio. Questo script è già impostato per registrare l'audio da unity e inviarlo ai server Watson per l'elaborazione.

Per ora useremo solo questo script di esempio perché abbiamo molto altro da fare, ma forse la prossima volta possiamo approfondire le cose di Watson perché vorrei fare qualcosa con l'API Vision.

Passaggio 2: testare IBM Watson Text to Speech

Questo script sta cercando un oggetto di testo dell'interfaccia utente, quindi creiamo un nuovo pulsante dell'interfaccia utente che ci darà il testo di cui abbiamo bisogno, useremo il pulsante in seguito. Imposta la tela in base alle dimensioni dello schermo e ridimensiona leggermente il pulsante. Ancoralo in basso a sinistra. Trascina quel testo nello slot vuoto. Apri lo script e aggiungi le nostre credenziali IBM Watson, trova dove viene utilizzato il testo "resultsField" e impostalo solo su "alt.transcript" perché useremo questo testo per cercare su Google. Ora, prima di poterlo testare, dobbiamo rendere dinamicamente la dimensione del testo in modo che tutto ciò che diciamo si adatterà all'interno della scatola. Torna al testo e impostalo per adattarlo al meglio. Digita del testo per provarlo. Ora, quando facciamo clic su Riproduci, le nostre parole verranno trascritte in testo dall'API Watson Text to Speech.

Passaggio 3: configura l'API di ricerca personalizzata di Google

Il prossimo pezzo che dobbiamo fare è configurare l'API di ricerca personalizzata di Google da utilizzare in Unity. Ad alto livello faremo una richiesta HTTP da Unity ai server di Google che ci restituirà una risposta in formato JSON.

Quindi vai alla pagina di configurazione dell'API JSON di Google Custom Search, fai clic per ottenere una chiave API e crea una nuova app. Tieni questo aperto. Ora possiamo andare al pannello di controllo. Inserisci qualsiasi cosa per i siti da cercare, chiamalo come preferisci e fai clic su Crea.

Fare clic su pannello di controllo e apportare alcune modifiche: vogliamo principalmente cercare meme e attivare la ricerca di immagini. Sotto i siti in cui cercare, passa a tutto il web. Fai clic su Aggiorna per salvare tutto.

Ora trova google api explorer e vai all'API di ricerca personalizzata. Questo ci consentirà di formattare la risposta JSON che riceviamo da Google. Quindi inserisci qualsiasi cosa per la query per ora, incolla l'ID del tuo motore di ricerca, inserisci 1 per il filtro in modo da non ottenere duplicati, inserisci 10 sotto il numero perché questo è il numero massimo di risultati che possiamo restituire alla volta, inserisci un'immagine per il tipo di ricerca perché è tutto ciò che vogliamo restituire. Inserisci 1 per iniziare e infine sotto i campi inserisci "items/link" perché per ogni articolo restituito vogliamo solo il collegamento dell'immagine. Ora, quando fai clic su Esegui, vedrai che vengono restituiti 10 collegamenti di immagini carine.

Ora dobbiamo inserire queste immagini in Unity.

Passaggio 4: configurare Vuforia in Unity

Facciamo funzionare Vuforia in modo da poter sfruttare il rilevamento del loro piano di terra. Salva la scena attuale e vai alle impostazioni di costruzione. Passa alla tua piattaforma su Android o IOS e se sei su IOS inserisci qualcosa per l'identificatore del pacchetto, aggiungi una descrizione dell'utilizzo della fotocamera e del microfono. Nelle impostazioni XR controlla la realtà aumentata Vuforia supportata.

Ora nella scena elimina la fotocamera principale e aggiungi una Vuforia ARCamera. Vai alla sezione di configurazione e cambia la modalità di tracciamento in posizionale. Deseleziona tutti i database perché non ne abbiamo bisogno.

Ora aggiungi un cercatore aereo e dobbiamo sovrascrivere il suo comportamento predefinito perché vogliamo distribuire lo stadio del piano di terra solo una volta, quindi cerchiamo di trovare lo script Deploy Stage una volta sul sito Web Vuforia. Porta quel copione in Unity e mettilo sul cercatore aereo, rimuovendo il vecchio copione che c'era. Cambia la modalità in interattiva e assicurati che la funzione "OnInteractiveHitTest" venga chiamata su quell'evento Unity. Mentre siamo qui impostiamo il pulsante che abbiamo creato in precedenza su attivo una volta trovato il piano terra, imposta il suo stato predefinito su inattivo. Ora metti un piano di terra nella scena e cambialo a mezz'aria perché vogliamo che tutte le immagini galleggino nell'aria. Trascina questo piano di terra nello slot vuoto sul cercatore di piani.

Passaggio 5: creare un prefabbricato per immagini

Prima di iniziare a mettere insieme tutti questi pezzi, dobbiamo creare un oggetto di gioco prefabbricato che possiamo istanziare ogni volta che viene caricata un'immagine. Quindi crea un oggetto di gioco vuoto sotto il livello del piano terra e chiamalo "picPrefab". Crea un quad come figlio di quello e ridimensionalo di 2, ruota la sua y di 180 gradi in modo che il vettore in avanti dei genitori che viene mostrato come una freccia blu sia la parte anteriore del quad.

Crea un nuovo script chiamato "PictureBehavior" e aggiungilo al nostro picPrefab.

Ora trascina questa immagine prefabbricata nella cartella delle risorse e questo è ciò su cui metteremo ogni immagine.

Il nostro script "PictureBehavior" dovrebbe assomigliare a questo:

utilizzando System. Collections;

utilizzando System. Collections. Generic; utilizzando UnityEngine; public class PictureBehavior: MonoBehaviour { public Renderer quadRenderer; posizione desiderata Vector3 privata; void Start(){ //guarda la telecamera transform. LookAt (Camera.main.transform); Vector3 desideratoAngle = nuovo Vector3 (0, transform.localEulerAngles.y, 0); transform.rotation = Quaternion. Euler (desiredAngle); //forza in aria desiderataPosition = transform.localPosition; transform.localPosition += new Vector3 (0, 20, 0); } void Update(){ transform.localPosition = Vector3. Lerp (transform.localPosition, desiderataPosition, Time.deltaTime * 4f); } public void LoadImage(string url){ StartCoroutine (LoadImageFromURL (url)); } IEnumerator LoadImageFromURL(string url){ WWW www = nuovo WWW(url); rendimento rendimento www; quadRenderer.material.mainTexture = www.texture; } }

Passaggio 6: crea uno script per l'API di Google

Ora trasciniamo il riferimento al renderer quad dal nostro "picPrefab".

Abbiamo solo due script da creare, quindi creiamo uno script C# chiamato GoogleService.cs e PictureFactroy.cs.

All'interno di "GoogleService" incolliamo questo codice che fa la nostra richiesta:

utilizzando System. Collections;

utilizzando System. Collections. Generic; utilizzando UnityEngine; utilizzando UnityEngine. UI; public class GoogleService: MonoBehaviour { public PictureFactory pictureFactory; pulsante di testo pubblicoTesto; private const string API_KEY = "METTI QUI LA CHIAVE API!!!!!"; public void GetPictures(){ StartCoroutine (PictureRoutine()); } IEnumerator PictureRoutine(){ buttonText.transform.parent.gameObject. SetActive (false); query stringa = buttonText.text; query = WWW. EscapeURL (query + " meme"); //cancella le vecchie immagini pictureFactory. DeleteOldPictures(); //salva il vettore della fotocamera in avanti in modo che possiamo spostarci mentre gli oggetti vengono posizionati Vector3 cameraForward = Camera.main.transform.forward; //possiamo ottenere solo 10 risultati alla volta, quindi dobbiamo scorrere e salvare i nostri progressi cambiando il numero iniziale dopo ogni 10 int rowNum = 1; for (int i = 1; i <= 60; i += 10) { string url = "https://www.googleapis.com/customsearch/v1?q=" + query + "&cx=011535004225295624669%3Afeb1gwic6bs&filter=1&num =10&searchType=image&start=" + i + "&fields=items%2Flink&key=" + API_KEY; WWW www = nuovo WWW (url); rendimento rendimento www; pictureFactory. CreateImages (ParseResponse(www.text), rowNum, cameraForward); numeroriga++; } restituisce il nuovo WaitForSeconds (5f); buttonText.transform.parent.gameObject. SetActive (true); } List ParseResponse(string text){ List urlList = new List (); string urls = text. Split ('\n'); foreach (linea stringa negli URL) { if (line. Contains("link")){ url stringa = line. Substring (12, line. Length-13); //il filtraggio per png o jpg non sembra funzionare da Google, quindi lo facciamo qui: if (url. Contains (".jpg") || url. Contains (".png")) { urlList. Add (url); } } } restituisce urlList; } }

Passaggio 7: crea la nostra fabbrica di immagini

All'interno di PictureFactory.cs inserisci questo codice per creare tutte le nostre immagini e carica le loro trame da un URL.

utilizzando System. Collections;

utilizzando System. Collections. Generic; utilizzando UnityEngine; public class PictureFactory: MonoBehaviour { public GameObject picPrefab; servizio pubblico di Google servizio di Google; public void DeleteOldPictures(){ if (transform.childCount > 0) { foreach (Trasforma figlio in this.transform) { Distruggi (child.gameObject); } } } public void CreateImages(ListurlList, int resultNum, Vector3 camForward){ int picNum = 1; Vector3 center = Camera.main.transform.position; foreach (string url in urlList) { Vector3 pos = GetPosition (picNum, resultNum, camForward); GameObject pic = Instantiate (picPrefab, pos, Quaternion.identity, this.transform); pic. GetComponent(). LoadImage (url); picNum++; } } Vector3 GetPosition(int picNum, int rowNum, Vector3 camForward){ Vector3 pos = Vector3.zero; if (picNum <= 5) { pos = camForward + new Vector3 (picNum * -3, 0, rowNum * 3.5f); } else { pos = camForward + new Vector3 ((picNum % 5) * 3, 0, rowNum * 3.5f); } ritorno pos; } }

Passaggio 8: abbiamo finito

Crea un gameobject vuoto chiamato GoogleService e inserisci lo script "GoogleSerivice" su di esso.

Trascina lo script "PictureFactory" sullo stage del piano terra perché tutte le nostre immagini verranno create come figlie di questo oggetto di gioco.

Trascina i riferimenti appropriati nell'ispettore, fai la stessa cosa per il servizio google.

L'ultima cosa che dovremmo fare è assicurarci che la nostra funzione "GetPictures" venga chiamata. Quindi andiamo all'evento "onClick" del nostro pulsante e chiamiamolo da lì.

Ora possiamo fare clic su Riproduci e testarlo. Assicurati di abilitare la fase del piano terra e il pulsante. Pronuncia una parola e fai clic sul pulsante per eseguire la ricerca su quel testo!

Ora per ottenere questa app sul tuo telefono, collegala e vai su File-> Impostazioni build. Premi costruisci e corri!

Fatemi sapere nei commenti se avete domande!