Poly API: recuperando recursos 3D para tus aplicaciones de realidad virtual y realidad virtual de Android

Video: ar.js Realidad aumentada - Diferentes modelos 3d con un solo marcador - javascript

Contenido

Mostrar activos 3D con Poly
Crear un proyecto de modelado 3D
Crear una cuenta de Google Cloud Platform
Obtenga su clave Poly API
Dependencias del proyecto: Fuel, P3D y extensiones de Kotlin
Agregar su clave API
Recuperando el activo
Crear una segunda pantalla: agregar navegación
Construyendo un lienzo 3D
Dibujando en el lienzo de P3D
Probar tu proyecto
Terminando
Relacionado

¿Tiene una gran idea para una aplicación móvil de Realidad Virtual (VR) o Realidad Aumentada (AR), pero no tiene idea de cómo dar vida a su visión?

A menos que sea un desarrollador de Android que también sea un artista 3D experimentado, crear todos los activos necesarios para ofrecer una experiencia inmersiva de 360 grados puede ser un proceso desalentador.

Solo porque no tiene el tiempo, los recursos o la experiencia necesarios para crear modelos 3D, no lo hace significa que no puedes crear una gran aplicación móvil VR o AR! Hay una gran variedad de recursos 3D disponibles gratuitamente en la World Wide Web, además de todas las API, marcos y bibliotecas que necesita para descargar y renderizar estos activos en sus aplicaciones de Android.

Leer a continuación: Ahora puede visitar cualquier sitio web con Daydream VR. Incluso ese

En este artículo, analizaremos Poly, un repositorio en línea y API que pone a su alcance miles de activos 3D. Al final de este artículo, habrá creado una aplicación que recupera un activo 3D Poly en tiempo de ejecución y luego lo renderiza utilizando la popular biblioteca de procesamiento para Android.

Mostrar activos 3D con Poly

Si alguna vez ha incursionado en el desarrollo de Unity, entonces el repositorio de Poly es similar al Unity Asset Store, ¡excepto que todo en Poly es gratis!

Muchos de los modelos 3D de Poly se publican bajo la licencia Creative Commons, por lo que es libre de usar, modificar y mezclar estos activos, siempre que otorgue al creador el crédito apropiado.

Todos los modelos 3D de Poly están diseñados para ser compatibles con las plataformas VR y AR de Google, como Daydream y ARCore, pero puedes usarlos donde y como quieras, ¡potencialmente, incluso podrías usarlos con el ARKit de Apple!

Cuando se trata de recuperar y mostrar activos de Poly, tiene dos opciones. En primer lugar, puede descargar los activos a su computadora y luego importarlos a Android Studio, para que se envíen con su aplicación y contribuyan al tamaño de su APK, o puede recuperar estos activos en tiempo de ejecución utilizando Poly API.

La API Poly multiplataforma basada en REST proporciona acceso programático de solo lectura a la gran colección de modelos 3D de Poly. Esto es más complicado que agrupar activos con su APK, pero hay varios beneficios al recuperar los activos de Poly en tiempo de ejecución, sobre todo porque ayuda a mantener el tamaño de su APK bajo control, lo que puede afectar la cantidad de personas que descargan su aplicación.

También puedes usar Poly API para darles a tus usuarios más opciones, por ejemplo, si estás desarrollando un juego móvil, entonces puedes permitir que tus usuarios elijan entre una variedad de modelos de personajes.

Como puedes modificar los modelos Poly, incluso puedes permitir que tus usuarios modifiquen su personaje elegido, por ejemplo, alterando el color del cabello o de los ojos, o combinándolo con otros activos de Poly, como diferentes armas y armaduras. De esta manera, Poly API puede ayudarlo a entregar una impresionante gama de activos 3D, con un amplio margen para personalizar la experiencia, y todo para un trabajo relativamente pequeño. ¡Sus usuarios estarán convencidos de que ha pasado una tonelada de tiempo, elaborando meticulosamente todos estos modelos 3D!

Crear un proyecto de modelado 3D

Vamos a crear una aplicación que recupere un activo Poly particular cuando la aplicación se inicie por primera vez, y luego muestre ese activo en modo de pantalla completa, a solicitud del usuario.

Para ayudarnos a recuperar este activo, utilizaré Fuel, que es una biblioteca de redes HTTP para Kotlin y Android. Comience creando un nuevo proyecto con la configuración que elija, pero cuando se le solicite, opte por "Incluir soporte de Kotlin".

