¡Hagamos una aplicación de realidad aumentada para MEMES !: 8 pasos

2025 Autor: John Day | [email protected]. Última modificación: 2025-01-23 14:40

En este Instructable vamos a hacer una aplicación de realidad aumentada para Android e IOS en Unity3D que usa la API de Google para buscar memes. Usaremos la detección del plano de tierra de Vuforia en Unity para que esta aplicación móvil funcione para la mayoría de los usuarios de Android e IOS. Usar Vuforia también nos permitirá tener las imágenes ancladas en un solo lugar para que podamos caminar por este campo de imágenes y los objetos se queden donde están.

También vamos a probar la nueva API de IBM Watson para que podamos hacer estas búsquedas con nuestra voz y aprovechar su procesamiento de lenguaje natural.

Entonces, la mala noticia es que ninguna de estas API es totalmente gratuita, pero la buena noticia es que ambas son gratuitas para probar. La API de búsqueda personalizada de Google le brinda 100 búsquedas gratuitas por día, y la API de IBM Watson le brinda el primer mes gratis.

En resumen, esta aplicación obtendrá nuestro discurso del micrófono en Unity, lo enviará a los servidores de IBM Watson, que nos devolverán el texto. Luego, tomaremos ese texto y lo enviaremos a los servidores de Google que nos devolverán una lista de URL de imágenes en formato JSON.

Paso 1: Configure IBM Watson SDK en Unity

Para poner en marcha la API de Watson, primero debe obtener sus credenciales de su sitio. Vaya a Console.bluemix.net, cree una cuenta e inicie sesión. Vaya a su cuenta de IBM y navegue hasta Cloud Fundry Orgs y cree un nuevo espacio. Ahora vaya a su panel de control y haga clic para buscar servicios, agregue el servicio de voz al texto porque eso es lo que vamos a usar. Elija su región, organización y espacio y cree el proyecto. Ahora verá sus credenciales de API en la parte inferior.

Descargue Unity si aún no lo tiene e importe IBM Watson SDK desde la tienda de activos en Unity. Podemos probar esto creando un objeto de juego vacío y llamarlo IBM Watson y agregar el script de transmisión de ejemplo. Este script ya está configurado para grabar audio desde unity y enviarlo a los servidores Watson para su procesamiento.

Por ahora, solo vamos a usar este script de ejemplo porque tenemos mucho más que hacer, pero tal vez la próxima vez podamos profundizar en las cosas de Watson porque me gustaría hacer algo con la API de Vision.

Paso 2: Pruebe IBM Watson Text to Speech

Esta secuencia de comandos está buscando un objeto de texto de la interfaz de usuario, así que creemos un nuevo botón de la interfaz de usuario que nos dará el texto que necesitamos, usaremos el botón más adelante. Configure el lienzo a escala con el tamaño de la pantalla y cambie un poco el tamaño del botón. Fíjelo en la parte inferior izquierda. Arrastra ese texto al espacio vacío. Abra el script y agreguemos nuestras credenciales de IBM Watson, busquemos dónde se usa el texto "resultsField" y configúrelo solo en "alt.transcript" porque vamos a usar este texto para buscar en Google. Ahora, antes de que podamos probar esto, necesitamos hacer que el tamaño del texto sea dinámico para que todo lo que digamos quepa dentro del cuadro. Vuelva al texto y configúrelo para que se ajuste mejor. Escribe algo de texto para probarlo. Ahora, cuando hagamos clic en reproducir, nuestras palabras se transcribirán a texto desde la API Watson Text to Speech.

Paso 3: configura la API de búsqueda personalizada de Google

La siguiente pieza que debemos hacer es configurar la API de búsqueda personalizada de Google para usar en Unity. En un nivel alto, realizaremos una solicitud HTTP desde Unity a los servidores de Google que nos devolverá una respuesta en formato JSON.

Así que vaya a la página de configuración de la API JSON de búsqueda personalizada de Google, haga clic para obtener una clave API y crear una nueva aplicación. Mantén esto abierto. Ahora podemos ir al panel de control. Ingrese cualquier cosa para que los sitios busquen, asígnele el nombre y haga clic en crear.

