Umožňuje vytvoriť aplikáciu s rozšírenou realitou pre MEMES !: 8 krokov

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 12:00

V tomto návode vytvoríme aplikáciu rozšírenej reality pre Android a IOS v Unity3D, ktorá používa rozhranie Google API na vyhľadávanie mémov. V Unity použijeme detekciu pozemnej roviny Vuforie, aby táto mobilná aplikácia fungovala pre väčšinu používateľov systému Android a IOS. Použitie Vuforie nám tiež umožní mať obrázky ukotvené na jednom mieste, aby sme sa mohli prechádzať týmto poľom obrázkov a objekty zostali tam, kde sú.

Tiež sa chystáme otestovať nové IBM Watson API, aby sme mohli tieto vyhľadávania vykonávať pomocou nášho hlasu a využiť tak ich spracovanie v prirodzenom jazyku.

Zlou správou teda je, že ani jedno z týchto rozhraní API nie je úplne zadarmo, ale dobrou správou je, že si ich môžete zadarmo vyskúšať. Rozhranie API vlastného vyhľadávania Google vám poskytne 100 bezplatných vyhľadávaní za deň a rozhranie IBM Watson API vám poskytne prvý mesiac zdarma.

Stručne povedané, táto aplikácia dostane náš prejav z mikrofónu v Unity a odošle ho na servery IBM Watson, ktoré nám vrátia text. Potom vezmeme tento text a odošleme ho na servery Google, ktoré nám vrátia zoznam adries URL obrázkov vo formáte JSON.

Krok 1: Nastavte súpravu IBM Watson SDK v programe Unity

Na spustenie rozhrania Watson API je potrebné najskôr získať poverenia z ich webu. Prejdite na stránku Console.bluemix.net, vytvorte si účet a prihláste sa. Prihláste sa. Prejdite na svoje konto IBM a prejdite na cloud Foundry Orgs a vytvorte nový priestor. Teraz choďte na svoj hlavný panel a kliknutím prehliadajte služby, pridajte textovú službu reč do textu, pretože to budeme používať. Vyberte si svoj región, organizáciu a priestor a vytvorte projekt. Teraz uvidíte svoje poverenia API v spodnej časti.

Ak ju ešte nemáte, stiahnite si Unity a importujte súpravu IBM Watson SDK z úložiska aktív v Unity. Môžeme to otestovať vytvorením prázdneho herného objektu a nazvať ho IBM Watson a pridať ukážkový skript. Tento skript je už nastavený na záznam zvuku z jednotky a jeho odoslanie na servery Watson na spracovanie.

Zatiaľ použijeme iba tento ukážkový skript, pretože máme oveľa viac práce, ale možno nabudúce sa budeme môcť hlbšie zaoberať vecami Watson, pretože by som chcel urobiť niečo s rozhraním Vision API.

Krok 2: Otestujte prevod textu na reč IBM Watson

Tento skript hľadá textový objekt používateľského rozhrania, takže nám umožní vytvoriť nové tlačidlo používateľského rozhrania, čím získame požadovaný text. Tlačidlo použijeme neskôr. Nastavte plátno na mierku podľa veľkosti obrazovky a trochu zmeňte veľkosť tlačidla. Ukotvite ho vľavo dole. Presuňte tento text do prázdneho slotu. Otvorte skript a nechajte ho pridať naše poverenia IBM Watson, nájdite miesto, kde sa používa text „resultsField“, a nastavte ho iba na „alt.transcript“, pretože tento text použijeme na vyhľadávanie v službe Google. Teraz, aby sme to mohli otestovať, musíme dynamicky nastaviť samotnú veľkosť textu, aby sa čokoľvek, čo povieme, zmestilo do poľa. Vráťte sa k textu a nastavte ho tak, aby čo najlepšie vyhovoval. Napíšte nejaký text, aby ste to vyskúšali. Keď teraz klikneme na prehrať, naše slová budú prepísané na text z rozhrania Watson Text to Speech API.

Krok 3: Nastavte rozhranie API vlastného vyhľadávania Google

Ďalším krokom, ktorý musíme urobiť, je nastaviť vlastné rozhranie API pre vyhľadávanie Google na používanie v Unity. Na vysokej úrovni odošleme požiadavku HTTP od Unity na servery Google, ktorá nám vráti odpoveď vo formáte JSON.

