Permiteți crearea unei aplicații de realitate augmentată pentru MEMES !: 8 pași

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-01-30 11:45

În acest Instructable vom face o aplicație de realitate augmentată pentru Android și IOS în Unity3D care folosește API-ul Google pentru a căuta meme. Vom folosi detectarea planului de sol al Vuforia în Unity, astfel încât această aplicație mobilă să funcționeze pentru majoritatea utilizatorilor Android și IOS. Utilizarea Vuforia ne va permite, de asemenea, să avem fotografiile ancorate într-o singură locație, astfel încât să putem trece prin acest câmp de imagini și obiectele să rămână acolo unde sunt.

Vom testa, de asemenea, noua API IBM Watson, astfel încât să putem face aceste căutări cu vocea noastră și să le folosim procesarea limbajului natural.

Deci vestea proastă este că niciunul dintre aceste API nu este total gratuit, dar vestea bună este că ambii sunt liberi să încerce. API-ul de căutare personalizată Google vă oferă 100 de căutări gratuite pe zi, iar API-ul IBM Watson vă oferă gratuit prima lună.

Pe scurt, această aplicație va primi discursul nostru de la microfonul din Unity, îl va trimite către serverele IBM Watson, care ne vor întoarce textul. Apoi vom prelua textul respectiv și îl vom trimite serverelor Google care ne vor întoarce o listă a adreselor URL ale imaginii în formă JSON.

Pasul 1: Configurați IBM Watson SDK în Unity

Pentru a lansa API-ul Watson, trebuie mai întâi să obțineți acreditările de pe site-ul lor. Accesați Console.bluemix.net, creați un cont și conectați-vă. Accesați contul dvs. IBM și navigați la Orgs pentru turnătorie în cloud și creați un spațiu nou. Acum accesați tabloul de bord și faceți clic pentru a răsfoi serviciile, adăugați serviciul de vorbire la text, deoarece asta vom folosi. Alegeți regiunea, organizația și spațiul și creați proiectul. Acum veți vedea acreditările API în partea de jos.

Descărcați Unity dacă nu îl aveți deja și importați IBM Watson SDK din magazinul de active din Unity. Putem testa acest lucru creând un obiect de joc gol și îl numim IBM Watson și adăugăm exemplul de script de streaming. Acest script este deja setat să înregistreze sunetul din unitate și să îl trimită către serverele Watson pentru procesare.

Deocamdată vom folosi doar acest exemplu de script pentru că avem mult mai multe de făcut, dar poate data viitoare vom putea să aprofundăm lucrurile Watson pentru că aș vrea să fac ceva cu API-ul Vision.

Pasul 2: testați textul în vorbire IBM Watson

Acest script caută un obiect de text UI, astfel încât să creăm un nou buton UI, acest lucru ne va oferi textul de care avem nevoie, vom folosi butonul mai târziu. Setați pânza la scară cu dimensiunea ecranului și redimensionați puțin butonul. Ancorați-l în partea stângă jos. Trageți textul respectiv în spațiul gol. Deschideți scriptul și permiteți să adăugăm acreditările noastre IBM Watson, să găsiți unde este utilizat textul „resultsField” și setați-l doar la „alt.transcript”, deoarece vom folosi acest text pentru a căuta pe Google. Acum, înainte de a putea testa acest lucru, trebuie să creăm dimensiunea textului în mod dinamic, astfel încât orice spunem să se potrivească în casetă. Reveniți la text și setați-l să se potrivească cel mai bine. Introduceți un text pentru a-l testa. Acum, când facem clic pe redare, cuvintele noastre vor fi transcrise în text din API-ul Watson Text to Speech.

Pasul 3: configurați Google Custom Search API

Următoarea piesă pe care trebuie să o facem este să configurăm API-ul de căutare personalizată Google configurat pentru a fi utilizat în Unity. La un nivel înalt, vom face o cerere HTTP de la Unity către serverele Google, care ne va răspunde în format JSON.

Așadar, accesați pagina de configurare a API-ului Google Custom Search JSON, faceți clic pentru a obține o cheie API și a crea o aplicație nouă. Păstrați acest lucru deschis. Acum putem merge la panoul de control. Introduceți orice pentru căutarea site-urilor, denumiți-l și dați clic pe creați.

