Készítsünk kiterjesztett valóság alkalmazást a MEMES számára!: 8 lépés

2024 Szerző: John Day | [email protected]. Utoljára módosítva: 2024-01-30 09:43

Ebben az utasításban egy Unity3D kiterjesztett valóság alkalmazást készítünk Androidra és IOS -ra, amely a Google API -t használja a mémek keresésére. A Vuforia földi síkérzékelését fogjuk használni a Unity -ben, így ez a mobilalkalmazás a legtöbb Android és IOS felhasználó számára működik. A Vuforia használata lehetővé teszi számunkra, hogy a képeket egy helyre rögzítsük, így végigjárhatjuk ezt a képmezőt, és a tárgyak ott maradnak, ahol vannak.

Kipróbáljuk az új IBM Watson API -t is, hogy hangunkkal elvégezhessük ezeket a kereséseket, és kihasználhassuk természetes nyelvfeldolgozásukat.

Tehát a rossz hír, hogy egyik API sem teljesen ingyenes, de a jó hír az, hogy mindketten szabadon kipróbálhatják. A Google egyéni keresési API napi 100 ingyenes keresést, az IBM Watson API pedig az első hónapot ingyenes.

Röviden, ez az alkalmazás beszédünket a Unity mikrofonjából kapja, küldje el az IBM Watson szervereinek, amelyek visszaküldik nekünk a szöveget. Ezt követően átvesszük ezt a szöveget, és elküldjük a Google szervereinek, amelyek visszaküldik nekünk a kép URL -jeinek listáját JSON formában.

1. lépés: Állítsa be az IBM Watson SDK -t a Unity programban

A Watson API elindításához először meg kell szereznie hitelesítő adatait a webhelyükről. Lépjen a Console.bluemix.net oldalra, hozzon létre és hozzon létre fiókot, és jelentkezzen be. Lépjen az IBM -fiókjába, és navigáljon a felhő öntödei szervezetekhez, és hozzon létre egy új helyet. Most lépjen az irányítópultra, és kattintson a szolgáltatások böngészéséhez, adja hozzá a beszédet a szöveges szolgáltatáshoz, mert ezt fogjuk használni. Válassza ki régióját, szervezetét és területét, és hozza létre a projektet. Most az API hitelesítő adatait látja alul.

Töltse le az Unity programot, ha még nem rendelkezik vele, és importálja az IBM Watson SDK -t a Unity eszköztárából. Ezt kipróbálhatjuk, ha létrehozunk egy üres játékobjektumot, és IBM Watson -nak nevezzük, és hozzáadjuk a minta streaming szkriptjét. Ez a szkript már úgy van beállítva, hogy hangot rögzítsen az egységből, és elküldi a Watson szervereire feldolgozásra.

Egyelőre csak ezt a példa -szkriptet fogjuk használni, mert még sok tennivalónk van, de talán legközelebb mélyebben belemerülhetünk a Watson -ba, mert szeretnék valamit kezdeni a Vision API -val.

2. lépés: Tesztelje az IBM Watson Text to Speech szöveget

Ez a szkript felhasználói felület szöveges objektumot keres, így új felhasználói felület gomb létrehozása lehetővé teszi számunkra a szükséges szöveget, ezt a gombot később fogjuk használni. Állítsa be a vásznat a képernyőmérethez, és egy kicsit méretezze át a gombot. Rögzítse a bal alsó sarokba. Húzza a szöveget az üres helyre. Nyissa meg a szkriptet, és adja hozzá az IBM Watson hitelesítő adatainkat, keresse meg az "resultsField" szöveg használatát, és állítsa csak "alt.transcript" értékre, mert ezt a szöveget fogjuk használni a Google -ban való kereséshez. Mielőtt ezt kipróbálhatnánk, dinamikusan meg kell változtatnunk a szöveg méretét, hogy bármit is mondjunk, belefér a dobozba. Térjen vissza a szöveghez, és állítsa be a legjobban. Írjon be egy szöveget a teszteléshez. Most, amikor a lejátszás gombra kattintunk, szavaink átíródnak szöveggé a Watson Text to Speech API -ból.

3. lépés: Állítsa be a Google egyéni keresési API -t

A következő lépés, amit be kell állítanunk, hogy beállítsuk a Google egyéni keresési API -t a Unity használatára. Magas szinten HTTP kérést fogunk küldeni az Unitytől a Google szerverei felé, amely válaszként JSON formátumban küld vissza nekünk.

