Napravimo aplikaciju proširene stvarnosti za MEMES !: 8 koraka

2024 Autor: John Day | [email protected]. Zadnja izmjena: 2024-01-30 08:08

U ovom Instructableu napravit ćemo aplikaciju za proširenu stvarnost za Android i IOS u Unity3D koja koristi Google API za traženje mema. Koristit ćemo Vuforijino otkrivanje zemaljske ravnine u Unityju tako da će ova mobilna aplikacija raditi za većinu korisnika Androida i IOS -a. Korištenje Vuforie također će nam omogućiti da slike budu usidrene na jednoj lokaciji kako bismo mogli proći kroz ovo polje slika i objekti će ostati tamo gdje jesu.

Također ćemo testirati novi IBM Watson API kako bismo mogli vršiti ova pretraživanja svojim glasom i iskoristiti njihovu obradu na prirodnom jeziku.

Dakle, loša vijest nije da niti jedan od ovih API -ja nije potpuno besplatan, ali dobra je to što su oboje besplatni za isprobavanje. Google prilagođeni API za pretraživanje nudi vam 100 besplatnih pretraživanja dnevno, a IBM Watson API prvi mjesec besplatno.

Ukratko, ova aplikacija će dobiti naš govor s mikrofona u Unityju, poslati to na IBM Watson poslužitelje, koji će nam vratiti tekst. Zatim ćemo uzeti taj tekst i poslati ga Google poslužiteljima koji će nam vratiti popis URL -ova slika u JSON obliku.

Korak 1: Postavite IBM Watson SDK u Unity

Da biste pokrenuli Watson API, morate prvo preuzeti vjerodajnice s njihove web stranice. Idite na Console.bluemix.net, kreirajte i otvorite račun, a zatim se prijavite. Idite na svoj IBM račun i idite do organizacija za livnicu u oblaku i stvorite novi prostor. Sada idite na svoju nadzornu ploču i kliknite za pregledavanje usluga, dodajte govor u tekstualnu uslugu jer ćemo to koristiti. Odaberite svoju regiju, organizaciju i prostor i kreirajte projekt. Sada ćete na dnu vidjeti svoje vjerodajnice za API.

Preuzmite Unity ako ga već nemate i uvezite IBM Watson SDK iz spremišta sredstava u Unityju. To možemo testirati stvaranjem praznog objekta igre i nazvati ga IBM Watson i dodati primjer skripte za streaming. Ova skripta je već postavljena za snimanje zvuka iz jedinice i slanje na servere Watson radi obrade.

Za sada ćemo samo koristiti ovaj primjer skripte jer imamo još puno posla, ali možda ćemo sljedeći put dublje ući u stvari o Watsonu jer bih želio učiniti nešto s Vision API -jem.

Korak 2: Testirajte IBM Watson pretvaranje teksta u govor

Ova skripta traži tekstualni objekt korisničkog sučelja pa omogućimo stvaranje novog gumba korisničkog sučelja koji će nam dati tekst koji nam je potreban, gumb ćemo koristiti kasnije. Postavite platno u veličinu ekrana i malo promijenite veličinu dugmeta. Pričvrstite ga dolje lijevo. Prevucite taj tekst u prazno mesto. Otvorite skriptu i dopustite dodavanje naših IBM Watson vjerodajnica, pronađite gdje se koristi "resultsField" tekst i postavite ga samo na "alt.transcript" jer ćemo koristiti ovaj tekst za pretraživanje Google -a. Prije nego što ovo možemo isprobati, potrebno je dinamički prilagoditi veličinu teksta tako da sve što kažemo stane u okvir. Vratite se na tekst i postavite ga tako da najbolje pristaje. Upišite neki tekst da biste ga isprobali. Sada kada pritisnemo play, naše će se riječi transkribirati u tekst iz Watson API -ja za pretvaranje teksta u govor.

Korak 3: Postavite Google prilagođeni API za pretraživanje

Sljedeći dio koji moramo učiniti je postaviti Google prilagođeni API za pretraživanje prilagođen za upotrebu u Unityju. Na visokom nivou upućivat ćemo HTTP zahtjev od Unityja do Google servera koji će nam vratiti odgovor u JSON formatu.

