Pojďme vytvořit aplikaci rozšířené reality pro MEMES!: 8 kroků

2024 Autor: John Day | [email protected]. Naposledy změněno: 2024-01-30 08:23

V tomto Instructable vytvoříme aplikaci pro rozšířenou realitu pro Android a IOS v Unity3D, která k vyhledávání memů používá Google API. V Unity použijeme detekci pozemní roviny Vuforie, aby tato mobilní aplikace fungovala pro většinu uživatelů Android a IOS. Používání Vuforie nám také umožní mít obrázky ukotvené na jednom místě, abychom mohli procházet tímto polem obrázků a objekty zůstaly tam, kde jsou.

Také se chystáme vyzkoušet nové rozhraní IBM Watson API, abychom mohli tato vyhledávání provádět pomocí hlasu a využít jejich zpracování v přirozeném jazyce.

Špatnou zprávou tedy je, že ani jedno z těchto API není zcela zdarma, ale dobrou zprávou je, že je oba můžete vyzkoušet. Rozhraní API pro vlastní vyhledávání Google vám poskytne 100 bezplatných vyhledávání denně a rozhraní IBM Watson API vám poskytne první měsíc zdarma.

Stručně řečeno, tato aplikace získá naši řeč z mikrofonu v Unity, odešle ji na servery IBM Watson, které nám vrátí text. Poté tento text vezmeme a odešleme na servery Google, které nám vrátí seznam adres URL obrázků ve formátu JSON.

Krok 1: Nastavte sadu IBM Watson SDK v Unity

Chcete -li spustit rozhraní Watson API, musíte nejprve získat přihlašovací údaje z jejich webu. Přejděte na stránku Console.bluemix.net, vytvořte účet, přihlaste se a přihlaste se. Přejděte ke svému účtu IBM a přejděte do cloudového slévárny Orgs a vytvořte nový prostor. Nyní přejděte na hlavní panel a kliknutím procházejte služby, přidejte službu hlasu do textu, protože to budeme používat. Vyberte si region, organizaci a prostor a vytvořte projekt. Nyní uvidíte své přihlašovací údaje API ve spodní části.

Stáhněte si Unity, pokud ji ještě nemáte, a importujte sadu IBM Watson SDK z úložiště aktiv v Unity. Můžeme to otestovat vytvořením prázdného herního objektu a nazvat jej IBM Watson a přidat ukázkový streamovací skript. Tento skript je již nastaven tak, aby zaznamenával zvuk z jednotky a odesílal jej na servery Watson ke zpracování.

Prozatím použijeme pouze tento ukázkový skript, protože toho máme na práci mnohem více, ale příště se možná budeme moci hlouběji věnovat věci Watson, protože bych chtěl něco udělat s Vision API.

Krok 2: Otestujte převod textu na řeč IBM Watson

Tento skript hledá textový objekt uživatelského rozhraní, takže nám umožní vytvořit nové tlačítko uživatelského rozhraní, což nám poskytne požadovaný text, tlačítko použijeme později. Nastavte plátno na měřítko podle velikosti obrazovky a trochu změňte velikost tlačítka. Ukotvěte ji vlevo dole. Přetáhněte text do prázdného slotu. Otevřete skript a nechte přidat naše pověření IBM Watson, najděte, kde se používá text „resultsField“, a nastavte jej pouze na „alt.transcript“, protože tento text použijeme k vyhledávání na Googlu. Nyní, než to můžeme vyzkoušet, musíme dynamicky upravit velikost textu, aby se do rámečku vešlo cokoli, co řekneme. Vraťte se k textu a nastavte jej tak, aby co nejlépe vyhovoval. Chcete -li to vyzkoušet, zadejte nějaký text. Když teď klikneme na tlačítko Přehrát, budou naše slova přepsána na text z rozhraní Watson Text to Speech API.

Krok 3: Nastavte rozhraní Google Custom Search API

Další část, kterou musíme udělat, je nastavit vlastní vyhledávací rozhraní API Google pro použití v Unity. Na vysoké úrovni budeme odesílat požadavek HTTP od Unity na servery Google, což nám vrátí odpověď ve formátu JSON.

