Permet fer una aplicació de realitat augmentada per a MEMES !: 8 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:15

En aquest instructiu, farem una aplicació de realitat augmentada per a Android i IOS a Unity3D que utilitzi l'API de Google per buscar memes. Utilitzarem la detecció del pla de terra de Vuforia a Unity, de manera que aquesta aplicació mòbil funcionarà per a la majoria d’usuaris d’Android i IOS. L’ús de Vuforia també ens permetrà tenir les imatges ancorades en un lloc perquè puguem recórrer aquest camp d’imatges i els objectes es quedin allà on estan.

També provarem la nova API d'IBM Watson perquè puguem fer aquestes cerques amb la nostra veu i aprofitar el seu processament del llenguatge natural.

Per tant, la mala notícia no és que cap d’aquestes API sigui totalment gratuïta, però la bona notícia és que tots dos poden provar-los lliurement. L’API de cerca personalitzada de Google us ofereix 100 cerques gratuïtes al dia i l’API d’IBM Watson us ofereix el primer mes gratuït.

En resum, aquesta aplicació obtindrà el nostre discurs des del micròfon d’Unity, l’enviarà als servidors d’IBM Watson, que ens retornaran el text. Després agafarem aquest text i l’enviarem als servidors de Google que ens retornaran una llista d’URL d’imatges en forma JSON.

Pas 1: configureu l'IBM Watson SDK a Unity

Per fer funcionar l'API de Watson, primer heu d'obtenir les vostres credencials des del seu lloc. Aneu a Console.bluemix.net, creeu un compte i inicieu sessió. Aneu al vostre compte d'IBM i aneu a Orgs de fundició de núvols i creeu un espai nou. Ara aneu al vostre tauler i feu clic per navegar pels serveis, afegiu la veu al servei de text, perquè això és el que farem servir. Trieu la vostra regió, organització i espai i creeu el projecte. Ara veureu les vostres credencials d'API a la part inferior.

Descarregueu Unity si encara no el teniu i importeu l'IBM Watson SDK des del magatzem d'actius d'Unity. Podem provar-ho creant un objecte de joc buit i anomenant-lo IBM Watson i afegint l'exemple de script de transmissió. Aquest script ja està configurat per gravar àudio des de la unitat i enviar-lo als servidors de Watson perquè el processi.

De moment, només farem servir aquest exemple d’escriptura perquè tenim molt més a fer, però potser la propera vegada puguem aprofundir en les coses de Watson perquè m’agradaria fer alguna cosa amb l’API Vision.

Pas 2: proveu el text a veu d'IBM Watson

Aquest script busca un objecte de text de la interfície d’usuari, de manera que permet crear un nou botó d’interfície d’usuari, el que ens donarà el text que necessitem; farem servir el botó més endavant. Estableix el llenç a escala amb la mida de la pantalla i canvia la mida del botó una mica. Ancoreu-lo a la part inferior esquerra. Arrossegueu aquest text a la ranura buida. Obriu l'script i deixeu afegir les nostres credencials d'IBM Watson, cerqueu on s'utilitza el text "resultsField" i configureu-lo només com a "alt.transcript" perquè utilitzarem aquest text per buscar a Google. Ara, abans de poder provar-ho, hem de fer que la mida del text sigui dinàmica, de manera que tot el que diguem s'adapti a la caixa. Torneu al text i configureu-lo perquè s'ajusti millor. Escriviu algun text per provar-lo. Ara, quan fem clic a reproduir, les nostres paraules es transcriuran al text de l'API de text a veu de Watson.

Pas 3: configureu l'API de cerca personalitzada de Google

La següent peça que hem de fer és configurar l’API de cerca personalitzada de Google per utilitzar-la a Unity. A un nivell alt, farem una sol·licitud HTTP des d’Unity als servidors de Google, que ens retornarà una resposta en format JSON.

Per tant, aneu a la pàgina de configuració de l’API JSON de Google Custom Search, feu clic per obtenir una clau d’API i creeu una aplicació nova. Mantingueu-ho obert. Ara podem anar al tauler de control. Introduïu qualsevol cosa perquè els llocs cerquin, nomeneu-lo i feu clic a crear.

