Utilizar la realidad aumentada para impulsar un negocio es una de las metas más importantes para los emprendedores y creadores de filtros. Por eso, hoy haré una introducción sobre cómo emplear el target tracker en una camiseta. Haremos 3 ejemplos, una con imágenes y partículas, otra con el keyframe patch y finalmente con un objeto 3D. Además de brindarte tips y sugerencias del proceso. ¡Empecemos con el tutorial de Spark AR T-shirt!
Paso a paso: Spark AR T-shirt
- Lo primero que vamos a hacer es crear un proyecto desde cero con target tracker. Como verás, el patch editor ya viene con información para situar correctamente el marcador, la cámara, el device y los otros patch que permitirán una mejor estabilidad en la visualización de los elementos.
- Hay que aclarar que Android presenta problemas cuando trabajamos con este tracker, espero que se pueda mejorar este inconveniente; sin embargo, este tutorial funciona para cualquier dispositivo.
- En estos momentos, vamos a utilizar el ‘fixedtargetracker’ y agregarle una textura. Por lo general, se utiliza el modelo de color basado en CMYK en camisetas, este es ideal para impresión; en cambio, RGB es para verse en pantallas. Por eso, lo primero que debes tener en cuenta que tanto tu logo como la camiseta deberían verse idénticos o similares en CMYK.
- En el siguiente paso, como es evidente, tenemos que utilizar nuestro logo y aquí suele haber un debate: ¿logo con fondo de color o con fondo transparente? Vamos a hacer la prueba primero con el fondo transparente, pero te daré un spoiler: no funciona tan bien. Importamos el archivo, listo.
- Ahora vamos a agregar un ‘null object’ y luego un plano. A este plano, le creamos un material y, como textura, le agregaremos nuestro logo en RGB. Para que calce perfecto, tenemos que hacer ajuste de escala, podemos quedarnos aquí, pero le haremos una animación simple.
- Usaremos el ‘pulse’ y modificaremos para que tenga una mejor presencia tomando en cuenta el dato de la escala. ¡Genial! y para completar el efecto, agregaremos el ‘particle system’, el ‘emitter’ será tipo plano y el ‘space’ en “local”. Reducimos solo un poco el “Birthrate” y, respecto al material, utilizamos el ‘material0’ que ya hemos trabajado previamente. Modificamos algunas cositas. ¡Listo! ¿Quieres ver cómo queda? ¡Vamos a probarlo!
- Se demoró en detectar el logo, pero cuando lo hizo, se pudo captar bien el efecto. Lo bueno que ahora, el ‘target tracker’ de Spark AR funciona para que una vez sea detectado, ya permanezca en la escena. Como podrás darte cuenta, lo he probado con Android y iPhone.
- Vamos al siguiente ejemplo: con el ‘keyframe patch’. Quitaremos el check al visible del primer ‘null object’ y crearemos un segundo ‘null object’, ahora agregamos un simple objeto circular. Lo arrastramos dentro de la jerarquia del nuevo ‘null object’, modificamos su escala, para poner las cosas más interesantes vamos a cambiar de color a dicha esfera, un color más llamativo por supuesto.
- En el patch editor llamamos el ‘keyframe patch’ y lo conectamos con la posición de la esfera. De esta manera. En estos momentos, entramos al ‘patch’ del ‘keyframe’, hice un video completo al respecto. Felizmente, como tengo un ‘null object’, puedo mover todos los elementos que lo conforman para acercarme al inicio de mi logo. Lo que haremos es trazar una trayectoria para que el círculo se mueva por todo el logo. Haciendo un efecto interesante.
- Aumentaremos la duración, ya sabes, presiono este botón y vamos generando puntos. Ahora trabajaremos cuidadosamente para ubicarlo de manera correcta, es todo un proceso detallado para lograr el efecto deseado. Claro está que dependerá de la forma de tu logo, paciencia para hacerlo bien. Cuando terminemos, salimos hacia el patch editor y lo conectaremos con un ‘loop animation’.
- Podemos controlar la animación haciéndola que se mueva más despacio antes de lanzar la prueba. Vamos a cambiar la textura del ‘target tracker’ por un logo con fondo blanco; son prácticamente iguales a simple vista pero notarás la diferencia en estos momentos.
- El de la derecha no ha detectado el filtro o tardará en responder (este es el ‘tracker’ con transparencia). En cambio, el de la izquierda rápidamente activó el efecto y tiene una buena presencia. Maneja las coordenadas xyz para lograr un efecto interesante con el ‘keyframe patch’.
- Ya vamos por el último efecto, usaremos un objeto 3D. Hace unos meses hice un video sobre cómo crear un objeto 3D a partir de una imagen 2d, te recomiendo el video porque aquí pasaremos a implementarlo en Spark AR.
- Al segundo null object le quitaremos el check de visible y crearemos uno nuevo para luego agregarle nuestro objeto 3D en la jerarquía correspondiente. Por supuesto, tenemos que ajustarlo. En el proceso de creación del objeto 3D hice que cada parte importante del logo tuviera la opción de agregar el color correspondiente, de esa manera podemos editarlo sin problemas.
- Solo tienes que agregarle un nuevo material y elegir un color, es decir, podemos modificarlo a nuestro gusto incluso cambiarle totalmente toda la apariencia. ¡Vamos a probarlo! Por supuesto no lo voy a dejar así quiero agregarle el color original.
- Como verás, con el ‘target tracker’ podemos hacer efectos muy interesantes si sabemos utilizar adecuadamente las herramientas, pero recuerda que primero debes tener claro para qué realizas el efecto, cuál es tu objetivo, cómo utilizarán los clientes y cuál es el impacto que quieres conseguir; todas esas ideas te servirán para aterrizar la propuesta.
¿Qué opinas de esta técnica? Si Spark AR T-Shirt te pareció interesante, compártelo. ¡Nos vemos en el metaverso!
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.