Přejděte tedy na stránku nastavení Google JSON API pro vlastní vyhledávání, kliknutím získáte klíč API a vytvoříte novou aplikaci. Nechte to otevřené. Nyní můžeme přejít na ovládací panel. Dejte webům cokoli k vyhledávání, pojmenujte je a klikněte na vytvořit.

Klikněte na ovládací panel a umožňuje provést určité úpravy: chceme hlavně prohledávat memy a zapnout vyhledávání obrázků. V části weby k vyhledávání přepněte na celý web. Kliknutím na aktualizovat vše uložíte.

Nyní najděte google api explorer a přejděte na vlastní vyhledávací API. To nám umožní formátovat odpověď JSON, kterou dostáváme od Googlu. Pro dotaz tedy prozatím zadejte cokoli, vložte ID svého vyhledávače, vložte 1 do filtru, abychom nedostávali duplikáty, vložte 10 pod num, protože to je maximální počet výsledků, které můžeme najednou vrátit, vložte obrázek pro typ vyhledávání, protože to je vše, co chceme vrátit. Pro začátek vložte 1 a nakonec pod pole vložte „položky/odkaz“, protože pro každou vrácenou položku chceme pouze odkaz na obrázek. Nyní, když kliknete na Spustit, uvidíte, že se nám vrátí 10 pěkných odkazů na obrázky.

Nyní musíme tyto obrázky dostat do Unity.

Krok 4: Nastavení Vuforie v Unity

Necháme Vuforii fungovat, abychom mohli využít jejich detekci pozemní roviny. Uložte svou aktuální scénu a přejděte do nastavení sestavení. Přepněte svou platformu na Android nebo IOS a pokud na svém iOS zadáte něco pro identifikátor svazku, přidejte popis použití kamery a mikrofonu. V nastavení XR zaškrtněte Vuforia augmented reality supported.

Nyní ve scéně odstraňte hlavní kameru a přidejte Vuforia ARCamera. Přejděte do sekce konfigurace a změňte režim sledování na poziční. Zrušte zaškrtnutí všech databází, protože je nepotřebujeme.

Nyní přidejte vyhledávač letadel a musíme přepsat jeho výchozí chování, protože chceme nasadit stupeň pozemního letadla pouze jednou, takže umožníme najít skript Deploy Stage once na webu Vuforia. Přeneste tento skript do Unity a vložte jej do vyhledávače letadel a odstraňte starý skript, který tam byl. Změňte režim na interaktivní a ujistěte se, že při této události Unity bude vyvolána funkce „OnInteractiveHitTest“. Když jsme tady, nastavíme tlačítko, které jsme dříve vytvořili, na aktivní, jakmile najdeme základní rovinu, nastavíme jeho výchozí stav na neaktivní. Nyní vložte do scény pozemní letadlo a změňte jej na střední vzduch, protože chceme, aby se všechny obrázky vznášely ve vzduchu. Přetáhněte tuto pozemní rovinu do prázdného slotu v hledáčku letadel.

Krok 5: Vytvořte prefabrikát obrázku

Než začneme dávat dohromady všechny tyto kousky, musíme vytvořit prefabrikovaný herní objekt, který můžeme vytvořit instanci pokaždé, když se načte obrázek. Vytvořte tedy prázdný herní objekt pod pódiem pozemní roviny a říkejte mu „picPrefab“. Vytvořte čtyřkolku jako dítě a změňte ji o 2, otočte její y o 180 stupňů tak, aby vektor vpřed rodičů, který je zobrazen jako modrá šipka, byl přední částí čtyřkolky.

Vytvořte nový skript s názvem „PictureBehavior“a přidejte jej do našeho picPrefab.

Nyní přetáhněte tento obrázkový prefabrikát do složky aktiv a na to se chystáme umístit každý obrázek.

Náš skript „PictureBehavior“by měl vypadat takto:

pomocí System. Collections;