Feu clic al tauler de control i permet fer algunes modificacions: volem cercar principalment mems i activar la cerca d'imatges. A sota de llocs per cercar, canvieu-ho a tot el web. Feu clic a Actualitza per desar-ho tot.

Ara cerqueu l'explorador d'api de google i aneu a l'API de cerca personalitzada. Això ens permetrà formatar la resposta JSON que rebem de Google. Per tant, introduïu qualsevol cosa per a la consulta, enganxeu-lo a l'identificador del motor de cerca, poseu-ne 1 al filtre perquè no obtinguem duplicats, introduïu-ne el número 10 perquè és el nombre màxim de resultats que podem retornar alhora. introduïu la imatge per al tipus de cerca perquè és tot el que volem tornar. Poseu-ne 1 per començar i, finalment, a sota dels camps poseu "elements / enllaç" perquè per a cada element retornat només volem l'enllaç de la imatge. Ara, quan feu clic a Executa, veureu que obtindrem 10 bonics enllaços d'imatge.

Ara hem d'obtenir aquestes imatges a Unity.

Pas 4: configureu Vuforia a Unity

Permetem que Vuforia funcioni perquè puguem aprofitar la seva detecció de pla de terra. Deseu la vostra escena actual i aneu a la configuració de compilació. Canvieu la vostra plataforma a Android o IOS i si el vostre IOS posa alguna cosa a l’identificador del paquet, afegiu una descripció d’ús de la càmera i del micròfon. A la configuració de XR, comproveu la compatibilitat amb la realitat augmentada de Vuforia.

Ara, a l’escena, suprimiu la càmera principal i afegiu una Vuforia ARCamera. Aneu a la secció de configuració i canvieu el mode de seguiment a posicional. Desmarqueu totes les bases de dades perquè no les necessitem.

Ara afegiu un cercador d’avions i hem d’anul·lar el seu comportament predeterminat perquè volem desplegar l’etapa de pla de terra només una vegada, de manera que puguem trobar l’escriptura Deploy Stage once al lloc web de Vuforia. Porteu aquest script a Unity i poseu-lo al cercador d'avions, traient el script antic que hi havia. Canvieu el mode a interactiu i assegureu-vos que la funció "OnInteractiveHitTest" es cridi a l'esdeveniment Unity. Mentre estem aquí, definim el botó que hem creat anteriorment a actiu un cop hem trobat el pla de terra, configurem el seu estat predeterminat a inactiu. Ara poseu un pla terrestre a l’escena i canvieu-lo a mitjà aire perquè volem que totes les imatges surin a l’aire. Arrossegueu aquest pla de terra a la ranura buida del cercador d’avions.

Pas 5: creeu un prefabricat d'imatges

Abans de començar a unir totes aquestes peces, hem de crear un objecte de joc prefabricat que puguem instanciar cada vegada que es carrega una imatge. Per tant, creeu un objecte de joc buit sota l’escenari del pla terrestre i anomeneu-lo "picPrefab". Creeu un quad com a fill d’això i escaleu-lo per 2, gireu-lo en 180 graus de manera que els pares cap endavant que es mostri com una fletxa blava sigui la part frontal del quad.

Creeu un script nou anomenat "PictureBehavior" i afegiu-lo al nostre picPrefab.

Ara arrossegueu aquesta imatge prefabricada a la vostra carpeta d’actius i en això posarem cada imatge.

El nostre guió "PictureBehavior" hauria de ser així:

utilitzant System. Collections;