Idite na stranicu za postavljanje JSON API -ja Google prilagođenog pretraživanja, kliknite da biste dobili API ključ i stvorili novu aplikaciju. Neka ovo bude otvoreno. Sada možemo ići na kontrolnu ploču. Stavite bilo šta da web lokacije pretražuju, dajte mu ime i kliknite Stvori.

Pritisnite kontrolnu ploču i dopustite neke izmjene: želimo uglavnom pretraživati meme i uključiti pretraživanje slika. Ispod web lokacija za pretraživanje prebacite to na cijeli web. Pritisnite ažuriranje da biste spremili sve.

Sada pronađite google api explorer i idite na prilagođeni API za pretraživanje. To će nam omogućiti da formatiramo JSON odgovor koji dobijemo od Googlea. Zato za sada unesite bilo što za upit, zalijepite ID svoje tražilice, unesite 1 za filter da ne dobijemo duplikate, stavite 10 pod brojem jer je to najveći broj rezultata koje možemo vratiti odjednom, stavite sliku za vrstu pretraživanja jer to je sve što želimo vratiti. Stavite 1 za početak, i na kraju ispod polja unesite "items/link" jer za svaku vraćenu stavku želimo samo vezu sa slikom. Sada kada kliknete na izvršiti vidjet ćete da dobijamo 10 lijepih veza sa slikama.

Sada moramo ove slike prenijeti u Unity.

Korak 4: Postavite Vuforia u Unity

Omogućimo Vuforiji da radi kako bismo mogli iskoristiti njihovu detekciju zemaljske ravnine. Sačuvajte trenutnu scenu i idite na postavke izgradnje. Prebacite svoju platformu na Android ili IOS i ako ste na iOS -u stavili nešto za identifikator snopa, dodajte opis upotrebe kamere i mikrofona. Pod XR postavkama provjerite Vuforia podržava proširenu stvarnost.

Sada u sceni izbrišite glavnu kameru i dodajte Vuforia ARCameru. Idite na odjeljak konfiguracije i promijenite način praćenja u pozicijski. Poništite odabir svih baza podataka jer nam ne trebaju.

Sada dodajte Finder aviona i moramo nadjačati njegovo zadano ponašanje jer želimo primijeniti fazu zemaljske ravnine samo jednom, tako da možemo pronaći skriptu Deploy Stage once na web stranici Vuforia. Donesite tu skriptu u Unity i stavite je na tražilicu aviona, uklanjajući staru skriptu koja je tamo bila. Promijenite način rada u interaktivni i provjerite da li se funkcija "OnInteractiveHitTest" poziva na taj Unity događaj. Dok smo ovdje, postavimo dugme koje smo ranije učinili aktivnim nakon što pronađemo ravninu tla, postavimo njegovo zadano stanje na neaktivno. Sada postavite prizemni avion u scenu i promijenite ga u srednji zrak jer želimo da sve slike lebde u zraku. Povucite ovu ravninu uzemljenja u prazan otvor na tražilici ravnine.

Korak 5: Napravite montažnu sliku

Prije nego počnemo sastavljati sve ove dijelove, moramo stvoriti montažni objekt igre koji možemo instancirati svaki put kada se slika učita. Stoga stvorite prazan objekt igre ispod pozornice ravnine zemlje i nazovite ga "picPrefab". Kreirajte četvorku kao dijete toga i skalirajte je za 2, rotirajte njen y za 180 stepeni tako da vektor roditelja prema naprijed koji je prikazan kao plava strelica bude prednji dio četvorke.

Kreirajte novu skriptu pod nazivom "PictureBehavior" i dodajte je u naš picPrefab.

Sada prevucite ovu montažnu sliku u fasciklu sa sredstvima i na nju ćemo staviti svaku sliku.

Naša "PictureBehavior" skripta bi trebala izgledati ovako:

pomoću System. Collections;

