Stwórzmy aplikację Augmented Reality dla MEMÓW!: 8 kroków

2024 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2024-01-30 11:32

W tym Instructable zamierzamy stworzyć aplikację rozszerzonej rzeczywistości na Androida i IOS w Unity3D, która używa interfejsu API Google do wyszukiwania memów. Wykorzystamy wykrywanie płaszczyzny naziemnej Vuforia w Unity, aby ta aplikacja mobilna działała dla większości użytkowników Androida i IOS. Korzystanie z Vuforia pozwoli nam również na zakotwiczenie zdjęć w jednym miejscu, dzięki czemu będziemy mogli przejść przez to pole zdjęć, a obiekty pozostaną tam, gdzie się znajdują.

Zamierzamy również przetestować nowy interfejs IBM Watson API, aby móc wyszukiwać za pomocą głosu i wykorzystywać przetwarzanie języka naturalnego.

Złą wiadomością jest to, że żaden z tych interfejsów API nie jest całkowicie darmowy, ale dobrą wiadomością jest to, że oba można wypróbować za darmo. Interfejs API wyszukiwania niestandardowego Google zapewnia 100 bezpłatnych wyszukiwań dziennie, a interfejs API IBM Watson zapewnia bezpłatny pierwszy miesiąc.

Krótko mówiąc, ta aplikacja pobierze naszą mowę z mikrofonu w Unity, wyśle ją na serwery IBM Watson, które zwrócą nam tekst. Następnie weźmiemy ten tekst i wyślemy go na serwery Google, które zwrócą nam listę adresów URL obrazów w formie JSON.

Krok 1: Skonfiguruj pakiet IBM Watson SDK w Unity

Aby uruchomić interfejs API Watson, musisz najpierw uzyskać swoje dane uwierzytelniające z ich witryny. Przejdź do Console.bluemix.net, utwórz konto i zaloguj się. Przejdź do swojego konta IBM i przejdź do Cloud Foundry Orgs i stwórz nową przestrzeń. Teraz przejdź do pulpitu nawigacyjnego i kliknij, aby przeglądać usługi, dodaj usługę mowy do tekstu, ponieważ tego będziemy używać. Wybierz swój region, organizację i przestrzeń i stwórz projekt. Teraz zobaczysz swoje dane uwierzytelniające API na dole.

Pobierz Unity, jeśli jeszcze go nie masz, i zaimportuj pakiet IBM Watson SDK ze sklepu zasobów w Unity. Możemy to przetestować, tworząc pusty obiekt gry i nazywając go IBM Watson i dodając przykładowy skrypt przesyłania strumieniowego. Ten skrypt jest już skonfigurowany do nagrywania dźwięku z unity i wysyłania go do serwerów Watson w celu przetworzenia.

Na razie użyjemy tego przykładowego skryptu, ponieważ mamy dużo więcej do zrobienia, ale może następnym razem będziemy mogli zagłębić się w sprawy Watsona, ponieważ chciałbym coś zrobić z Vision API.

Krok 2: Przetestuj przetwarzanie tekstu na mowę IBM Watson

Ten skrypt szuka obiektu tekstowego UI, więc stwórzmy nowy przycisk UI, który da nam tekst, którego potrzebujemy, użyjemy go później. Ustaw płótno tak, aby skalowało się z rozmiarem ekranu i nieco zmień rozmiar przycisku. Zakotwicz go w lewym dolnym rogu. Przeciągnij ten tekst do pustego miejsca. Otwórz skrypt i dodaj nasze poświadczenia IBM Watson, znajdź miejsce użycia tekstu „resultsField” i ustaw go tylko na „alt.transscript”, ponieważ będziemy używać tego tekstu do wyszukiwania w Google. Teraz, zanim będziemy mogli to przetestować, musimy dynamicznie zmienić rozmiar tekstu, aby wszystko, co powiemy, zmieściło się w polu. Wróć do tekstu i ustaw go jak najlepiej. Wpisz jakiś tekst, aby to przetestować. Teraz, gdy klikniemy Odtwórz, nasze słowa zostaną przepisane na tekst z interfejsu API Watson Text to Speech.

Krok 3: skonfiguruj interfejs API wyszukiwarki niestandardowej Google

Następnym elementem, który musimy zrobić, jest skonfigurowanie niestandardowego interfejsu wyszukiwania Google do użycia w Unity. Na wysokim poziomie będziemy wysyłać żądanie HTTP z Unity do serwerów Google, które zwróci nam odpowiedź w formacie JSON.

Przejdź do strony konfiguracji Google Custom Search JSON API, kliknij, aby uzyskać klucz API i utwórz nową aplikację. Pozostaw to otwarte. Teraz możemy przejść do panelu sterowania. Wstaw wszystko, co ma przeszukiwać witryny, nazwij to jakakolwiek i kliknij Utwórz.

