Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK
Code

Cómo usar modelos 3D gratuitos de Google Poly en aplicaciones Android

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Ana Paulina Figueroa Vazquez (you can also view the original English article)

Actualmente existe una gran demanda de aplicaciones Android que ofrecen realidad virtual inmersiva o experiencias de realidad aumentada. Como desarrollador, existen muchos frameworks diferentes que puedes usar para crear tales aplicaciones.

Pero, a menos que también seas un hábil artista 3D, ¿cómo vas a crear los objetos en 3D que mostrarás en esas aplicaciones? ¿estás listo para pasar meses aprendiendo a trabajar con programas de modelado en 3D como Blender o Maya?. Si no lo estás, deberías considerar el uso de Google Poly, un repositorio en línea que contiene miles de recursos en 3D que tienen lincencias de Creative Commons.

La mayoría de los recursos que puedes encontrar en Poly hoy en día son de tipo low poly con materiales simples. Esto es debido a que la GPU móvil promedio aún no se ha vuelto lo suficientemente poderosa como para mostrar objetos en 3D con altos recuentos de polígonos en tiempo real.

En este tutorial te presentaré la API Poly. También te mostraré cómo usar Processing para Android para renderizar los recursos en 3D que descargues.

Requisitos previos

Para aprovechar este tutorial al máximo, necesitarás:

  • la versión más reciente de Android Studio
  • un dispositivo que ejecute la API nivel 21 de Android o posterior
  • y una cuenta de Google Cloud

1. Adquiriendo una clave API

Todas las solicitudes HTTP que hagas a la API Poly deben estar acompañadas por una clave API que te pertenezca. Para adquirir la clave, comienza iniciando sesión en la consola de Google Cloud y navegando al dashboard (tablero de control) de la API.

APIs dashboard on Cloud console

A continuación, presiona el botón Enable APIs and services (Habilitar APIs y servicios), expande la categoría Other (Otros) y selecciona Poly API.

Other APIs section

Ahora puedes presionar el botón Enable (Habilitar) para habilitar la API Poly.

Poly API screen

Una vez que la API esté habilitada, un conjunto de claves API son generadas para ella automáticamente. Puedes abrir la pestaña Credentials (Credenciales) para echarles un vistazo.

Credentials page

Para este tutorial necesitarás solamente la clave Android. Toma nota de ella para que puedas usarla más adelante.

2. Configuración del proyecto

Dado que Poly actualmente no tiene un conjunto de herramientas oficial para la plataforma Android, tendrás que trabajar con la API Poly directamente usando su interfaz REST. Usando la biblioteca de redes Fuel, que está optimizada para el lenguaje Kotlin, puedes ahorrar mucho tiempo y esfuerzo. Así que agrega la siguiente dependencia implementation en el archivo build.gradle del módulo app.

Para poder mostrar los recursos en 3D que descargues del repositorio Poly, también necesitarás un motor de renderizado. Processing para Android viene con uno, así que agrégalo como otra dependencia.

Por último, no olvides solicitar el permiso INTERNET en el archivo manifiesto de tu proyecto.

3. Listando recursos

Para poder descargar un recurso Poly debes conocer su ID único. Mediante el uso de un navegador, uno que sea compatible con WebGL, puedes determinar fácilmente el ID de cualquier recurso. Se encuentra justamente en la barra de direcciones.

Poly asset ID shown in the address bar

Sin embargo, si quieres permitir que tus usuarios decidan qué recursos quieren usar dinámicamente en tiempo de ejecución, puedes usar el método REST assets.list para determinar los IDs de esos recursos. El método te permite buscar recursos usando diferentes parámetros, tales como palabras clave, categorías y formatos de archivos 3D.

Para lograr un ejemplo realista, ahora vamos a intentar obtener los IDs de algunos recursos que pertenencen a la categoría animals (animales). Desde luego, tú tienes la libertad de elegir cualquier otra categoría válida, por ejemplo architecture (arquitectura), food (comida) o people (gente).

Antes de componer tu solicitud HTTP, es una buena idea declarar tu clave API y el URL base de la API Poly como constantes dentro de tu activity.

Usando el URL base, puedes generar el URL del método REST assets.list como se muestra a continuación:

En este punto puedes crear una solicitud HTTP GET válida invocando al método httpGet() y enviándole tu clave API y la categoría deseada como parámetros de consulta. De forma opcional, puedes usar el parámetro de consulta format para especificar el formato que desees para los recursos. Poly es compatible con OBJ, FBX, TILT y otros diferentes formatos 3D populares.

Dado que este método se ejecuta de forma asíncrona y su resultado es un documento JSON, debes asociarle un manejador de eventos usando el método responseJSON(). El siguiente código te muestra cómo hacerlo:

Dentro del manejador de eventos, si tu solicitud fue exitosa tendrás acceso a una lista de objetos Asset. El campo name de cada uno de esos objetos especifica su ID.

