Hoy traigo un tutorial básico sobre cómo implementar Spark AR Video 360, ideal para crear filtros de instagram. Además te enseñaré cómo extraer fotogramas de tus videos para crear texture sequence y por supuesto te ayudaré a optimizarlos. Recuerda que todos mis archivos trabajados se encuentran en mi Patreon. Estará muy interesante este proceso. Te enseñaré paso a paso.
Los videos e imágenes 360 son elementos muy interesantes que se diferencian de agregar una imagen estática en el fondo porque te puedes mover y en todos los ángulos te darás cuenta que estás dentro de un escenario.
Tutorial Spark AR video 360
Primero lo primero, trabajaremos para obtener nuestro video y agregarlo a Spark AR. Puedes utilizar videos 360 que existen en internet o como mencioné en otro tutorial: utilizando una cámara 360, como la Insta one X podrás sacar fotos y grabar en todos los ángulos posibles al mismo tiempo.Mostraré estos ejemplos, y además usaré una imagen 360 para este tutorial.
Para el caso del fragmento del video que yo grabé con mi Insta One X, es necesario editarlo para que no pese demasiado. Sea el video que utilices necesitamos convertirlo en fotogramas para así ser utilizado en Spark AR. Por ello, utilizaremos un programa llamado FFMPEG.
FFMPEG es un software libre que graba, convierte y hace streaming de manera muy potente. Te explico a continuación que debes hacer. Es necesario instalarlo y si eres usuario windows debes agregarlo en tu variable de sistema. Ahora vamos a crear los fotogramas. Entramos al CMD nuevamente y utilizaré el video360.mp4 para este ejemplo. Utilizaré este comando: ffmpeg -i in.mp4 -vf select=’not(mod(n,3))+not(mod(n+1,12))’ -vsync 0 frames%d.jpg
En este primer ejemplo he generado 79 fotos y puede ser fácilmente importado en Spark AR aunque hay que cuidar el peso de los archivos. Vamos a trabajar en Spark AR, necesitamos agregar las imágenes hacia la plataforma. Aquí hay un proceso algo complejo porque por debemos subir las fotos en orden. Yo prefiero subirlo manualmente porque así controlo todo.
Es necesario ajustar el peso de los archivos, pero para este ejemplo solo usaré algunos cuantos fotogramas (del 31 – 42). Ahora seleccionaré todos los archivos y cambiaré el tipo de textura de “single” a “texture sequence”.
Tutorial Spark AR – Sphere
Ahora usaré una esfera 3d, tomando en cuenta los archivos de la librería. Usaré “sphere primitive”. Arrastraremos la esfera en la escena, pero lo pondremos fuera de la jerarquía. Necesito aumentar la escala y lo acerco hacia al centro.
En el material usaré “sphere_mat” y cambiaré el shader type a “flat” y ahora crearé una nueva animation sequence para la textura. El animation sequence creado lo conectaré con el texture sequence. El FPS lo usaré a 12 y rotaré la esfera para visualizar en la posición correcta.
Ahora regresamos al material “sphere_mat”. Modificaremos el render options. Cambio el blend mode a “replace”. y el cull mode a “front”. En estos momentos vamos a camera y utilizaremos “texture extraction” y “segmentation”. Luego agregaremos un canvas para después crear un rectángulo. Como saben debemos cubrir con el rectángulo toda la pantalla.
En estos momentos crearemos su material. A este usaremos “flat” en el shader type y en texture usaré “camera texture”. En “alpha” usaremos person segmentation. Ahora falta activar el “alpha test”. Ahora falta ajustar un poco más para que quede mejor y vamos a probarlo.
Agregamos info al patch editor
Ahora agregaré un detalle. Habilitamos el patch editor: utilizamos “screen tap” y seleccionamos la la opción “visible” de la esfera y lo conectamos.
Desahabilito el back camera de la esfera por preferencias personales para que no me aparezca al cambiar la cámara. Tu lo puedes dejar sin modificar, no hay ningún problema. Utilizaré un “face tracker” y luego agregaré el sphere nuevamente pero dentro de su jerarquía como face tracker. Subiremos el objeto 3d arriba de la cabeza.
Ahora usaremos el material que creamos anteriormente y rotaremos la esfera para que se visualice de manera adecuada. Vamos hacer un juego de visualización de esferas. Llamaré la esfera que está arriba de mi cabeza y lo conectare al patch, pero mencioné previamente el “not”.
Spark AR Imagen 360
Ahora utilzaré un ejemplo con una foto simple 360. Tenemos este archivo y lo arrastramos a Spark AR. En “sphere_mat” cambiamos nuestro animation sequence por la nueva imagen y mira la magia.
Un problema muy común que tenemos es que al parecer por más que agregas fotos de buena calidad 360, la plataforma la optimiza y puede llegar a pixelearse. Existe un truco para saltar este proceso y siempre conseguir buena calidad de imágenes.
Si bien la imagen ya está implementada, vamos a hacerle clic derecho y usamos “replace” para volver a mencionar el archivo y agregarlo. Ahora pasó de 1024×512 y pesar 350kb a tener 6000×3000 pixeles y pesar 3.63 megas. Obviamente tenemos que escoger imágenes optimizadas, sobre todo por su peso.
Patreon
Como siempre dejo todos mis archivos trabajados del tutorial en mi Patreon. Si consideras que he hecho un buen trabajo, apóyame!