Kliknij panel sterowania i dokonajmy pewnych modyfikacji: chcemy głównie przeszukiwać memy i włączyć wyszukiwanie obrazków. W obszarze witryn do wyszukiwania przełącz je na całą sieć. Kliknij zaktualizuj, aby wszystko zapisać.

Teraz znajdź eksploratora google api i przejdź do niestandardowego interfejsu API wyszukiwania. To pozwoli nam sformatować odpowiedź JSON otrzymaną od Google. Na razie wpisz cokolwiek dla zapytania, wklej identyfikator swojej wyszukiwarki, wstaw 1 jako filtr, aby nie otrzymać duplikatów, wstaw 10 pod num, ponieważ to maksymalna liczba wyników, które możemy zwrócić na raz, wstaw obraz dla typu wyszukiwania, ponieważ to wszystko, co chcemy zwrócić. Wstaw 1 na początek, a na końcu pod polami wstaw "elementy/link", ponieważ dla każdego zwróconego elementu chcemy tylko link do zdjęcia. Teraz, gdy klikniesz wykonaj, zobaczysz, że zwróciliśmy 10 ładnych linków do obrazów.

Teraz musimy przenieść te zdjęcia do Unity.

Krok 4: Skonfiguruj Vuforia w Unity

Sprawmy, aby Vuforia działała, abyśmy mogli wykorzystać ich wykrywanie płaszczyzny podłoża. Zapisz aktualną scenę i przejdź do ustawień kompilacji. Przełącz platformę na Androida lub IOS, a jeśli korzystasz z IOS, wpisz identyfikator pakietu, dodaj opis użycia kamery i mikrofonu. W ustawieniach XR sprawdź obsługę rozszerzonej rzeczywistości Vuforia.

Teraz w scenie usuń główną kamerę i dodaj Vuforia ARCamera. Przejdź do sekcji konfiguracji i zmień tryb śledzenia na pozycyjny. Odznacz wszystkie bazy danych, ponieważ ich nie potrzebujemy.

Teraz dodaj wyszukiwarkę samolotów i musimy zastąpić jej domyślne zachowanie, ponieważ chcemy wdrożyć etap płaszczyzny podłoża tylko raz, więc znajdźmy skrypt Deploy Stage raz na stronie internetowej Vuforia. Przenieś ten skrypt do Unity i umieść go w wyszukiwarce samolotów, usuwając stary skrypt, który tam był. Zmień tryb na interaktywny i upewnij się, że funkcja „OnInteractiveHitTest” jest wywoływana dla tego zdarzenia Unity. Skoro już tu jesteśmy, ustawmy przycisk, który stworzyliśmy wcześniej, aby był aktywny po znalezieniu płaszczyzny podłoża, ustawmy jego domyślny stan na nieaktywny. Teraz umieść płaszczyznę uziemienia na scenie i zmień ją w powietrzu, ponieważ chcemy, aby wszystkie obrazy unosiły się w powietrzu. Przeciągnij tę płaszczyznę uziemienia do pustego miejsca w wyszukiwarce samolotów.

Krok 5: Utwórz gotowy obrazek

Zanim zaczniemy składać wszystkie te elementy razem, musimy stworzyć prefabrykowany obiekt gry, który możemy utworzyć za każdym razem, gdy ładowany jest obraz. Stwórz więc pusty obiekt gry pod sceną naziemną i nazwij go „picPrefab”. Utwórz czworokąt jako jego dziecko i przeskaluj go o 2, obróć jego y o 180 stopni, aby wektor rodzica do przodu, który jest pokazany jako niebieska strzałka, był przodem czworokąta.

Utwórz nowy skrypt o nazwie „PictureBehavior” i dodaj go do naszego picPrefab.

Teraz przeciągnij ten prefabrykowany obrazek do folderu zasobów i tak umieścimy każde zdjęcie.

Nasz skrypt „PictureBehavior” powinien wyglądać tak:

za pomocą System. Collections;