Faceți clic pe panoul de control și permiteți modificări: dorim să căutăm în principal memele și să activăm căutarea de imagini. Sub site-urile de căutare, comutați pe întregul web. Faceți clic pe actualizare pentru a salva totul.

Acum găsiți Google Api Explorer și accesați API-ul de căutare personalizată. Acest lucru ne va permite să formatăm răspunsul JSON pe care îl primim de la Google. Deci, introduceți orice pentru interogare deocamdată, lipiți în ID-ul motorului dvs. de căutare, introduceți 1 pentru filtru, astfel încât să nu primim duplicate, introduceți 10 sub num, deoarece acesta este numărul maxim de rezultate pe care le putem întoarce la un moment dat, puneți imaginea pentru tipul de căutare, pentru că asta este tot ce vrem să returnăm. Introduceți 1 pentru început și, în cele din urmă, sub câmpuri introduceți „articole / link”, deoarece pentru fiecare articol returnat dorim doar linkul imagine. Acum, când faceți clic pe Executare, veți vedea că vom primi 10 legături frumoase de imagine.

Acum trebuie să introducem aceste imagini în Unity.

Pasul 4: Configurați Vuforia în Unity

Permiteți Vuforia să funcționeze, astfel încât să putem beneficia de detectarea planului de sol. Salvați scena curentă și accesați setările de construire. Comutați-vă platforma la Android sau IOS și, dacă pe IOS, puneți ceva în identificatorul pachetului, adăugați o descriere a utilizării camerei și a microfonului. În setările XR verificați realitatea augmentată Vuforia acceptată.

Acum, în scenă, ștergeți camera principală și adăugați o cameră Vuforia AR. Accesați secțiunea de configurare și schimbați modul de urmărire în pozițional. Debifați toate bazele de date pentru că nu avem nevoie de ele.

Acum adăugați un căutător de avioane și trebuie să-l înlocuiți pe comportamentul implicit, deoarece vrem să implementăm etapa planului de sol o singură dată, astfel încât să găsim scriptul Deploy Stage once pe site-ul web Vuforia. Aduceți acel script în Unity și puneți-l pe instrumentul de căutare a avionului, eliminând vechiul script care era acolo. Schimbați modul în interactiv și asigurați-vă că funcția „OnInteractiveHitTest” este apelată la acel eveniment Unity. În timp ce suntem aici, să setăm butonul pe care l-am făcut mai devreme activ după ce am găsit planul de la sol, setăm starea implicită la inactiv. Acum puneți un avion de sol în scenă și schimbați-l în aer, pentru că vrem ca toate imaginile să plutească în aer. Trageți acest plan de sol în fanta goală a căutătorului de avioane.

Pasul 5: Creați o imagine prefabricată

Înainte de a începe să punem toate aceste piese împreună, trebuie să creăm un obiect de joc prefabricat pe care să-l putem instanția de fiecare dată când este încărcată o imagine. Deci, creați un obiect de joc gol sub scena planului de la sol și numiți-l „picPrefab”. Creați un quad ca un copil al acestuia și scalați-l cu 2, rotiți-l y cu 180 de grade, astfel încât vectorul părinților înainte care este arătat ca o săgeată albastră să fie partea din față a quad-ului.

Creați un nou script numit „PictureBehavior” și adăugați-l la picPrefab.

Acum, trageți această prefabricare de imagine în folderul dvs. de active și pe asta vom pune fiecare imagine.

Scriptul nostru „PictureBehavior” ar trebui să arate astfel:

folosind System. Collections;