Haga clic en el panel de control y hagamos algunas modificaciones: queremos buscar principalmente memes y activar la búsqueda de imágenes. Debajo de los sitios para buscar, cambie eso a toda la web. Haga clic en actualizar para guardar todo.

Ahora busque el explorador de api de Google y vaya a la API de búsqueda personalizada. Esto nos permitirá formatear la respuesta JSON que obtenemos de Google. Por lo tanto, ingrese cualquier cosa para la consulta por ahora, pegue la ID de su motor de búsqueda, ingrese 1 para el filtro para que no obtengamos duplicados, ingrese 10 debajo de num porque esa es la cantidad máxima de resultados que podemos devolver a la vez, poner una imagen para el tipo de búsqueda porque eso es todo lo que queremos devolver. Ingrese 1 para comenzar, y finalmente, debajo de los campos, coloque "artículos / enlace" porque para cada artículo devuelto solo queremos el enlace de la imagen. Ahora, cuando haga clic en ejecutar, verá que nos devuelven 10 enlaces de imágenes agradables.

Ahora tenemos que poner estas imágenes en Unity.

Paso 4: Configura Vuforia en Unity

Dejemos que Vuforia funcione para que podamos aprovechar su detección del plano de tierra. Guarde su escena actual y vaya a la configuración de construcción. Cambie su plataforma a Android o IOS y, si está en IOS, agregue algo para el identificador del paquete, agregue una descripción de uso de la cámara y el micrófono. En la configuración de XR, verifique la realidad aumentada de Vuforia compatible.

Ahora, en la escena, elimine la cámara principal y agregue una Vuforia ARCamera. Vaya a la sección de configuración y cambie el modo de seguimiento a posicional. Desmarque todas las bases de datos porque no las necesitamos.

Ahora agregue un buscador de planos y necesitamos anular su comportamiento predeterminado porque queremos implementar la etapa del plano de tierra solo una vez, así que busquemos el script Implementar etapa una vez en el sitio web de Vuforia. Lleve ese script a Unity y colóquelo en el buscador de aviones, eliminando el antiguo script que estaba allí. Cambie el modo a interactivo y asegúrese de que se llame a la función "OnInteractiveHitTest" en ese evento de Unity. Mientras estamos aquí, establezcamos el botón que hicimos anteriormente en activo una vez que hayamos encontrado el plano de tierra, establezcamos su estado predeterminado en inactivo. Ahora coloque un plano de tierra en la escena y cámbielo a medio aire porque queremos que todas las imágenes floten en el aire. Arrastre este plano de tierra a la ranura vacía del buscador de aviones.

Paso 5: Cree una imagen prefabricada

Antes de comenzar a juntar todas estas piezas, necesitamos crear un objeto de juego prefabricado que podamos instanciar cada vez que se cargue una imagen. Así que crea un objeto de juego vacío debajo del escenario del plano de tierra y llámalo "picPrefab". Cree un cuadrante como hijo de eso y escale en 2, gire su y en 180 grados para que el vector de avance de los padres que se muestra como una flecha azul sea el frente del cuadrante.

Cree un nuevo script llamado "PictureBehavior" y agréguelo a nuestro picPrefab.

Ahora arrastre esta imagen prefabricada a su carpeta de activos y esto es en lo que vamos a poner cada imagen.

Nuestro script "PictureBehavior" debería verse así:

usando System. Collections;