Adicionalmente, cada objeto tendrá campos tales como displayName, license y authorName, que posiblemente puedes encontrar útiles. Por ahora simplemente mostremos los campos name y displayName de todos los objetos. El siguiente código te muestra cómo hacerlo:

Si ahora ejecutas tu aplicación, deberías poder ver la siguiente salida en la ventana Logcat de Android Studio.

Logcat window showing asset names and IDs

4. Descargando recursos

Una vez que tengas el ID único de un recurso, puedes añexarlo directamente al URL base de la API Poly para crear un URL para un recurso.

Al hacer una solicitud HTTP GET a la URL del recurso usando el método httpGet() de nuevo, obtendrás un documento JSON que contendrá solamente un objeto Asset.

Como habrás notado en el código anterior, esta solicitud también debe tener un parámetro de consulta que mencione tu clave API.

Ya has aprendido cómo usar algunos de los campos presentes en el objeto Asset en el paso anterior. Ahora, todo lo que necesitas hacer es usar el arreglo formats presente en el objeto para determinar los URL y los nombres de los archivos asociados con el recurso. Cada elemento del arreglo tendrá tres campos importantes:

  • formatType, que te permite determinar el tipo del recurso
  • root, que contiene el nombre y URL del archivo principal asociado con el recurso
  • resources, que contiene detalles sobre todos los archivos secundarios asociados con el recurso, tales como materiales y texturas

Si estás trabajando con el formato OBJ, el archivo principal será un archivo .obj que contendrá datos sobre vértices y caras, y los archivos secundarios generalmente serán archivos .mtl que contendrán datos sobre los materiales usados. El siguiente código te muestra cómo determinar los URL del archivo principal y de los archivos secundarios:

En el código anterior, además del URL del archivo .mtl, también estamos determinando su nombre usando el campo relativePath. Hacer esto es importante ya que el nombre está codificado de forma estática en el elemento mtllib del archivo .obj y no debe modificarse.

Una vez que tengas las URL de ambos archivos, puedes usar el método httpDownload() de la biblioteca Fuel para descargarlos. Esta es la manera en la que puedes descargarlos al directorio de almacenamiento privado de tu aplicación, cuya ruta absoluta puede ser determinada usando la propiedad filesDir:

5. Mostrando recursos

Necesitarás crear un lienzo 3D para dibujar el recursos Poly que descargaste. Para crear uno, debes extender la clase PApplet ofrecido por la biblioteca Processing para Android. Sin embargo, de forma predeterminada un lienzo creado de esta manera será compatible solamente con figuras 2D. Para configurarlo para dibujar figuras en 3D también, sobrescribe el método settings() y envía P3D como argumento al método fullScreen(), que también hace que el lienzo sea tan grande como la pantalla del usuario.

A continuación crea una nueva propiedad dentro de la clase para representar el recurso Poly como un objeto PShape.

Para inicializar la propiedad, sobrescribe el método setup() e invoca al método loadShape(), enviándole como argumento la ruta absoluta del archivo .obj que descargaste.

Ahora puedes comenzar a dibujar en el lienzo sobrescribiendo el método draw(). Dentro del método, lo primero que debes hacer es invocar al método background() para asegurarte de siempre estar dibujando en un lienzo en blanco.

Cuando se dibujan directamente, la mayoría de los recursos Poly se ven muy pequeños e invertidos. Puedes solucionar esto usando una cámara personalizada o usando transformaciones de lienzos. Para mantener la simplicidad de este tutorial y que siga siendo intuitivo, vamos a usar transformaciones de lienzos.

Para aumentar el tamaño del recurso, usa el método scale() y envíale un valor negativo grande. El valor debe ser negativo para asegurarte de que el recurso sea volteado verticalmente. De forma opcional, puedes usar el método translate() para ajustar su posición a lo largo de los ejes X e Y. El siguiente código te muestra cómo hacerlo:

Ahora puedes continuar y dibujar el recurso invocando al método shape().

Actualmente el lienzo no es parte de la jerarquía de la vista de tu activity. Por lo tanto, si intentas ejecutar tu aplicación ahora no podrás ver el recurso. Para solucionar esto primero agrega un nuevo widget FrameLayout al archivo de diseño XML de la activity.

Después crea una nueva instancia de PFragment usando el lienzo y dirígela al widget FrameLayout.

En este punto puedes ejecutar la aplicación de nuevo para ver el recurso.

App showing Poly asset

Conclusión

Ahora sabes cómo usar la API Poly para buscar y descargar recursos en 3D. En este tutorial también aprendiste cómo renderizar y manipular esos recursos usando Processing para Android.

Vale la pena mencionar que muchos de los recursos disponibles en Poly fueron creados usando Google Blocks, una aplicación disponible para los usuarios de HTC Vive y Oculus Rift. Si cuentas con esos cascos de realidad virtual, considera crear y enviar tus propios modelos.

Para aprender más sobre la API Poly, puedes consultar la documentación oficial.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.