Låt oss göra en Augmented Reality -app för MEMES !: 8 steg

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:46

I denna Instructable kommer vi att göra en augmented reality -app för Android och IOS i Unity3D som använder Googles API för att söka efter memes. Vi kommer att använda Vuforias markplanidentifiering i Unity så att den här mobilappen fungerar för de flesta Android- och IOS -användare. Genom att använda Vuforia kan vi också ha bilderna förankrade på en plats så att vi kan gå igenom detta bildfält och föremålen kommer att stanna där de är.

Vi kommer också att testa det nya IBM Watson API så att vi kan göra dessa sökningar med vår röst och utnyttja deras naturliga språkbehandling.

Så de dåliga nyheterna är att ingen av dessa API: er är helt gratis, men de goda nyheterna är att de båda är gratis att prova. Googles anpassade sök -API ger dig 100 gratis sökningar per dag, och IBM Watson API ger dig den första månaden gratis.

Kort sagt, den här appen kommer att få vårt tal från mikrofonen i Unity, skicka det till IBM Watson -servrarna, som skickar tillbaka texten till oss. Vi tar sedan den texten och skickar den till Googles servrar som ger oss en lista över bildadresser i JSON -form.

Steg 1: Konfigurera IBM Watson SDK i Unity

För att få igång Watson API måste du först få dina referenser från deras webbplats. Gå till Console.bluemix.net, skapa och konto och logga in. Gå till ditt IBM -konto och navigera till molngjuterier och skapa ett nytt utrymme. Gå nu till din instrumentpanel och klicka för att bläddra bland tjänster, lägg till talet i texttjänsten eftersom det är vad vi ska använda. Välj din region, organisation och utrymme och skapa projektet. Nu ser du dina API -referenser längst ner.

Ladda ner Unity om du inte redan har det och importera IBM Watson SDK från tillgångsbutiken i Unity. Vi kan testa detta genom att skapa ett tomt spelobjekt och kalla det IBM Watson och lägga till exemplet streaming -skript. Detta skript är redan inställt för att spela in ljud från enhet och skicka det till Watsons servrar för bearbetning.

För tillfället kommer vi bara att använda detta exempelskript eftersom vi har mycket mer att göra men kanske nästa gång kan vi gå djupare in i Watson -grejerna eftersom jag skulle vilja göra något med Vision API.

Steg 2: Testa IBM Watson Text to Speech

Detta skript letar efter ett UI -textobjekt, så låt oss skapa en ny UI -knapp, detta ger oss den text vi behöver, vi kommer att använda knappen senare. Ställ in duken på skalan med skärmstorlek och ändra storlek på knappen lite. Förankra den längst ned till vänster. Dra texten till den tomma facket. Öppna skriptet och låt oss lägga till våra IBM Watson -referenser, hitta var "resultsField" -texten används och ställ in den till endast "alt.transcript" eftersom vi kommer att använda denna text för att söka på google. Nu innan vi kan testa detta måste vi göra själva textstorleken dynamiskt så att allt vi säger passar in i rutan. Gå tillbaka till texten och ställ in den så att den passar bäst. Skriv in lite text för att testa det. När vi nu klickar på play kommer våra ord att transkriberas till text från Watson Text to Speech API.

Steg 3: Konfigurera Google Custom Search API

Nästa del vi behöver göra är att konfigurera Googles anpassade sök -api för att användas i Unity. På en hög nivå kommer vi att göra en HTTP -begäran från Unity till Googles servrar som ger oss ett svar i JSON -format.

Så gå till konfigurationssidan för Google Custom Search JSON API, klicka för att få en API -nyckel och skapa en ny app. Håll det här öppet. Nu kan vi gå till kontrollpanelen. Lägg in allt för att webbplatserna ska kunna söka, namnge det oavsett och klicka på skapa.

Klicka på kontrollpanelen och gör några ändringar: vi vill främst söka efter memes och aktivera bildsökning. Under webbplatser att söka byta till hela webben. Klicka på uppdatera för att spara allt.

Hitta nu google api explorer och gå till anpassat sök -API. Detta gör att vi kan formatera det JSON -svar vi får från Google. Så lägg in vad som helst för frågan för tillfället, klistra in ditt sökmotor -ID, lägg in ett för filtret så att vi inte får dubbletter, lägg in 10 under num eftersom det är det maximala antalet resultat vi kan returnera åt gången, lägg in bild för söktyp eftersom det är allt vi vill returnera. Sätt in 1 för start, och slutligen under fält i "objekt/länk" eftersom vi för varje returnerat objekt bara vill ha bildlänken. Nu när du klickar på execute ser du att vi får 10 fina bildlänkar tillbaka.

Nu måste vi få dessa bilder till Unity.

Steg 4: Konfigurera Vuforia i enhet

Låt oss få Vuforia att fungera så att vi kan utnyttja deras markplandetektering. Spara din nuvarande scen och gå till bygginställningarna. Byt din plattform till Android eller IOS och om din på IOS lägger in något för paketidentifieraren, lägg till en beskrivning av kamera och mikrofon. Under XR -inställningar, kontrollera Vuforia augmented reality som stöds.

Ta bort huvudkameran i scenen och lägg till en Vuforia ARCamera. Gå till konfigurationsdelen och ändra spårningsläge till position. Avmarkera alla databaser eftersom vi inte behöver dem.

Lägg nu till en flygsökare och vi måste åsidosätta dess standardbeteende eftersom vi vill distribuera markplanet bara en gång så att vi kan hitta skriptet Distribuera scen en gång på Vuforia -webbplatsen. Ta med det manuset till Unity och lägg det på flygsökaren, ta bort det gamla manuset som fanns där. Ändra läget till interaktivt och se till att "OnInteractiveHitTest" -funktionen uppmanas till den Unity -händelsen. Medan vi är här, låt oss ställa in knappen som vi gjorde tidigare till aktiv när vi hittat markplanet, ställ in dess standardläge till inaktivt. Lägg nu in ett markplan i scenen och ändra det till luften eftersom vi vill att alla bilder ska sväva i luften. Dra det här markplanet in i det tomma facket på flygsökaren.