Lépjen tehát a Google Egyéni Kereső JSON API beállítási oldalára, kattintson rá az API -kulcs beszerzéséhez és új alkalmazás létrehozásához. Ezt tartsa nyitva. Most mehetünk a vezérlőpulthoz. Adjon meg bármit a webhelyek kereséséhez, nevezze el bárhogy, majd kattintson a Létrehozás gombra.

Kattintson a vezérlőpultra, és végezzen néhány módosítást: elsősorban mémeket szeretnénk keresni, és bekapcsolni a képkeresést. A keresendő webhelyek alatt kapcsolja át a teljes webre. Az összes mentéséhez kattintson a frissítés gombra.

Most keresse meg a google api explorert, és lépjen az egyéni keresési API -hoz. Ez lehetővé teszi számunkra a Google -tól kapott JSON -válasz formázását. Tehát egyelőre írjon be bármit a lekérdezéshez, illessze be a keresőmotor -azonosítót, és tegyen be 1 -et a szűrőbe, hogy ne kapjunk ismétlődéseket, tegyen 10 -et a szám alá, mert ez a maximális találat, amelyet egyszerre tudunk visszaadni, írja be a képet a keresés típusához, mert csak ennyit akarunk visszaadni. Kezdésként írjon be 1 -et, és végül a mezők alá írja be az "items/link" mezőt, mert minden visszaküldött tételhez csak a kép linkjét szeretnénk. Most, amikor a végrehajtás gombra kattint, látni fogja, hogy 10 szép képlinket kapunk vissza.

Most ezeket a képeket kell bevinni az Unity -be.

4. lépés: Állítsa be a Vuforia programot az Unity programban

Működtesse a Vuforia -t, hogy kihasználhassuk a földi sík észlelését. Mentse el az aktuális jelenetet, és menjen az építési beállításokhoz. Váltsa át platformját Androidra vagy IOS -ra, és ha az IOS rendszeren elhelyezett valamit a csomag azonosítójához, adjon hozzá egy kamera- és mikrofonhasználati leírást. Az XR beállítások alatt ellenőrizze a Vuforia kiterjesztett valóság támogatását.

Most a jelenetben törölje a fő kamerát, és adjon hozzá egy Vuforia ARCamera -t. Lépjen a konfigurációs részre, és változtassa meg a követési módot pozicionálásra. Törölje az összes adatbázis jelölését, mert nincs rájuk szükség.

Most adjunk hozzá egy síkkeresőt, és felül kell írnunk az alapértelmezett viselkedését, mert a földi síkot csak egyszer szeretnénk telepíteni, így megkeressük a Deploy Stage egyszer szkriptet a Vuforia weboldalán. Vigye a forgatókönyvet a Unity -be, és tegye a repülőgép -keresőbe, és távolítsa el a régi szkriptet. Módosítsa az üzemmódot interaktívra, és győződjön meg arról, hogy az "OnInteractiveHitTest" funkció meghívásra kerül az Unity eseményen. Amíg itt tartunk, állítsuk aktívvá azt a gombot, amelyet korábban készítettünk, miután megtaláltuk az alapsíkot, állítsuk alapértelmezett állapotát inaktívra. Most tegyen egy földi síkot a helyszínre, és állítsa át a levegő közepére, mert azt akarjuk, hogy az összes kép a levegőben lebegjen. Húzza ezt a földsíkot a síkkereső üres nyílásába.

5. lépés: Hozzon létre egy előkészítő képet

Mielőtt elkezdenénk összeszedni ezeket a darabokat, létre kell hoznunk egy előre gyártott játékobjektumot, amelyet minden kép betöltésekor példányosítani tudunk. Tehát hozzon létre egy üres játékobjektumot a földi sík alatt, és nevezze "picPrefab" -nak. Hozzon létre egy négyzetet ennek gyermekeként, és skálázza 2 -gyel, forgassa el y -ját 180 fokkal úgy, hogy a szülők előrefelé mutató vektorát, amely kék nyílként jelenik meg, a quad eleje legyen.

Hozzon létre egy új szkriptet "PictureBehavior" néven, és adja hozzá a picPrefab oldalunkhoz.

Most húzza ezt a kép -előregyártott elemet az eszközök mappájába, és ezt fogjuk feltenni minden képre.

A "PictureBehavior" szkriptünknek így kell kinéznie:

a System. Collections használatával;