pomoću System. Collections. Generic; koristeći UnityEngine; PictureBehavior javne klase: MonoBehaviour {public Renderer quadRenderer; privatni Vector3 željena pozicija; void Start () {// pogledaj kameru transform. LookAt (Camera.main.transform); Vector3 desireAngle = novi Vector3 (0, transform.localEulerAngles.y, 0); transform.rotation = Quaternion. Euler (željeni kut); // silom u zrak željeniPosition = transform.localPosition; transform.localPosition += novi Vector3 (0, 20, 0); } void Update () {transform.localPosition = Vector3. Lerp (transform.localPosition, desirePosition, Time.deltaTime * 4f); } public void LoadImage (url niza) {StartCoroutine (LoadImageFromURL (url)); } IEnumerator LoadImageFromURL (URL niza) {WWW www = novi WWW (url); prinos prinosa www; quadRenderer.material.mainTexture = www.texture; }}

Korak 6: Kreirajte skriptu za Google API

Dopustimo sada da povučemo referencu na quad renderer iz našeg "picPrefaba".

Ostaju nam samo dvije skripte za napraviti, pa kreirajmo C# skriptu pod nazivom GoogleService.cs i PictureFactroy.cs.

Unutar "GoogleService" zalijepite ovaj kôd koji upućuje naš zahtjev:

pomoću System. Collections;

pomoću System. Collections. Generic; koristeći UnityEngine; koristeći UnityEngine. UI; javna klasa GoogleService: MonoBehaviour {public PictureFactory pictureFactory; javni Tekst buttonText; private const string API_KEY = "POSTAVITE API KEY OVDJE !!!!!"; public void GetPictures () {StartCoroutine (PictureRoutine ()); } IEnumerator PictureRoutine () {buttonText.transform.parent.gameObject. SetActive (false); string query = buttonText.text; upit = WWW. EscapeURL (upit + "memovi"); // brisanje starih slika pictureFactory. DeleteOldPictures (); // spremamo vektor kamere prema naprijed kako bismo se mogli kretati dok se objekti postavljaju Vector3 cameraForward = Camera.main.transform.forward; // možemo dobiti samo 10 rezultata odjednom pa moramo proći kroz petlje i spremiti naš napredak mijenjajući početni broj nakon svakih 10 int rowNum = 1; za (int i = 1; i <= 60; i + = 10) {string url = "https://www.googleapis.com/customsearch/v1?q=" + upit + "& cx = 011535004225295624669%3Afeb1gwic6bs & filter = 1 & num = 10 & searchType = image & start = " + i +" & polja = stavke%2Flink & key = " + API_KEY; WWW www = novi WWW (url); prinos prinosa www; pictureFactory. CreateImages (ParseResponse (www.text), rowNum, cameraForward); rowNum ++; } yield return new WaitForSeconds (5f); buttonText.transform.parent.gameObject. SetActive (true); } List ParseResponse (tekst niza) {List urlList = new List (); string urls = text. Split ('\ n'); foreach (string string u urls) {if (line. Contains ("link")) {string url = line. Substring (12, line. Length-13); // Čini se da Google -ovo filtriranje pomoću png ili jpg ne radi pa to radimo ovdje: if (url. Contains (".jpg") || url. Contains (".png")) {urlList. Add (url); }}} return urlList; }}

Korak 7: Kreirajte našu tvornicu slika

Unutar PictureFactory.cs unesite ovaj kôd za stvaranje svih naših slika i učitavanje njihovih tekstura s URL -a.

pomoću System. Collections;

pomoću System. Collections. Generic; koristeći UnityEngine; PictureFactory javne klase: MonoBehaviour {javni GameObject picPrefab; javna 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 string u 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 + novi Vector3 (picNum * -3, 0, rowNum * 3.5f); } else {pos = camForward + new Vector3 ((picNum % 5) * 3, 0, rowNum * 3.5f); } return pos; }}

Korak 8: Gotovi smo

Napravite prazan objekt igre pod nazivom GoogleService i stavite skriptu "GoogleSerivice" na njega.

Povucite "PictureFactory" skriptu na pozornicu prizemlja jer će sve naše slike biti stvorene kao djeca ovog objekta igre.

Povucite odgovarajuće reference u inspektoru, učinite isto za google uslugu.

Posljednje što trebamo učiniti je osigurati da se pozove naša funkcija "GetPictures". Pa idemo na "onClick" događaj našeg dugmeta i pozovite ga odatle.

Sada možemo kliknuti play i testirati ovo. Uključite stupanj ravnine tla i dugme. Recite riječ i kliknite gumb za pretraživanje tog teksta!

Sada da biste dobili ovu aplikaciju na telefon, priključite je i idite na Datoteka-> Postavke izgradnje. Hit build and run!

Javite mi u komentarima ako imate pitanja!