Prejdite teda na stránku nastavenia rozhrania Google Custom Search JSON API, kliknutím získate kľúč API a vytvoríte novú aplikáciu. Nechajte to otvorené. Teraz môžeme prejsť na ovládací panel. Na webových stránkach zadajte čokoľvek, čo je potrebné hľadať, pomenujte ho akýmkoľvek spôsobom a kliknite na položku vytvoriť.

Kliknite na ovládací panel a umožníme vykonať niekoľko úprav: chceme predovšetkým vyhľadávať mémy a zapnúť vyhľadávanie obrázkov. V časti Stránky na vyhľadávanie to prepnite na celý web. Kliknutím na aktualizáciu uložíte všetko.

Teraz nájdite prieskumníka Google API a prejdite na rozhranie API vlastného vyhľadávania. To nám umožní naformátovať odpoveď JSON, ktorú dostaneme od spoločnosti Google. Teraz do dotazu zadajte čokoľvek, prilepte ID svojho vyhľadávača, zadajte 1 do filtra, aby sme nedostali duplikáty, zadajte 10 pod num, pretože to je maximálny počet výsledkov, ktoré môžeme naraz vrátiť, vložte obrázok pre typ vyhľadávania, pretože to je všetko, čo chceme vrátiť. Na začiatok zadajte 1 a nakoniec do polí zadajte „položky/odkaz“, pretože pre každú vrátenú položku chceme iba odkaz na obrázok. Teraz, keď kliknete na položku Spustiť, uvidíte, že sa nám vráti 10 pekných odkazov na obrázky.

Teraz musíme tieto obrázky dostať do Unity.

Krok 4: Nastavte Vuforiu v Unity

Nechajme Vuforiu fungovať, aby sme mohli využiť ich detekciu v pozemnej rovine. Uložte svoju aktuálnu scénu a prejdite na nastavenia zostavy. Prepnite platformu na Android alebo IOS a ak v systéme iOS zadáte identifikátor balíka, zadajte popis použitia kamery a mikrofónu. V nastaveniach XR začiarknite políčko Podporovaná rozšírená realita Vuforia.

Teraz v scéne odstráňte hlavný fotoaparát a pridajte Vuforia ARCamera. Prejdite do sekcie konfigurácie a zmeňte režim sledovania na polohové. Zrušte začiarknutie všetkých databáz, pretože ich nepotrebujeme.

Teraz pridajte vyhľadávač lietadiel a musíme prepísať jeho predvolené správanie, pretože fázu pozemného lietadla chceme nasadiť iba raz, takže umožníme nájsť skript Deploy Stage once na webe Vuforia. Prineste ten skript do Unity a vložte ho do vyhľadávača lietadiel. Odstráňte starý skript, ktorý tam bol. Zmeňte režim na interaktívny a uistite sa, že pri tejto udalosti Unity bude vyvolaná funkcia „OnInteractiveHitTest“. Keď sme tu, nastavme tlačidlo, ktoré sme predtým urobili, na aktívne, keď nájdeme základnú rovinu, nastavte jeho predvolený stav na neaktívny. Teraz vložte do scény pozemnú rovinu a zmeňte ju na vzduch, pretože chceme, aby sa všetky obrázky vznášali vo vzduchu. Pretiahnite túto pozemnú rovinu do prázdneho otvoru v hľadáčiku rovín.

Krok 5: Vytvorte prefabrikovaný obrázok

Predtým, ako začneme dávať dohromady všetky tieto figúrky, musíme vytvoriť prefabrikovaný herný objekt, ktorý môžeme vytvoriť inštanciu pri každom načítaní obrázku. Vytvorte teda prázdny herný objekt pod pódiom základnej roviny a nazvite ho „picPrefab“. Vytvorte štvorkolku ako dieťa a zmenšite ju o 2, otočte jej y o 180 stupňov tak, aby predná časť štvorice predstavoval vektor vpred rodičov, ktorý je zobrazený ako modrá šípka.

Vytvorte nový skript s názvom „PictureBehavior“a pridajte ho do nášho picPrefab.

Teraz presuňte tento prefabrikát do priečinka s aktívami a na to umiestnime každý obrázok.

Náš skript „PictureBehavior“by mal vyzerať takto:

pomocou System. Collections;