usando System. Collections. Generic; usando UnityEngine; PictureBehavior de clase pública: MonoBehaviour {public Renderer quadRenderer; posición deseada Vector3 privada; void Start () {// mira la cámara transform. LookAt (Camera.main.transform); Vector3 deseado Ángulo = nuevo Vector3 (0, transform.localEulerAngles.y, 0); transform.rotation = Quaternion. Euler (ángulo deseado); // fuerza en el aire deseadaPosición = transform.localPosition; transform.localPosition + = nuevo Vector3 (0, 20, 0); } void Update () {transform.localPosition = Vector3. Lerp (transform.localPosition, deseadaPosición, Time.deltaTime * 4f); } LoadImage public void (url de cadena) {StartCoroutine (LoadImageFromURL (url)); } IEnumerator LoadImageFromURL (string url) {WWW www = new WWW (url); rendimiento retorno www; quadRenderer.material.mainTexture = www.texture; }}

Paso 6: cree un script para la API de Google

Ahora arrastremos la referencia al renderizador cuádruple de nuestro "picPrefab".

Solo nos quedan dos scripts por hacer, así que creemos un script en C # llamado GoogleService.cs y PictureFactroy.cs.

Dentro de "GoogleService" pega este código que hace nuestra solicitud:

usando System. Collections;

usando System. Collections. Generic; usando UnityEngine; usando UnityEngine. UI; GoogleService de clase pública: MonoBehaviour {PictureFactory público pictureFactory; public Text buttonText; private const string API_KEY = "¡¡¡¡¡PONGA AQUÍ LA CLAVE API !!!!!"; public void GetPictures () {StartCoroutine (PictureRoutine ()); } IEnumerator PictureRoutine () {buttonText.transform.parent.gameObject. SetActive (false); string query = buttonText.text; consulta = WWW. EscapeURL (consulta + "memes"); // eliminar imágenes antiguas pictureFactory. DeleteOldPictures (); // guardar el vector de avance de la cámara para que podamos movernos mientras se colocan los objetos Vector3 cameraForward = Camera.main.transform.forward; // solo podemos obtener 10 resultados a la vez, así que tenemos que recorrer y guardar nuestro progreso cambiando el número de inicio después de cada 10 int rowNum = 1; para (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 = nueva WWW (url); rendimiento retorno www; pictureFactory. CreateImages (ParseResponse (www.text), rowNum, cameraForward); rowNum ++; } rendimiento return new WaitForSeconds (5f); buttonText.transform.parent.gameObject. SetActive (true); } Lista ParseResponse (texto de cadena) {Lista urlList = nueva Lista (); cadena urls = text. Split ('\ n'); foreach (línea de cadena en urls) {if (línea. Contains ("enlace")) {url de cadena = línea. Substring (12, línea. Longitud-13); // el filtrado por png o jpg no parece funcionar desde Google, así que lo hacemos aquí: if (url. Contains (".jpg") || url. Contains (".png")) {urlList. Add (url); }}} return urlList; }}

Paso 7: crea nuestra fábrica de imágenes

Inside PictureFactory.cs pone este código para crear todas nuestras imágenes y carga sus texturas desde una URL.

usando System. Collections;

usando System. Collections. Generic; usando UnityEngine; PictureFactory de clase pública: MonoBehaviour {public GameObject picPrefab; public GoogleService googleService; public void DeleteOldPictures () {if (transform.childCount> 0) {foreach (Transforma al niño en this.transform) {Destroy (child.gameObject); }}} public void CreateImages (ListurlList, int resultNum, Vector3 camForward) {int picNum = 1; Vector3 center = Camera.main.transform.position; foreach (cadena de URL en urlList) {Vector3 pos = GetPosition (picNum, resultNum, camForward); GameObject pic = Instanciar (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; }}

Paso 8: ¡Hemos terminado

Cree un objeto de juego vacío llamado GoogleService y coloque el script "GoogleSerivice" en él.

Arrastre el guión "PictureFactory" al escenario del plano de tierra porque todas nuestras imágenes se crearán como elementos secundarios de este objeto de juego.

Arrastre las referencias apropiadas en el inspector, haga lo mismo para el servicio de Google.

Lo último que debemos hacer es asegurarnos de que se llame a nuestra función "GetPictures". Así que vayamos al evento "onClick" de nuestro botón y llamémoslo desde allí.

Ahora podemos hacer clic en reproducir y probar esto. Asegúrese de habilitar la etapa de plano de tierra y el botón. ¡Diga una palabra y haga clic en el botón para realizar la búsqueda en ese texto!

Ahora, para obtener esta aplicación en su teléfono, conéctela y vaya a Archivo-> Configuración de compilación. ¡Haz clic en construir y correr!

¡Avísame en los comentarios si tienes alguna pregunta!