Omogućimo aplikaciju za proširenu stvarnost za MEMES !: 8 koraka

2024 Autor: John Day | [email protected]. Zadnja promjena: 2024-01-30 09:37

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 jednom mjestu kako bismo mogli proći kroz ovo polje slika, a predmeti ć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 vijest je da oboje mogu slobodno isprobati. Google prilagođeni API za pretraživanje nudi vam 100 besplatnih pretraživanja dnevno, a IBM Watson API prvi mjesec besplatno.

Ukratko, ova će aplikacija dobiti naš govor s mikrofona u Unityju, poslati to poslužiteljima IBM Watson, koji će nam vratiti tekst. Zatim ćemo uzeti taj tekst i poslati ga Googleovim 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, stvorite i otvorite račun, a zatim se prijavite. Idite na svoj IBM račun i idite do organizacija za lijevanje oblaka 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 izradite 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 isprobati stvaranjem praznog objekta igre i nazvati ga IBM Watson te dodati primjer skripte za streaming. Ova je skripta već postavljena za snimanje zvuka iz jedinice i slanje na servere Watson radi obrade.

Zasad ć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 dopustimo 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 zaslona i malo promijenite veličinu gumba. Pričvrstite ga dolje lijevo. Povucite taj tekst u prazno mjesto. Otvorite skriptu i dopustite da dodate naše IBM Watson vjerodajnice, pronađete gdje se koristi "resultsField" tekst i postavite ga samo na "alt.transcript" jer ćemo koristiti ovaj tekst za pretraživanje Googlea. Prije nego što ovo možemo isprobati, potrebno je dinamički prilagoditi veličinu teksta kako bi sve što kažemo stalo 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 napraviti je postaviti Google prilagođeni API za pretraživanje postavljen za upotrebu u Unityju. Na visokoj razini upućivat ćemo HTTP zahtjev od Unityja do Google poslužitelja koji će nam vratiti odgovor u JSON formatu.

Stoga idite na stranicu za postavljanje JSON API -ja Google prilagođenog pretraživanja, kliknite da biste dobili API ključ i izradili novu aplikaciju. Neka ovo bude otvoreno. Sada možemo ići na upravljačku ploču. Stavite bilo što da web stranice pretražuju, dajte mu ime i kliknite Stvori.

Pritisnite upravljačku 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 oblikovanje JSON odgovora koji dobijemo od Googlea. Zato za sada unesite bilo što za upit, zalijepite ID svoje tražilice, stavite 1 za filtar da ne dobijemo duplikate, stavite 10 pod brojem jer je to najveći broj rezultata koje možemo vratiti odjednom, staviti u 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 dobivamo 10 lijepih veza sa slikama.

Sada moramo ove slike unijeti u Jedinstvo.

Korak 4: Postavite Vuforiju u jedinstvu

Omogućimo Vuforiji rad pa možemo iskoristiti njihovu detekciju zemaljske ravnine. Spremite trenutnu scenu i idite na postavke izgradnje. Prebacite svoju platformu na Android ili IOS i ako ste na IOS -u unijeli 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 položaj. 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 pa dopustimo da jednom pronađemo skriptu Deploy Stage enkrat 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 na interaktivan i provjerite da li se funkcija "OnInteractiveHitTest" poziva na taj Unity događaj. Dok smo ovdje, postavimo gumb koji smo ranije učinili aktivnim nakon što pronađemo ravninu tla, postavimo njegovo zadano stanje na neaktivno. Sada stavite prizemni zrakoplov u scenu i promijenite ga u srednji zrak jer želimo da sve slike lebde u zraku. Povucite ovu ravninu uzemljenja u prazno mjesto na tražilici ravnine.

Korak 5: Izradite montažnu sliku

Prije nego što počnemo slagati sve ove dijelove, moramo stvoriti montažni objekt igre koji možemo stvoriti svaki put kada se slika učita. Zato stvorite prazan objekt igre ispod pozornice ravnine zemlje i nazovite ga "picPrefab". Napravite četverokut kao dijete toga i skalirajte ga za 2, zakrenite njegov y za 180 stupnjeva tako da vektor roditelja prema naprijed koji je prikazan kao plava strelica bude prednji dio četvorke.

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

Sada povucite ovu montažnu sliku u mapu imovine i na to ćemo staviti svaku sliku.

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

pomoću System. Collections;

pomoću System. Collections. Generic; koristeći UnityEngine; PictureBehavior javnog razreda: MonoBehaviour {public Renderer quadRenderer; privatni Vector3 željeniPoložaj; void Start () {// pogledajte kameru transform. LookAt (Camera.main.transform); Vector3 desireAngle = novi Vector3 (0, transform.localEulerAngles.y, 0); transform.rotation = Quaternion. Euler (željeniAngle); // sila 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); povrat prinosa www; quadRenderer.material.mainTexture = www.texture; }}

Korak 6: Izradite skriptu za Google API

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

Ostaju nam samo još dvije skripte za izradu, pa stvorimo 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; pomoću UnityEngine. UI; javna klasa GoogleService: MonoBehaviour {public PictureFactory pictureFactory; javni Tekst buttonText; private const string API_KEY = "POSTAVITE API KEY OVDJE !!!!!"; javna void GetPictures () {StartCoroutine (PictureRoutine ()); } IEnumerator PictureRoutine () {buttonText.transform.parent.gameObject. SetActive (false); niz upit = buttonText.text; upit = WWW. EscapeURL (upit + "meme"); // brisanje starih slika pictureFactory. DeleteOldPictures (); // spremanje vektora 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 se moramo petljati i spremiti svoj 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 +" & fields = items%2Flink & key = " + API_KEY; WWW www = novi WWW (url); povrat 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 = novi List (); string urls = text. Split ('\ n'); foreach (redak niza u URL-ovima) {if (line. Contains ("link")) {string url = line. Substring (12, line. Length-13); // Čini se da Googleovo filtriranje po png ili jpg ne radi pa to činimo ovdje: if (url. Contains (".jpg") || url. Contains (".png")) {urlList. Add (url); }}} return urlList; }}

Korak 7: Stvorite našu tvornicu slika

Unutar PictureFactory.cs stavite ovaj kôd za stvaranje svih naših slika i učitava njihove teksture s URL -a.

pomoću System. Collections;

pomoću System. Collections. Generic; koristeći UnityEngine; PictureFactory javnog razreda: 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 (url niza 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

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

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.

Zadnje što bismo trebali učiniti je pobrinuti se da se pozove naša funkcija "GetPictures". Pa prijeđimo na događaj "onClick" našeg gumba i pozovite ga odatle.

Sada možemo kliknuti play i testirati ovo. Uključite stupanj ravnine tla i gumb. 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!