utilitzant System. Collections. Generic; utilitzant UnityEngine; classe pública PictureBehavior: MonoBehaviour {public Renderer quadRenderer; privada Vector3 desitjatPosició; void Start () {// mirar càmera transforma. Cerca (Camera.main.transform); Vector3 desitjatAngle = nou Vector3 (0, transform.localEulerAngles.y, 0); transform.rotation = Quaternion. Euler (Angle desitjat); // força a l'aire desitjatPosició = transformar.posició local; transform.localPosition + = new Vector3 (0, 20, 0); } void Update () {transform.localPosition = Vector3. Lerp (transform.localPosition, desitjatPosition, Time.deltaTime * 4f); } public void LoadImage (url de cadena) {StartCoroutine (LoadImageFromURL (url)); } IEnumerator LoadImageFromURL (URL de cadena) {WWW www = new WWW (url); rendibilitat de rendibilitat www; quadRenderer.material.mainTexture = www.texture; }}

Pas 6: creeu un script per a l'API de Google

Ara permet arrossegar la referència al renderitzador de quad des del nostre "picPrefab".

Només ens queden dos scripts per fer, de manera que podem crear un script C # anomenat GoogleService.cs i PictureFactroy.cs.

Dins de "GoogleService" enganxeu aquest codi que fa la nostra sol·licitud:

utilitzant System. Collections;

utilitzant System. Collections. Generic; utilitzant UnityEngine; utilitzant UnityEngine. UI; GoogleService de classe pública: MonoBehaviour {public PictureFactory pictureFactory; botó de text públicText; private const string API_KEY = "POSA LA CLAU DE L'API AQUÍ !!!!!"; public void GetPictures () {StartCoroutine (PictureRoutine ()); } IEnumerator PictureRoutine () {buttonText.transform.parent.gameObject. SetActive (false); consulta de cadena = buttonText.text; consulta = WWW. EscapeURL (consulta + "memes"); // eliminar imatges antigues pictureFactory. DeleteOldPictures (); // desa el vector cap endavant de la càmera perquè puguem moure’ns mentre es col·loquen objectes Vector3 cameraForward = Camera.main.transform.forward; // només podem obtenir 10 resultats alhora, així que hem de fer un bucle i desar el nostre progrés canviant el número d'inici després de cada 10 int filaNum = 1; for (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 +" & camps = elements% 2Flink & key = "+ API_KEY; WWW www = nova WWW (url); rendibilitat de rendibilitat www; pictureFactory. CreateImages (ParseResponse (www.text), rowNum, cameraForward); rowNum ++; } render return new WaitForSeconds (5f); buttonText.transform.parent.gameObject. SetActive (true); } Llista ParseResponse (text de la cadena) {Llista urlList = nova llista (); string urls = text. Split ('\ n'); foreach (línia de cadena en URL) {if (line. Contains ("link")) {string url = line. Substring (12, line. Length-13); // el filtratge per png o jpg sembla que no funciona de Google, de manera que ho fem aquí: if (url. Contains (".jpg") || url. Contains (".png")) {urlList. Add (url); }}} retorna urlList; }}

Pas 7: creeu la nostra fàbrica d'imatges

Dins PictureFactory.cs posa aquest codi per crear totes les nostres imatges i carregar les seves textures des d’un URL.

utilitzant System. Collections;

utilitzant System. Collections. Generic; utilitzant UnityEngine; classe pública PictureFactory: MonoBehaviour {public GameObject picPrefab; public GoogleService googleService; public void DeleteOldPictures () {if (transform.childCount> 0) {foreach (Transform child in this.transform) {Destrueix (child.gameObject); }}} public void CreateImages (ListurlList, int resultNum, Vector3 camForward) {int picNum = 1; Vector3 centre = Camera.main.transform.position; foreach (url de cadena a 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); } tornar pos; }}

Pas 8: Ja estem fets

Creeu un objecte de joc buit anomenat GoogleService i poseu-hi l'script "GoogleSerivice".

Arrossegueu l'script "PictureFactory" a l'escenari del pla terrestre perquè totes les nostres imatges es crearan com a fills d'aquest objecte de joc.

Arrossegueu les referències adequades a l'inspector i feu el mateix per al servei de Google.

L'últim que hauríem de fer és assegurar-nos que es cridi la nostra funció "GetPictures". Per tant, anem a l'esdeveniment "onClick" del nostre botó i truquem-lo des d'allà.

Ara podem fer clic a Reprodueix i provar-ho. Assegureu-vos d’habilitar l’etapa del pla de terra i el botó. Digueu una paraula i feu clic al botó per fer la cerca en aquest text.

Ara per obtenir aquesta aplicació al telèfon, connecteu-la i aneu a Fitxer-> Configuració de la compilació. Vés a construir i córrer!

Avisa’m als comentaris si tens cap pregunta.