a System. Collections. Generic használatával; a UnityEngine használatával; public class PictureBehavior: MonoBehaviour {public Renderer quadRenderer; privát Vector3 kívánatos pozíció; void Start () {// look at camera transform. LookAt (Camera.main.transform); Vector3 toivottAngle = new Vector3 (0, transform.localEulerAngles.y, 0); transform.rotation = Quaternion. Euler (kívántAngle); // levegőbe kényszerítés vágyottPosition = transform.localPosition; transform.localPosition += új Vector3 (0, 20, 0); } érvénytelen Frissítés () {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); hozamhozam www; quadRenderer.material.mainTexture = www.texture; }}

6. lépés: Szkript létrehozása a Google API számára

Most húzzuk be a quad rendererre való hivatkozást a "picPrefab" -ból.

Már csak két szkriptünk van hátra, ezért hozzunk létre egy C# szkriptet GoogleService.cs és PictureFactroy.cs néven.

A „GoogleService” -be illessze be ezt a kódot, amely a kérésünket teszi:

a System. Collections használatával;

a System. Collections. Generic használatával; a UnityEngine használatával; a UnityEngine. UI használatával; public class GoogleService: MonoBehaviour {public PictureFactory pictureFactory; public Text buttonText; private const string API_KEY = "ÍRJA API KULCSÁT ITT !!!!!"; public void GetPictures () {StartCoroutine (PictureRoutine ()); } IEnumerator PictureRoutine () {buttonText.transform.parent.gameObject. SetActive (hamis); karakterlánc lekérdezés = buttonText.text; query = WWW. EscapeURL (lekérdezés + "mémek"); // régi képek törlése pictureFactory. DeleteOldPictures (); // a kamera előre vektor mentése, hogy mozoghassunk, amíg az objektumok elhelyezkednek Vector3 cameraForward = Camera.main.transform.forward; // egyszerre csak 10 eredményt érhetünk el, ezért végig kell mennünk, és el kell mentenünk az előrehaladásunkat, megváltoztatva a rajtszámot minden 10 int rowNum = 1 után; (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 = items%2Flink & key = " + API_KEY; WWW www = új WWW (url); hozamhozam www; pictureFactory. CreateImages (ParseResponse (www.text), rowNum, cameraForward); rowNum ++; } hozam hozam új WaitForSeconds (5f); buttonText.transform.parent.gameObject. SetActive (igaz); } Lista ParseResponse (karakterlánc szöveg) {List urlList = new List (); string urls = text. Split ('\ n'); foreach (karakterlánc URL-ekben) {if (line. Contains ("link")) {string url = line. Substring (12, line. Length-13); // úgy tűnik, hogy a png vagy jpg szűrés nem működik a Google -tól, ezért ezt itt tesszük: if (url. Contains (".jpg") || url. Contains (".png")) {urlList. Add (url); }}} return urlList; }}

7. lépés: Hozza létre képgyárunkat

A PictureFactory.cs fájlban ezt a kódot használva létrehozhatja az összes képünket, és betölti textúráikat egy URL -ből.

a System. Collections használatával;

a System. Collections. Generic használatával; a UnityEngine használatával; public class PictureFactory: MonoBehaviour {public GameObject picPrefab; nyilvános GoogleService googleService; public void DeleteOldPictures () {if (transform.childCount> 0) {foreach (Gyermek átalakítása ebben az átalakításban) {Destroy (child.gameObject); }}} public void CreateImages (ListurlList, int resultNum, Vector3 camForward) {int picNum = 1; Vector3 center = Camera.main.transform.position; foreach (string url in urlList) {Vector3 pos = GetPosition (picNum, resultNum, camForward); GameObject pic = Azonnali (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); } return pos; }}

8. lépés: Készen vagyunk

Hozzon létre üres játékobjektumot GoogleService néven, és tegye rá a "GoogleSerivice" szkriptet.

Húzza a "PictureFactory" szkriptet a földi síkra, mert minden képünk ennek a játék objektumnak a gyermekeiként jön létre.

Húzza be a megfelelő hivatkozásokat az ellenőrbe, tegye ugyanezt a google szolgáltatáshoz.

Az utolsó dolog, amit meg kell tennünk, hogy megbizonyosodjunk arról, hogy a "GetPictures" funkciót meghívjuk. Tehát menjünk a gombunk "onClick" eseményére, és onnan hívjuk fel.

Most rákattinthatunk a lejátszásra, és kipróbálhatjuk ezt. Ügyeljen arra, hogy engedélyezze a földi síkot és a gombot. Mondjon egy szót, és kattintson a gombra a kereséshez a szövegben!

Ha most szeretné letölteni ezt az alkalmazást a telefonjára, csatlakoztassa azt, és lépjen a Fájl-> Építési beállítások oldalra. Üss építeni és fuss!

Ha bármilyen kérdése van, jelezze a megjegyzésekben!