Steg 5: Skapa en bildprefabrik

Innan vi börjar sätta ihop alla dessa bitar måste vi skapa ett prefabricerat spelobjekt som vi kan instantiera varje gång en bild laddas. Så skapa ett tomt spelobjekt under markplanet och kalla det "picPrefab". Skapa en fyrhjuling som ett barn av det och skala den med 2, rotera dess y med 180 grader så att föräldrarnas framåtvektor som visas som en blå pil är framsidan av fyrkanten.

Skapa ett nytt skript som heter "PictureBehavior" och lägg till det i vår picPrefab.

Dra nu den här prefabricerade bilden till din tillgångsmapp och det här är vad vi ska lägga varje bild på.

Vårt "PictureBehavior" -skript ska se ut så här:

använder System. Collections;

använder System. Collections. Generic; använder UnityEngine; offentlig klass PictureBehavior: MonoBehaviour {public Renderer quadRenderer; privat Vector3 önskadPosition; void Start () {// titta på kameratransform. LookAt (Camera.main.transform); Vector3 wantedAngle = ny Vector3 (0, transform.localEulerAngles.y, 0); transform.rotation = Quaternion. Euler (wishAngle); // tvinga till luft önskadPosition = transform.localPosition; transform.localPosition += ny Vector3 (0, 20, 0); } void Update () {transform.localPosition = Vector3. Lerp (transform.localPosition, winsPosition, Time.deltaTime * 4f); } public void LoadImage (string url) {StartCoroutine (LoadImageFromURL (url)); } IEnumerator LoadImageFromURL (string url) {WWW www = new WWW (url); avkastning avkastning www; quadRenderer.material.mainTexture = www.texture; }}

Steg 6: Skapa ett skript för Google API

Nu kan vi dra in referensen till quad -renderaren från vår "picPrefab".

Vi har bara två skript kvar att göra, så låt oss skapa ett C# -skript som heter GoogleService.cs och PictureFactroy.cs.

Klistra in den här koden i "GoogleService" som gör vår begäran:

använder System. Collections;

använder System. Collections. Generic; använder UnityEngine; med UnityEngine. UI; public class GoogleService: MonoBehaviour {public PictureFactory pictureFactory; public Text buttonText; private const string API_KEY = "SÄTT API -NYCKEL HÄR !!!!!"; public void GetPictures () {StartCoroutine (PictureRoutine ()); } IEnumerator PictureRoutine () {buttonText.transform.parent.gameObject. SetActive (false); strängfråga = buttonText.text; fråga = WWW. EscapeURL (fråga + "memes"); // ta bort gamla bilder pictureFactory. DeleteOldPictures (); // spara kamera framåt så att vi kan röra oss medan objekt placeras Vector3 cameraForward = Camera.main.transform.forward; // vi kan bara få 10 resultat åt gången så vi måste gå igenom och spara våra framsteg genom att ändra startnumret efter varje 10 int radNum = 1; för (int i = 1; i <= 60; i + = 10) {string url = "https://www.googleapis.com/customsearch/v1?q=" + fråga + "& cx = 011535004225295624669%3Afeb1gwic6bs & filter = 1 & num = 10 & searchType = image & start = " + i +" & fields = items%2Flink & key = " + API_KEY; WWW www = ny WWW (url); avkastning avkastning www; pictureFactory. CreateImages (ParseResponse (www.text), rowNum, cameraForward); rowNum ++; } avkastning avkastning nya WaitForSeconds (5f); buttonText.transform.parent.gameObject. SetActive (true); } List ParseResponse (string text) {List urlList = new List (); string url = text. Split ('\ n'); foreach (strängrad i webbadresser) {if (line. Contains ("länk")) {string url = line. Substring (12, line. Length-13); // filtrering efter png eller jpg verkar inte fungera från Google så vi gör det här: if (url. Contains (".jpg") || url. Contains (".png")) {urlList. Add (url); }}} returnera urlList; }}

Steg 7: Skapa vår bildfabrik

Inside PictureFactory.cs sätter denna kod för att skapa alla våra bilder och laddar deras texturer från en URL.

använder System. Collections;

använder System. Collections. Generic; använder UnityEngine; offentlig klass PictureFactory: MonoBehaviour {public GameObject picPrefab; offentlig GoogleService googleService; public void DeleteOldPictures () {if (transform.childCount> 0) {foreach (Transform child in this.transform) {Destroy (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); } annat {pos = camForward + ny Vector3 ((picNum % 5) * 3, 0, rowNum * 3.5f); } returpos; }}

Steg 8: Vi är klara

Skapa ett tomt spelobjekt som heter GoogleService och lägg "GoogleSerivice" -skriptet på det.

Dra "PictureFactory" -skriptet till markplanet eftersom alla våra bilder kommer att skapas som barn till detta spelobjekt.

Dra in lämpliga referenser i inspektören, gör samma sak för Googles tjänst.

Det sista vi borde göra är att se till att vår "GetPictures" -funktion blir uppringd. Så låt oss gå till "onClick" -händelsen på vår knapp och ringa det därifrån.

Nu kan vi klicka på play och testa detta. Se till att aktivera markplanet och knappen. Säg ett ord och klicka på knappen för att utföra sökningen på den texten!

Nu för att få den här appen på din telefon, anslut den och gå till Arkiv-> Bygginställningar. Hit bygg och kör!

Låt mig veta i kommentarerna om du har några frågor!