pomocí System. Collections. Generic; pomocí UnityEngine; veřejná třída PictureBehavior: MonoBehaviour {public Renderer quadRenderer; private Vector3 desiredPosition; void Start () {// podívejte se na transformaci kamery. LookAt (Camera.main.transform); Vector3 desiredAngle = nový Vector3 (0, transform.localEulerAngles.y, 0); transform.rotation = Quaternion. Euler (požadovanýAngle); // síla do vzduchu desiredPosition = 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 řetězce) {StartCoroutine (LoadImageFromURL (url)); } IEnumerator LoadImageFromURL (URL řetězce) {WWW www = nová WWW (url); výnos výnos www; quadRenderer.material.mainTexture = www.texture; }}

Krok 6: Vytvořte skript pro Google API

Nyní přetáhneme odkaz na vykreslovací modul pro čtveřici z našeho „picPrefab“.

Zbývají nám už jen dva skripty, takže pojďme vytvořit C# skript s názvem GoogleService.cs a PictureFactroy.cs.

Do služby „GoogleService“vložte tento kód, který vytváří náš požadavek:

pomocí System. Collections;

pomocí System. Collections. Generic; pomocí UnityEngine; pomocí UnityEngine. UI; veřejná třída GoogleService: MonoBehaviour {public PictureFactory pictureFactory; public Text buttonText; private const string API_KEY = "VLOŽTE KLÍČ API ZDE !!!!!"; public void GetPictures () {StartCoroutine (PictureRoutine ()); } IEnumerator PictureRoutine () {buttonText.transform.parent.gameObject. SetActive (false); řetězec dotaz = buttonText.text; dotaz = WWW. EscapeURL (dotaz + "memy"); // odstranění starých obrázků pictureFactory. DeleteOldPictures (); // uložení kamery vpřed vektor, abychom se mohli pohybovat, když se objekty umísťují Vector3 cameraForward = Camera.main.transform.forward; // můžeme získat pouze 10 výsledků najednou, takže se musíme prokousat a uložit náš postup změnou počátečního čísla po každých 10 int rowNum = 1; pro (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ázek & start = " + i +" & fields = 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ácení nového WaitForSeconds (5f); buttonText.transform.parent.gameObject. SetActive (true); } Seznam ParseResponse (text řetězce) {List urlList = new List (); řetězec urls = text. Split ('\ n'); foreach (řetězec v adresách URL) {if (line. Contains ("link")) {string url = line. Substring (12, line. Length-13); // zdá se, že filtrování podle png nebo jpg nefunguje z Googlu, takže to děláme zde: if (url. Contains (".jpg") || url. Contains (".png")) {urlList. Add (url); }}} návrat urlList; }}

Krok 7: Vytvořte naši továrnu na obrázky

Uvnitř PictureFactory.cs vložte tento kód k vytvoření všech našich obrázků a načte jejich textury z adresy URL.

pomocí System. Collections;

pomocí System. Collections. Generic; pomocí UnityEngine; veřejná třída PictureFactory: MonoBehaviour {public GameObject picPrefab; veřejná 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 řetězce 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átit pos; }}

Krok 8: Jsme hotovi

Vytvořte prázdný objekt hry s názvem GoogleService a vložte do něj skript „GoogleSerivice“.

Přetáhněte skript „PictureFactory“na základní úroveň, protože všechny naše obrázky budou vytvořeny jako podřízené objekty tohoto herního objektu.

Přetáhněte příslušné odkazy v inspektoru a proveďte totéž pro službu Google.

Poslední věc, kterou bychom měli udělat, je zajistit volání funkce „GetPictures“. Pojďme tedy na událost „onClick“našeho tlačítka a zavolejte ji odtud.

Nyní můžeme kliknout na Přehrát a vyzkoušet to. Ujistěte se, že jste povolili stupeň pozemní roviny a tlačítko. Řekněte slovo a kliknutím na tlačítko proveďte vyhledávání v tomto textu!

Chcete-li tuto aplikaci získat do telefonu, připojte ji a přejděte do nabídky Soubor-> Nastavení sestavení. Hit build and run!

Pokud máte nějaké dotazy, dejte mi vědět v komentářích!