pomocou System. Collections. Generic; pomocou UnityEngine; verejná trieda PictureBehavior: MonoBehaviour {public Renderer quadRenderer; súkromná Vector3 požadovaná poloha; void Start () {// pozrite sa na transformáciu kamery. LookAt (Camera.main.transform); Vector3 požadovanýAngle = nový Vector3 (0, transform.localEulerAngles.y, 0); transform.rotation = Quaternion. Euler (požadovanýAngle); // sila do vzduchu požadovanýPozícia = transform.localPosition; transform.localPosition += nový Vector3 (0, 20, 0); } void Update () {transform.localPosition = Vector3. Lerp (transform.localPosition, desiredPosition, Time.deltaTime * 4f); } public void LoadImage (URL reťazca) {StartCoroutine (LoadImageFromURL (url)); } IEnumerator LoadImageFromURL (URL reťazca) {WWW www = nová WWW (url); výnos výnos www; quadRenderer.material.mainTexture = www.texture; }}

Krok 6: Vytvorte skript pre rozhranie Google API

Teraz presuňte odkaz na vykresľovač štvorkoliek z nášho „picPrefab“.

Zostávajú nám už len dva skripty, takže vytvoríme skript C# s názvom GoogleService.cs a PictureFactroy.cs.

Do služby „GoogleService“vložte tento kód, ktorý tvorí našu požiadavku:

pomocou System. Collections;

pomocou System. Collections. Generic; pomocou UnityEngine; pomocou UnityEngine. UI; verejná trieda GoogleService: MonoBehaviour {public PictureFactory pictureFactory; public Text buttonText; private const string API_KEY = "VLOŽTE KĽÚČ API ZDE !!!!!"; public void GetPictures () {StartCoroutine (PictureRoutine ()); } IEnumerator PictureRoutine () {buttonText.transform.parent.gameObject. SetActive (false); reťazcový dotaz = buttonText.text; dotaz = WWW. EscapeURL (dotaz + "memy"); // vymazanie starých obrázkov pictureFactory. DeleteOldPictures (); // uloženie vektora dopredu kamery, aby sme sa mohli pohybovať, keď sa objekty umiestnia Vector3 cameraForward = Camera.main.transform.forward; // naraz môžeme získať iba 10 výsledkov, takže sa musíme opakovať a uložiť svoj postup tým, že zmeníme štartové číslo po každých 10 interných riadkochČíslo = 1; pre (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 = obrázok & štart = " + i +" & polia = položky%2Flink & key = " + API_KEY; WWW www = nová WWW (url); výnos výnos www; pictureFactory. CreateImages (ParseResponse (www.text), rowNum, cameraForward); rowNum ++; } výnos vrátiť nový WaitForSeconds (5f); buttonText.transform.parent.gameObject. SetActive (true); } Zoznam ParseResponse (text reťazca) {List urlList = new List (); string urls = text. Split ('\ n'); foreach (riadok reťazca v adresách URL) {if (line. Contains ("link")) {string url = line. Substring (12, line. Length-13); // zdá sa, že filtrovanie podľa formátu png alebo jpg nefunguje od spoločnosti Google, takže to robíme tu: if (url. Contains (".jpg") || url. Contains (".png")) {urlList. Add (url); }}} vrátiť urlList; }}

Krok 7: Vytvorte si našu továreň na obrázky

Vnútri PictureFactory.cs vložil tento kód na vytvorenie všetkých našich obrázkov a načítal ich textúry z adresy URL.

pomocou System. Collections;

pomocou System. Collections. Generic; pomocou UnityEngine; verejná trieda PictureFactory: MonoBehaviour {public GameObject picPrefab; verejná služba 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 (url reťazca v 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); } vrátiť poz; }}

Krok 8: Hotovo

Vytvorte prázdny objekt hry s názvom GoogleService a vložte naň skript „GoogleSerivice“.

Pretiahnite skript „PictureFactory“na úroveň pozemnej roviny, pretože všetky naše obrázky budú vytvorené ako deti tohto herného objektu.

Pretiahnite príslušné odkazy v inšpektorovi a urobte to isté pre službu Google.

Posledná vec, ktorú by sme mali urobiť, je zaistiť vyvolanie funkcie „GetPictures“. Prejdeme teda k udalosti „onClick“nášho tlačidla a zavoláme ju odtiaľ.

Teraz môžeme kliknúť na položku Prehrať a otestovať to. Uistite sa, že je povolený stupeň základnej roviny a tlačidlo. Povedzte slovo a kliknutím na tlačidlo spustíte vyhľadávanie v tomto texte!

Teraz, aby ste dostali túto aplikáciu do telefónu, zapojte ju a prejdite na položku Súbor-> Nastavenia zostavy. Hit build and run!

V prípade akýchkoľvek otázok mi dajte vedieť v komentároch!