za pomocą System. Collections. Generic; za pomocą UnityEngine; public class PictureBehaviour: MonoBehaviour { public Renderer quadRenderer; prywatny Vector3 pożądana pozycja; void Start(){ //spójrz na kamerę transform. LookAt (Camera.main.transform); Wektor3 pożądany Kąt = nowy Wektor3 (0, transform.localEulerAngles.y, 0); transform.rotation = Quaternion. Euler (pożądany kąt); //wymuś do powietrza pożądanaPosition = transform.localPosition; transform.localPosition += new Vector3 (0, 20, 0); } void Update(){ transform.localPosition = Vector3. Lerp (transform.localPosition, requiredPosition, Time.deltaTime * 4f); } public void LoadImage(string url){ StartCoroutine (LoadImageFromURL (url)); } IEnumerator LoadImageFromURL(string url){ WWW www = new WWW(url); wydajność zwrotu www; quadRenderer.material.mainTexture = www.texture; } }

Krok 6: Utwórz skrypt dla Google API

Teraz przeciągnijmy odniesienie do renderera quad z naszego "picPrefab".

Pozostały nam tylko dwa skrypty, więc utwórzmy skrypt C# o nazwie GoogleService.cs i PictureFactroy.cs.

Wewnątrz „GoogleService” wklej ten kod, który powoduje nasze żądanie:

za pomocą System. Collections;

za pomocą System. Collections. Generic; za pomocą UnityEngine; za pomocą UnityEngine. UI; public class GoogleService: MonoBehaviour { public PictureFactory pictureFactory; przycisk tekstowy publicznyTekst; private const string API_KEY = "WSTAW KLUCZ API TUTAJ!!!!!"; public void GetPictures(){ StartCoroutine (PictureRoutine ()); } IEnumerator PictureRoutine(){ buttonText.transform.parent.gameObject. SetActive (false); zapytanie tekstowe = buttonText.text; zapytanie = WWW. EscapeURL (zapytanie + " memy"); //usuń stare obrazy pictureFactory. DeleteStarePictures(); //zapisz wektor kamery do przodu, abyśmy mogli się poruszać podczas umieszczania obiektów Vector3 cameraForward = Camera.main.transform.forward; //możemy uzyskać tylko 10 wyników na raz, więc musimy przejść przez pętlę i zapisać nasze postępy, zmieniając numer początkowy po każdych 10 int rowNum = 1; for (int i = 1; i <= 60; i += 10) { string url = "https://www.googleapis.com/customsearch/v1?q=" + zapytanie + "&cx=011535004225295624669%3Afeb1gwic6bs&filter=1&num =10&searchType=image&start=" + i + "&fields=items%2Flink&key=" + API_KEY; WWW www = nowa strona WWW (url); wydajność zwrotu www; pictureFactory. CreateImages (ParseResponse(www.text), rowNum, cameraForward); wierszNum++; } yield return new WaitForSeconds (5f); buttonText.transform.parent.gameObject. SetActive (prawda); } List ParseResponse(ciąg tekst){ Lista urlList = nowa lista (); string adresy URL = tekst. Split ('\n'); foreach (linia ciągu w adresach URL) { if (line. Contains("link")){ string url = line. Substring (12, line. Length-13); //filtrowanie według png lub jpg nie działa w Google, więc robimy to tutaj: if (url. Contains (.jpg") || url. Contains (.png")) { urlList. Add (url); } } } return lista url; } }

Krok 7: Stwórz naszą fabrykę zdjęć

Wewnątrz PictureFactory.cs umieść ten kod, aby utworzyć wszystkie nasze obrazy i ładuje ich tekstury z adresu URL.

za pomocą System. Collections;

za pomocą System. Collections. Generic; za pomocą UnityEngine; public class PictureFactory: MonoBehaviour { public GameObject picPrefab; publiczna usługa GoogleService; public void UsuńOldPictures(){ if (transform.childCount > 0) { foreach (przekształć dziecko w this.transform) { Zniszcz (child.gameObject); } } } public void CreateImages(ListurlList, int resultNum, Vector3 camForward){ int picNum = 1; Środek wektora3 = Kamera.główna.transformacja.pozycja; foreach (string url in urlList) { Vector3 poz = GetPosition (picNum, resultNum, camForward); GameObject pic = Instancja (picPrefab, pos, Quaternion.identity, this.transform); pic. GetComponent (). LoadImage (url); picNum++; } } Vector3 GetPosition(int picNum, int rowNum, Vector3 camForward){ Vector3 poz = Vector3.zero; if (picNum <= 5) { pos = camForward + nowy Vector3 (picNum * -3, 0, rowNum * 3,5f); } else { pos = camForward + new Vector3 ((picNum % 5) * 3, 0, rowNum * 3.5f); } powrót poz; } }

Krok 8: Skończyliśmy

Utwórz pusty obiekt gry o nazwie GoogleService i umieść na nim skrypt "GoogleService".

Przeciągnij skrypt „PictureFactory” na scenę płaszczyzny podłoża, ponieważ wszystkie nasze obrazy zostaną utworzone jako dzieci tego obiektu gry.

Przeciągnij odpowiednie odniesienia w inspektorze, zrób to samo dla usługi Google.

Ostatnią rzeczą, jaką powinniśmy zrobić, to upewnić się, że nasza funkcja „GetPictures” zostanie wywołana. Przejdźmy więc do zdarzenia "onClick" naszego przycisku i wywołaj je stamtąd.

Teraz możemy kliknąć play i przetestować to. Upewnij się, że włączony jest poziom płaszczyzny uziemienia i przycisk. Powiedz słowo i kliknij przycisk, aby wyszukać ten tekst!

Teraz, aby pobrać tę aplikację na telefon, podłącz ją i przejdź do Plik-> Ustawienia kompilacji. Uderz w budowanie i biegnij!

Daj znać w komentarzach, jeśli masz jakieś pytania!