folosind System. Collections. Generic; folosind UnityEngine; public class PictureBehavior: MonoBehaviour {public Renderer quadRenderer; private Vector3 poziția dorită; void Start () {// priviți camera transform. LookAt (Camera.main.transform); Vector3 doritAngle = nou Vector3 (0, transform.localEulerAngles.y, 0); transformare.rotare = Quaternion. Euler (unghiul dorit); // forță în aer Pozitie dorită = transformare. Poziție locală; transform.localPosition + = new Vector3 (0, 20, 0); } void Update () {transform.localPosition = Vector3. Lerp (transform.localPosition, doritPosition, Time.deltaTime * 4f); } public void LoadImage (string url) {StartCoroutine (LoadImageFromURL (url)); } IEnumerator LoadImageFromURL (url șir) {WWW www = new WWW (url); randament randament www; quadRenderer.material.mainTexture = www.texture; }}

Pasul 6: creați un script pentru API-ul Google

Acum permiteți să trageți referința la redarea quad din „picPrefab” nostru.

Mai avem doar două scripturi de făcut, deci să creăm un script C # numit GoogleService.cs și PictureFactroy.cs.

În interiorul „GoogleService” lipiți acest cod care face solicitarea noastră:

folosind System. Collections;

folosind System. Collections. Generic; folosind UnityEngine; folosind UnityEngine. UI; clasă publică GoogleService: MonoBehaviour {public PictureFactory pictureFactory; public Text buttonText; private const string API_KEY = "PUNEȚI CHEIA API AICI !!!!!"; public void GetPictures () {StartCoroutine (PictureRoutine ()); } IEnumerator PictureRoutine () {buttonText.transform.parent.gameObject. SetActive (false); string query = buttonText.text; interogare = WWW. EscapeURL (interogare + "meme"); // ștergeți imaginile vechi pictureFactory. DeleteOldPictures (); // salvați camera înainte vector astfel încât să ne putem deplasa în timp ce obiectele sunt plasate Vector3 cameraForward = Camera.main.transform.forward; // putem obține doar 10 rezultate la un moment dat, așa că trebuie să parcurgem și să ne salvăm progresul schimbând numărul de început după fiecare 10 int rând Număr = 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 = itemi% 2Flink & key = "+ API_KEY; WWW www = new WWW (url); randament randament www; pictureFactory. CreateImages (ParseResponse (www.text), rowNum, cameraForward); rowNum ++; } returnează nou WaitForSeconds (5f); buttonText.transform.parent.gameObject. SetActive (true); } List ParseResponse (text șir) {List urlList = new List (); șir urls = text. Split ('\ n'); foreach (linie de șir în adrese URL) {if (line. Contains ("link")) {string url = line. Substring (12, line. Length-13); // filtrarea prin png sau jpg nu pare să funcționeze de la Google, așa că o facem aici: if (url. Contains (".jpg") || url. Contains (".png")) {urlList. Add (url); }}} returnează urlList; }}

Pasul 7: Creați fabrica noastră de imagini

În interiorul PictureFactory.cs a pus acest cod pentru a crea toate imaginile noastre și pentru a încărca texturile lor dintr-un URL.

folosind System. Collections;

folosind System. Collections. Generic; folosind UnityEngine; public class PictureFactory: MonoBehaviour {public GameObject picPrefab; public GoogleService googleService; public void DeleteOldPictures () {if (transform.childCount> 0) {foreach (Transform copil în this.transform) {Distruge (child.gameObject); }}} public void CreateImages (ListurlList, int resultNum, Vector3 camForward) {int picNum = 1; Vector3 center = Camera.main.transform.position; foreach (url șir în 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); } returnează pos; }}

Pasul 8: Am terminat

Creați un obiect de joc gol numit GoogleService și puneți scriptul „GoogleSerivice” pe el.

Trageți scriptul "PictureFactory" pe scena planului de masă, deoarece toate imaginile noastre vor fi create ca copii ai acestui obiect de joc.

Trageți referințele corespunzătoare în inspector, faceți același lucru pentru serviciul google.

Ultimul lucru pe care ar trebui să-l facem este să ne asigurăm că funcția noastră „GetPictures” este apelată. Deci, să mergem la evenimentul „onClick” al butonului nostru și să-l apelăm de acolo.

Acum putem face clic pe redare și putem testa acest lucru. Asigurați-vă că activați etapa planului de masă și butonul. Rostiți un cuvânt și faceți clic pe buton pentru a efectua căutarea pe textul respectiv!

Acum, pentru a obține această aplicație pe telefon, conectați-o și accesați Fișier-> Configurare setări. Hit build and run!

Spuneți-mi în comentarii dacă aveți întrebări!