Todas las llamadas que realice a Poly API deben incluir una clave API, que se utiliza para identificar su aplicación y aplicar límites de uso. Durante el desarrollo y las pruebas, a menudo usará una clave API sin restricciones, pero si tiene planes de lanzar esta aplicación, debe usar una clave API restringida para Android.

Para crear una clave restringida, deberá conocer el certificado de firma SHA-1 de su proyecto, así que obtengamos esta información ahora:

Seleccione la pestaña "Gradle" de Android Studio (donde se coloca el cursor en la siguiente captura de pantalla). Esto abre un panel de "Proyectos Gradle".

En el panel "Proyectos de Gradle", haga doble clic para expandir la "raíz" de su proyecto y luego seleccione "Tareas> Android> Informe de firma". Esto abre un nuevo panel en la parte inferior de la ventana de Android Studio.
Seleccione el botón "Alternar ejecuciones de tareas / modo de texto" (donde el cursor se coloca en la siguiente captura de pantalla).

El panel "Ejecutar" ahora se actualizará para mostrar mucha información sobre su proyecto, incluida su huella digital SHA-1.

Crear una cuenta de Google Cloud Platform

Para adquirir la clave API necesaria, necesitará una cuenta de Google Cloud Platform (GPC).

Si no tiene una cuenta, puede registrarse para una prueba gratuita de 12 meses dirigiéndose a la página gratuita de Try Cloud Platform y siguiendo las instrucciones. Tenga en cuenta que se requiere una tarjeta de crédito o débito, pero de acuerdo con la página de Preguntas frecuentes, esto solo se utiliza para verificar su identidad y "no se le cobrará ni facturará durante su prueba gratuita".

Obtenga su clave Poly API

Una vez que se haya registrado, puede habilitar Poly API y crear su clave:

Dirígete a la consola GCP.
Seleccione el icono alineado en la esquina superior izquierda y elija "API y servicios> Panel de control".
Seleccione "Habilitar API y servicios".
En el menú de la izquierda, elija "Otro".
Seleccione la tarjeta "Poly API".
Haga clic en el botón "Habilitar".
Después de unos momentos, serás llevado a una nueva pantalla; abra el menú lateral y seleccione "API y servicios> Credenciales".

En la ventana emergente posterior, seleccione "Restringir clave".
Déle a su clave un nombre distintivo.
En "Restricciones de aplicación", seleccione "Aplicaciones de Android".
Seleccione "Agregar nombre de paquete y huella digital".
Copie / pegue la huella digital SHA-1 de su proyecto en el campo "Huella digital del certificado de firma".
Ingrese el nombre del paquete de su proyecto (aparece en su Manifiesto y en la parte superior de cada archivo de clase).
Clic en Guardar."

Ahora se lo dirigirá a la pantalla "Credenciales" de su proyecto, que contiene una lista de todas sus claves API, incluida la clave API habilitada para Poly que acaba de crear.

Dependencias del proyecto: Fuel, P3D y extensiones de Kotlin

Para recuperar y mostrar activos de Poly, necesitaremos ayuda de algunas bibliotecas adicionales:

Combustible. Poly actualmente no tiene un kit de herramientas oficial de Android, por lo que deberá trabajar con la API directamente utilizando su interfaz REST. Para simplificar este proceso, utilizaré la biblioteca de redes HTTP de Fuel.
Procesamiento para Android. Usaré el renderizador P3D de esta biblioteca para mostrar el activo Poly.

Abra el archivo build.gradle de su proyecto y agregue estas dos bibliotecas como dependencias del proyecto:

