Hola! Esta es la continuación de mi tutorial sobre cómo agregar videos 360 en Spark AR para crear una simulación de ambiente inmersivo. Hoy les traigo una segunda parte, pero esta vez explicando cómo utilizar estas esferas para simular portales, es decir, 360 Sphere Portal. Este una proceso interesante donde jugaremos con la perspectivas de los elementos.
Antes de continuar, vamos a descargar las imágenes que utilizaremos. Tendremos que buscar imágenes 360 o en todo caso varias imágenes en secuencia para crear un efecto de video. Estoy probando pixexid. Esta es una comunidad de fotos que proporciona imágenes gratuitas para usar en cualquier lugar. Estaré descargando 3 fotos de buena calidad. Estas tiene un peso alto no permitido por Spark AR, así que te recomiendo que las optimices en photoshop u otro editor de gráficos.
360 Spheres Portal – Spark AR
Ahora abriremos Spark AR. Iremos a crear un plane tracker como proceso inicial. Luego buscaremos en AR Library un objeto 3d primitivo relacionado a una esfera. Me gusta esta nuevo elemento: el llamado “Hires Sphere Primitive”. Lo importaremos.
En estos momentos arrastraré el nuevo archivo hacia la jerarquía de plane tracker. Ajustaré la escala para una mejor visualización. Ahora modificaré el material. Lo primero que haremos es cambiar el “shader type” a flat. Agregare mi primera imagen como textura. El primero será “view lake”. Recuerda que siempre deshabilito su compresión automática, luego seguiremos editando el material.. En render options cambiaré de alpha a “replace”. El cull mode será cambiado por “front” y por último haremos clic a “double sided”.
Ahora para crear la ilusión que la esfera portal está activándose, es decir, que se acerca hacia nosotros, utilizaremos una animación. Para ello, tomaremos el archivo 3d y utilizaré la animación predeterminada “ pulse”.
Quitaré el loop animation y agregaré “animation”. La duración aumentará a 2 segundos. Ahora no se mueve nada porque no existe una acción como tal, lo que haremos es agregar el archivo 3d como object y luego mencionamos un “object tap”. Mira cómo funciona ese cambio en el video preview. Ahora cambiaremos los indicadores de transition, sobretodo el campo “end”. Estamos aumentando este dato para que la esfera sea grande.
Ahora agregaremos un detalle: quiero que cuando le demos tap al objeto nuevamente, este se retraiga y la esfera se visualice en su forma original. Agregaré un switch y lo conectaré con el object tap. Este switch se conectará con el animation. Aparece un “pulse”, usaremos su “turn off” y lo conectaré con el “reverse” del animation.
Lo que haremos ahora es duplicar la esfera. Crearemos un nuevo material, le cambiaré su nombre. Seguiremos los mismos pasos anteriores. Las esferas estarán siempre visibles cuando interactuamos. Se puede configurar para hacer otro tipo de interacciones. Posiblemente lo realice en una segunda parte 😉
Ahora haré algunos ajustes para hacer más pequeñas las esferas y que se vean mejor dentro del filtro. Esto se realiza dentro de “transition”. En estos momentos te comentaré un tip para aumentar la calidad de la imagen. Spark AR realiza una ajuste básico de todas las imágenes, si queremos mejorar eso, primero ubicamos la imagen y le damos “replace”, luego buscamos la imagen y la agregas nuevamente. Esto hace que el archivo de imagen se suba con la calidad originalmente.
Patreon
Si desear apoyarme para mantener mi sitio web y descargar los archivo de mi tutorial de Spark AR 360 Sphere Portal, puedes hacerlo accediendo a mi patreon. Dejaré una guía de cómo sacar información relevante de métricas y KPI de tus filtros.
