Hoy te traigo un nuevo tutorial Spark AR para filtros de Instagram. Esta vez, utilizaremos la técnica ‘parallax’ para generar un efecto de profundidad. Con esto, podrás darle vida a cuadros o pinturas. Como ya sabes, todos los archivos los dejo en mi Patreon. ¡Comencemos con Tutorial Spark AR – Parallax Effect!
Tutorial paso a paso: Spark AR – Parallax Effect
Descubrí Parallax cuando trabajaba con programadores web, ellos hablaban de agregar dicho efecto para darle profundidad a la escena cuando hacíamos scroll en una página web. En este tutorial, nosotros nos vamos a centrar en generar la ilusión de profundidad.
Cuando investigué más el asunto descubrí que esta técnica no es nada nueva y que, como era de esperarse, se usó mucho en el cine. Ahora, sí vamos al grano.
- Para este ejemplo, usaremos target tracker y aquí viene un punto muy importante: la elección de la imagen. El target tracker es muy delicado, tienes que seguir las recomendaciones para lograr un buen resultado. Es decir, buscaremos imágenes de alto contraste con buena resolución con definición de contornos y una serie de características más. Vamos a buscar la imagen perfecta en Unsplash.
- Una vez que hayas elegido la imagen, vamos hacia Photoshop.
- Arrastramos nuestro archivo hacia el espacio de trabajo, lo primero que tenemos que hacer es quitar el candado de la capa y utilizaremos el lazo poligonal para seleccionar las partes de la imagen que consideramos que forman un bloque, ya sea por el color que generan o la textura que tengan.
- En esta parte hay que ser muy precisos, yo no soy experto, así que ustedes lo harán mucho mejor.
- Una vez completado este proceso, creamos otra capa. Copiamos la selección y la pegamos en esta nueva capa que les mencioné. Tenemos que replicar lo mismo para las demás selecciones y de esa manera agrupamos la imagen en cuatro capas.
- Vamos a exportar en png cada capa. Recuerda que cada imagen debe pesar poco pues la usaremos en Spark AR.
- Vamos a Spark AR, abrimos la plataforma con la plantilla target tracker. En fixed target tracker agregaremos la imagen que descargamos de Unsplash.
- Ahora agregaremos un plano, le llamaremos capa1. Vamos a moverlo un poco, le crearemos un material y agregaremos la primera capa png como textura.
- La expandimos hasta cubrir el target tracker. En el material, tenemos que ir a advance render options para desactivar el use depth test.
- Vamos a duplicar el primer plano, este tendrá un nuevo material y le agregaremos nuestra siguiente imagen png que hicimos en Photoshop.
- Deseleccionamos el use depth test y desplazamos la capa 2 para generar el efecto de profundidad. Aún nos faltan unas cuantas capas más, así que repetimos el proceso. ¡Ahora vamos a probarlo!
- Aquí tenemos el efecto de profundidad, según como mires, en diferentes ángulos, tendremos otra perspectiva. Vamos agregarle más elementos para aumentar la inmersión.
- Utilizaremos un texto 3D, lo agregamos dentro de la jerarquía. Lo orientamos de mejor manera para la cámara. Quiero que el texto diga: “Mountain”. Juega con el color o la textura que elijas, eso depende de ti, yo usaré el amarillo.
- Podemos agregar una animación simple o dejarlo estático. Para este ejemplo, le daremos movimiento. Necesitamos trabajar en la duración para hacerlo mucho más pausado. Además, de modificar los elementos del transition te lo dejo a tu criterio.
- El paisaje no puede quedarse así de simple, le falta uno globos aerostáticos; por eso, crearemos un nuevo plano. A este primer globo, tenemos que posicionarlo delante de los otros planos y disminuir su escala.
- Ahora le agregaremos una animación simple, haz los ajustes necesarios. Depende de ti el estilo y rango de movimiento. Duplicamos este globo y lo posicionamos al fondo. A este le reducimos su escala más que el anterior globo. También le agregaremos un animación diferente.
- Ya tenemos 3 animaciones encima de las capas, puedes desactivar el que desees e ir probando sus animaciones y efectos. ¡Ahora sí vamos a probarlo!
Tenemos un cuadro hermoso animado, hemos agregado una realidad diferente con mayor información. Si gustas puedes añadirle un marco y otros objetos para hacerlo más realista. Espero que puedas poner en práctica este tutorial Spark AR – Parallax Effect.
Si desear apoyarme para mantener mi sitio web y también recibir los archivos de mis tutoriales de Spark AR, hazlo accediendo a mi Patreon.