dependencias {implementación fileTree (incluye:, dir: libs) implementación "org.jetbrains.kotlin: kotlin-stdlib-jre7: $ kotlin_version" implementación com.android.support:appcompat-v7:27.1.1 // Agregue la biblioteca Fuel / / implementación com.github.kittinunf.fuel: fuel-android: 1.13.0 // Agregue el motor de procesamiento para Android // implementación org.p5android: processing-core: 4.0.1}

Para que nuestro código sea más conciso, también utilizaré las extensiones de Android Kotlin, así que agreguemos este complemento mientras tengamos abierto el archivo build.gradle:

aplicar el complemento: kotlin-android-extensiones

Finalmente, dado que estamos recuperando el activo de Internet, nuestra aplicación necesita el permiso de Internet. Abra su manifiesto y agregue lo siguiente:

Agregar su clave API

Cada vez que nuestra aplicación solicita un activo de Poly, debe incluir una clave API válida. Estoy usando texto de marcador de posición, pero usted debe reemplace este marcador de posición con su propia clave API si la aplicación alguna vez va a funcionar.

También estoy agregando un cheque, para que la aplicación muestre una advertencia si olvida reemplazar el texto "INSERTAR-SU-CLAVE-API-CLAVE":

import android.os.Bundle import android.support.v7.app.AppCompatActivity class MainActivity: AppCompatActivity () {companion object {const val APIKey = "INSERT-YOUR-API-KEY"} anula la diversión onCreate (savedInstanceState: Bundle?) { super.onCreate (savedInstanceState) setContentView (R.layout.activity_main) // Si la clave API comienza con "INSERT" ... // if (APIKey.startsWith ("INSERT")) {// luego muestra el siguiente mensaje ... .// Toast.makeText (esto, "No has actualizado tu clave API", Toast.LENGTH_SHORT) .show ()} else {... ... ...

Recuperando el activo

Puede elegir cualquier activo en el sitio de Google Poly, pero utilizaré este modelo del planeta Tierra.

Usted recupera un activo utilizando su ID, que aparece al final de la ficha URL (resaltada en la captura de pantalla anterior). Combinamos este ID de activo con el host Poly API, que es "https://poly.googleapis.com/v1".

A continuación, debemos realizar una solicitud GET a la URL del activo, utilizando el método httpGet (). También estoy especificando que el tipo de respuesta debe ser JSON:

El activo puede tener varios formatos, como OBJ, GLTF y FBX. Necesitamos determinar que el activo está en formato OBJ.

En este paso, también recuperaré el nombre y la URL de todos los archivos que necesitamos descargar,
incluido el archivo principal del activo ("raíz"), más cualquier material asociado y archivos de textura ("recursos").

Si nuestra aplicación no puede recuperar el activo correctamente, mostrará un brindis informando al usuario.

import android.content.Intent import android.os.Bundle import android.support.v7.app.AppCompatActivity import android.widget.Toast import com.github.kittinunf.fuel.android.extension.responseJson import com.github.kittinunf.fuel .httpDownload import com.github.kittinunf.fuel.httpObtenga import kotlinx.android.synthetic.main.activity_main. * import java.io.File class MainActivity: AppCompatActivity () {companion object {const val APIKey = "INSERT-YOUR-API -KEY "val assetURL =" https://poly.googleapis.com/v1/assets/94XG1XUy10q "} anula la diversión onCreate (savedInstanceState: Bundle?) {Super.onCreate (savedInstanceState) setContentView (R.layout.activity_main) if ( APIKey.startsWith ("INSERT")) {Toast.makeText (esto, "No has actualizado tu clave API", Toast.LENGTH_SHORT) .show ()} else {// Realiza una solicitud GET a la URL del activo // assetURL. httpGet (listOf ("clave" para APIKey)). responseJson {solicitud, respuesta, resultado -> // Haz algo con la respuesta // result.fold ({val asset = it.obj () var objectURL: String? = nulo var materialLibraryName: String? = nulo var materialLibraryURL: String? = nulo // Verifique el formato del activo, utilizando la matriz "formatos" // val assetFormats = asset.getJSONArray ("formatos") // Recorra todos los formatos // para (i en 0 hasta assetFormats.length ()) { val currentFormat = assetFormats.getJSONObject (i) // Use formatType para identificar el tipo de formato de este recurso. Si el formato es OBJ ... .// if (currentFormat.getString ("formatType") == "OBJ") {//... luego recupere el archivo 'raíz' de este recurso, es decir, el archivo OBJ // objectURL = currentFormat. getJSONObject ("root") .getString ("url") // Recuperar todas las dependencias del archivo raíz // materialLibraryName = currentFormat.getJSONArray ("resources") .getJSONObject (0) .getString ("relativePath") materialLibraryURL = currentFormat.getJSONArray ("recursos") .getJSONObject (0) .getString ("url") break}} objectURL !!. httpDownload (). destination {_, _ -> File (filesDir, "globeAsset.obj")} .response {_ , _, resultado -> result.fold ({}, {// Si no puede localizar o descargar el archivo OBJ, muestre un error // Toast.makeText (esto, "No se puede descargar el recurso", Toast.LENGTH_SHORT ) .show ()})} materialLibraryURL !!. httpDownload (). destination {_, _ -> File (filesDir, materialLibraryName)} .response {_, _, result -> result.fold ({}, {Toast. makeText (esto, "No se puede descargar el recurso", Toast.LENGTH_SHORT) .show ()})}}, { Toast.makeText (esto, "No se puede descargar el recurso", Toast.LENGTH_SHORT) .show ()})}}}

En este punto, si instala el proyecto en su teléfono inteligente o tableta Android, o en un Dispositivo Virtual Android (AVD), el activo se descargará con éxito, pero la aplicación no lo mostrará realmente. ¡Vamos a arreglar esto ahora!

Crear una segunda pantalla: agregar navegación

Vamos a mostrar el activo en modo de pantalla completa, así que vamos a actualizar nuestro archivo main_activity.xml para incluir un botón que, cuando se toca, iniciará la Actividad de pantalla completa.

Ahora agreguemos onClickListener al final del archivo MainActivity.kt:

import android.content.Intent import android.os.Bundle import android.support.v7.app.AppCompatActivity import android.widget.Toast import com.github.kittinunf.fuel.android.extension.responseJson import com.github.kittinunf.fuel .httpDownload import com.github.kittinunf.fuel.httpObtenga import kotlinx.android.synthetic.main.activity_main. * import java.io.File class MainActivity: AppCompatActivity () {companion object {const val APIKey = "INSERT-YOUR-API -KEY "val assetURL =" https://poly.googleapis.com/v1/assets/94XG1XUy10q "} anula la diversión onCreate (savedInstanceState: Bundle?) {Super.onCreate (savedInstanceState) setContentView (R.layout.activity_main) if ( APIKey.startsWith ("INSERT")) {Toast.makeText (esto, "No has actualizado tu clave API", Toast.LENGTH_SHORT) .show ()} else {assetURL.httpGet (listOf ("key" a APIKey)). responseJson {request, response, result -> result.fold ({val asset = it.obj () var objectURL: String? = null var materialLibraryName: String? = null var materialLibraryURL: Str ¿En g? = nulo val assetFormats = asset.getJSONArray ("formatos") para (i en 0 hasta assetFormats.length ()) {val currentFormat = assetFormats.getJSONObject (i) if (currentFormat.getString ("formatType") == "OBJ" ) {objectURL = currentFormat.getJSONObject ("root") .getString ("url") materialLibraryName = currentFormat.getJSONArray ("resources") .getJSONObject (0) .getString ("relativePath") materialLibraryURL = currentFormat.getJSONArray ("resources" ) .getJSONObject (0) .getString ("url") break}} objectURL !!. httpDownload (). destination {_, _ -> File (filesDir, "globeAsset.obj")} .response {_, _, result -> result.fold ({}, {Toast.makeText (esto, "No se puede descargar el recurso", Toast.LENGTH_SHORT) .show ()})} materialLibraryURL !!. httpDownload (). destination {_, _ -> Archivo (filesDir, materialLibraryName)} .response {_, _, result -> result.fold ({}, {Toast.makeText (this, "No se puede descargar el recurso", Toast.LENGTH_SHORT) .show ()})}}, {Toast.makeText (esto, "No se puede descargar el recurso", Toast.LENGTH_SHORT) .sh ow ()})} // Implemente un botón // displayButton.setOnClickListener {val intent = Intent (this, SecondActivity :: class.java) startActivity (intent); }}}

Construyendo un lienzo 3D

Ahora, creemos la Actividad donde mostraremos nuestro activo en modo de pantalla completa:

Mantenga presionada la tecla Control y haga clic en el archivo MainActivity.kt de su proyecto y seleccione "Nuevo> Archivo / Clase Kotlin".
Abra el menú desplegable "Tipo" y seleccione "Clase".
Dé a esta clase el nombre "SecondActivity" y luego haga clic en "Aceptar".

Para dibujar un objeto 3D, ¡necesitamos un lienzo 3D! Voy a usar el procesador P3D de la biblioteca de Android, lo que significa extender la clase PApplet, anular el método settings () y luego pasar P3D como argumento al método fullScreen (). También necesitamos crear una propiedad que represente el activo Poly como un objeto PShape.

diversión privada displayAsset () {val canvas3D = object: PApplet () {var polyAsset: PShape? = configuración divertida de anulación nula () {pantalla completa (PConstants.P3D)}

A continuación, debemos inicializar el objeto PShape, anulando el método setup (), llamando al método loadShape () y luego pasando la ruta absoluta del archivo .obj:

anular fun setup () {polyAsset = loadShape (File (filesDir, "globeAsset.obj"). absolutePath)}

Dibujando en el lienzo de P3D

Para dibujar en este lienzo 3D, debemos anular el método draw ():

anular fun draw () {background (0) shape (polyAsset)}}

De manera predeterminada, muchos de los activos recuperados de Poly API están en el lado más pequeño, por lo que si ejecuta este código ahora, es posible que ni siquiera vea el activo, dependiendo de la configuración de su pantalla. Al crear escenas en 3D, normalmente creará una cámara personalizada para que el usuario pueda explorar la escena y ver sus activos en 3D desde los 360 grados completos. Sin embargo, esto está más allá del alcance de este artículo, por lo que cambiaré el tamaño y la posición del activo manualmente, para asegurarme de que se ajuste cómodamente en la pantalla.

Puede aumentar el tamaño del activo pasando un valor negativo al método scale ():

escala (-10f)

Puede ajustar la posición del activo en el espacio virtual 3D utilizando el método translate () y las siguientes coordenadas:

X. Posiciona el activo a lo largo del eje horizontal.
Y. Posiciona el activo a lo largo del eje vertical.
Z. Este es el eje de "profundidad / altura", que transforma un objeto 2D en un objeto 3D. Los valores positivos crean la impresión de que el objeto se dirige hacia usted, y los valores negativos crean la impresión de que el objeto se está alejando de usted.

Tenga en cuenta que las transformaciones son acumulativas, por lo que todo lo que sucede después de que la función acumula el efecto.

Estoy usando lo siguiente:

traducir (-50f, -100f, 10f)

Aquí está el código completado:

anular fun draw () {background (0) scale (-10f) translate (-50f, -100f) // Dibuja el activo llamando al método shape () // shape (polyAsset)}}

A continuación, necesitamos crear el archivo de diseño correspondiente, donde agregaremos el lienzo 3D como un widget FrameLayout:

Mantenga presionada la tecla Control y haga clic en la carpeta "res> layout" de su proyecto.
Seleccione "Archivo de recursos de diseño".
Dé a este archivo el nombre "actividad_segundo" y luego haga clic en "Aceptar".

Ahora que tenemos nuestro FrameLayout "asset_view", ¡debemos informarle a nuestra SecondActivity! Regrese al archivo SecondActivity.kt, cree una nueva instancia de PFragment y apúntela en la dirección de nuestro widget "asset_view":

import android.os.Bundle import android.support.v7.app.AppCompatActivity import kotlinx.android.synthetic.main.activity_second. * Import Processing.android.PFragment Import Processing.core.PApplet Import Processing.core.PConstants Import Processing.core .PShape import java.io.File class SecondActivity: AppCompatActivity () {override fun onCreate (savedInstanceState: Bundle?) {Super.onCreate (savedInstanceState) setContentView (R.layout.activity_second) displayAsset ()} private fun displayAsset () {val canvas3D = object: PApplet () {var polyAsset: PShape? = configuración de anulación de diversión nula () {fullScreen (PConstants.P3D)} anulación de configuración de diversión () {polyAsset = loadShape (File (filesDir, "globeAsset.obj"). absolutePath)} anulación de dibujo divertido () {fondo (0) escala (-10f) traduce (-50f, -100f) forma (polyAsset)}} // Agrega lo siguiente // val assetView = PFragment (canvas3D) assetView.setView (asset_view, this)}}

El paso final es agregar la segunda actividad a su manifiesto:

// Agrega lo siguiente //

Probar tu proyecto

¡Ahora estamos listos para probar el proyecto terminado! Instálelo en su dispositivo Android o AVD, y asegúrese de tener una conexión a Internet activa. Tan pronto como se inicie la aplicación, descargará el activo y luego podrá verlo tocando el botón "Mostrar activo".

Puede descargar este proyecto completo desde GitHub.

Terminando

En este artículo, vimos cómo usar la API Poly para recuperar un activo 3D en tiempo de ejecución, y cómo mostrar ese activo usando la biblioteca de Procesamiento para Android. ¿Crees que Poly API tiene el potencial de hacer que el desarrollo de VR y AR sea accesible para más personas? ¡Háganos saber en los comentarios a continuación!

Relacionado

Google llevará las aplicaciones AR a "cientos de millones" de dispositivos Android en 2018
Google te enseñará sobre IA y aprendizaje automático de forma gratuita
15 mejores juegos de realidad virtual para Google Cardboard
10 mejores aplicaciones de realidad virtual para Google Cardboard
¿Qué es Google Fuchsia? ¿Es este el nuevo Android?
¿Qué es Google Duplex? - características, fecha de lanzamiento y más
Cómo crear una aplicación de realidad virtual para Android en solo 7 minutos
Auriculares VR móviles: ¿cuáles son sus mejores opciones?