Crear filtros para Facebook e Instagram.

Visor 3D del efecto en Spark AR Studio.

Hace más o menos un año, un amigo me escribió para preguntarme si sabía hacer máscaras para Instagram. Mi respuesta fue, no sé qué es eso. Yo en IG sólo doy likes y poco más.

Me pasó un link de una noticia sobre un filtro que introducía un perro en 3D en la escena mediante Realidad Aumentada que se había hecho viral porque parecía un perro de verdad.

Me explicó, los filtros se hacen con una aplicación de Facebook que se llama Spark AR Studio que vinculas a tu cuenta de Instagram para que la gente que te sigue puede añadirlos y usarlos en sus stories.

Con esta herramienta puedes crear diferentes efectos visuales o sonoros, añadir objetos como imágenes o modelos 3D, realizar animaciones y configurar la lógica, o cómo quieres que se comporte el filtro sin necesidad de saber programar.

Y como siempre que algo despierta mi curiosidad, no pude pasar sin ponerme a buscar información y tutoriales. En seguida, me entraron ganas de crear un filtro para ver las posibilidades de Spark AR Studio.

Esto no es un tutorial de Spark AR porque pienso que ya hay demasiada información en la web de esta herramienta, o en blogs y canales de Youtube de gente que lleva tiempo usándola.

Os recomiendo que os paséis por la web de Emiluisvgs, del que he aprendido un montón. Si queréis hace algo en Spark AR, seguramente, él ya lo habrá probado.

Así que, mejor os cuento mi experiencia con esta herramienta y lo que he aprendido hasta el momento.

Spark AR Studio

Cuando abrimos Spark AR Studio, nos da la opción de empezar desde cero, o usar una plantilla de un efecto ya creado al que podemos hacer alguna pequeña modificación sencilla para adaptarlo a nuestros gustos. Es una buena opción, si quieres tener un primer contacto sin complicarte demasiado la vida.

Ventana de inicio de Spark AR Studio
Ventana de inicio de Spark AR Studio

Si decides empezar un proyecto nuevo, puedes escoger entre un proyecto en blanco o alguno de los diferentes tipos de efecto que puedes crear según el tipo de rastreo.

Tipos de proyectos en Spark AR Studio.
Tipos de proyectos en Spark AR Studio.

El interfaz de Spark AR Studio tiene una ventana central en la que se visualiza la escena y se representan los elementos que intervienen en ella. Desde las luces, el móvil, un modelo que simula a la persona que va a usar el filtro, y los demás objetos que vayamos incluyendo.

Podemos movernos por la escena para verla desde diferentes ángulos, y hacer ciertas transformaciones en los objetos como moverlos, girarlos o escalarlos.

Además, tienes una vista previa de cómo se vería el efecto en la pantalla de un dispositivo, a elegir entre diferentes marcas, o sistemas (Android, iOS).

Visor 3D del efecto en  Spark AR Studio.
Visor 3D del efecto en Spark AR Studio.

A la izquierda de la pantalla, se encuentra una ventana con una lista de los objetos que hay en la escena dispuestos de manera jerárquica. Pulsando encima de los objetos, podemos seleccionarlos y abrir sus propiedades en la ventana de la derecha.

Más abajo, está la ventana de Assets, en la que se van creando carpetas con los elementos que necesitas para darle forma a la escena o para configurar objetos, como materiales, texturas, modelos 3D, audios, etc.

Editores de Spark AR Studio
Editores de Spark AR Studio

Y por último, una ventana que por defecto no está visible, pero que es fundamental para configurar la lógica del filtro, llamada Patch Editor.

En el Patch Editor podemos configurar y controlar el comportamiento de los objetos en el filtro. Este editor se presenta en forma de interfaz gráfica formada por una serie de componentes llamados “Patchs” que se van conectando entre sí. De este modo, se abstraen funciones complejas en un interfaz de usuario simple, para el que no se requiere experiencia en lenguaje de programación.

Hay gran variedad de Patchs pero yo lo voy a clasificar en tres grupos: sensores, controladores y actuadores (aunque en Spark AR les llaman consumidores)

Los primeros, son los encargados de captar un estímulo, como por ejemplo, que pulsemos las pantalla o un objeto, que comencemos a grabar, que cerremos un ojo, o algún movimiento facial o con los dedos, etc.

Los controladores reciben este estímulo y comienzan a realizar operaciones que activan o modifican los actuadores a los que están conectados cuando se cumplen las condiciones de su funcionamiento.

Y los actuadores o consumidores reciben las señales creadas por todos los demás parches para que suceda algo en la escena. Suelen ser propiedades de los objetos que queremos modificar o configurar como la escala, la situación, que sea visible, su reproducción (en el caso de los audio), etc.

Por ejemplo, podríamos poner un activador Microphone conectado a un controlador de Audio (Pitch Shifter) conectado a un actuador Speaker. De este modo, cuando usemos el micro de la cámara, el controlador de Audio va a activar un efecto haciendo que el Speaker o el audio de la grabación reproduzca nuestra voz más grave.

Ejemplo de conexión de Patchs en Spark Ar Studio.
Ejemplo de conexión de Patchs en Spark Ar Studio.

La verdad es que el interfaz es muy intuitivo. Incluye bastante información sobre la mayoría de elementos sin tener que salir del programa. Y tiene una librería para poder agregar a tus proyectos imágenes, audios, modelos 3D, patches, etc.

Interfaz de Spark AR Studio.

Filtros que he creado con Spark AR Studio.

Filtro máscara Halloween

Como tenía mucha curiosidad por Spark AR Studio y quería comprobar su manejo y posibilidades, me estrené, simplemente, añadiendo una máscara a la escena para que se adaptase a la cara de la persona que utilizase el efecto.

Para ello, adapté un modelo que tenía de una máscara que me habían encargado para impresión 3D a su nuevo uso. Le quité el espesor, hice una retopología para optimizar el peso del modelo, y le añadí una textura para definir su apariencia.

Aprovechando que estaba cerca Halloween, le di un aspecto siniestro a la máscara, y la verdad es que me sorprendió la sencillez del proceso y el resultado.

Vídeo demostración del efecto máscara Halloween.

Si queréis saber más sobre optimizar modelos, podéis leer Consigue Top Models 3D para tu web. En este caso, no es un modelo para web, pero el proceso es muy similar, pues lo que buscas es que el efecto se cargue rápido y que la visualización tenga cierta calidad.

Los tipos de archivos de modelos 3D que soporta Spark AR son: .fbx (versiones 2014/2015 binaria y ASCII), gltF2 (versión binaria y texto), collada/dae, .obj y .dae. Y puedes trabajar con características de los modelos como materiales, texturas y animaciones de posición, rotación y escala.

En cuanto al peso de los modelos, es aconsejable tirar siempre a la baja para que sea más accesible a cualquier tipo de dispositivo y conexión. Y dependerá del resto de elementos que quieras añadir a la escena, porque todo suma. Teniendo en cuenta que el peso final del efecto en Facebook no debe exceder de los 10MB y en Instagram 4MB, y que en dispositivos viejos siempre va a pesar más.

Os dejo enlace al filtro por si queréis probarlo: https://www.instagram.com/ar/406523613353099/

Efecto ruleta

Tengo que confesar, que tras crear el efecto de la máscara, me olvidé por completo de los filtros. Hasta que alguien que sabía que había estado mirando el tema, me preguntó si sabría hacer un filtro de los que se habían puesto de moda, en los que una ruleta te decía qué personaje de Disney o qué animal eres.

Ni conocía ese tipo de filtro, ni sabía cómo se hacían, pero tras una breve exploración por la red, me comprometí a hacer un filtro de ese tipo para la promo de un grupo musical, Naranja, en el que la ruleta te decía qué grupo de Indies Tristes eres.

Esta vez, además de currarme las texturas y aplicarlas a un plano, me tocó meterme con la lógica. Como ya había gente que lo había hecho antes, simplemente seguí un tutorial y modifiqué un par de valores.

Lógica del parche ruleta.

Una vez entendida la lógica, pensé en hacer una ruleta con objetos 3D. Pero de ese modo, el efecto iba a pesar demasiado y no iba a poder meter muchas opciones. Por eso, se me ocurrió incluir un único objeto 3D, y mediante una aleatoriedad variar su textura para generar la sensación de una ruleta 3D.

Vídeo demostración del filtro ruleta de cervezas.

Os dejo el enlace al test de prueba por si queréis ver qué os sale, ya que el este efecto no está aprobado.

Realmente, a la hora de aprobar los filtros, hay un montón de trabas y pequeños detalles por lo que Facebook censura los filtros como poner fotos de personas, aunque sea una foto de tu cara; poner textos o logos si no cumplen lo estipulado por ellos… Algunos se pueden trampear o hacer pequeños cambios para ajustarlo a sus políticas. Y otros, simplemente, tienes que repensarlos porque tal como los ideaste nunca te lo van a aprobar. Supongo que sólo quieren cubrirse las espaldas, pero cortan bastante la creatividad.

Podéis consultar las políticas de publicación aquí.

Efecto ruleta con sonido

Hace poco, otro grupo musical, Corea la Buena, contactó conmigo porque querían un filtro parecido al de Naranja, y sabían que se lo había hecho yo.

Como siempre, cuando me cuentan alguna idea, escucho atentamente qué quieren o qué les gustaría, y después, investigo si es posible o cómo se podría hacer.

La idea era que además de la ruleta, una vez que saliese el resultado, se pudiese ver en grande de fondo y que sonase un audio en concreto para cada resultado.

Tras mezclar varios tutoriales, conseguí el efecto que me pedían. Pero por alguna extraña razón, que a los que hicieron los tutoriales no les pasaba, los audios sonaban antes de empezar a grabar.

En teoría no era un problema muy grave, sólo que desvelaba la sorpresa de los audios antes de saber el resultado. Intenté configurar el efecto de todas las formas que se me ocurrieron y no hubo manera. Hasta que un día, estaba creando un filtro similar inspirado en las PCRs para detectar el Covid-19, y se iluminó mi mente. Cambié la configuración que parecía más lógica, por otra totalmente distinta, y conseguí arreglar tanto el filtro de Corea la Buena como el mío.

No os voy a explicar lo que hice, porque tendría que hacer un post o un tutorial sólo para explicar cómo se configura el efecto y cómo lo modifiqué. Sólo decir que lo solucioné atrasando la visibilidad de las canciones para que no fuesen visibles antes de salir el resultado.

Vídeo demostración efecto ruleta con sonido.

Os dejo el enlace del efecto por si queréis haceros el test PCR: https://www.instagram.com/ar/385253379279687/

Apunte importante, si queréis meter un audio en Spark AR Studio debe estar en formato m4A, mono y a 44100 Hz. Yo lo paso a mono con Audacity y lo convierto a m4A en algún conversor online.

Efecto Presenta con Gayoso

Mientras me peleaba con la lógica de los filtros anteriores, un amigo que es muy fan de Gayoso, estuvo de cumple.

Tenía pensado regalarle un micro de juguete con soniditos y luces. Pero este año, entre que no nos íbamos a ver y que no quería mandarle nada físico que pudiese ser el origen de algún contagio, se me ocurrió hacerle un filtro.

Aproveché lo aprendido de situar objetos 3d sobre la cara, la segmentación del fondo, y los efectos de audio para configurar el filtro de presenta con Gayoso.

En un principio, este filtro no me lo aprobaron porque de fondo había una imagen realista de una persona, pero haciendo un cambio de fondo, ya no hubo problema.

Fondo censurado y fondo final.

Os dejo el enlace, por si os hace ilusión presentar junto a Gayoso: https://www.instagram.com/ar/2863509843878335/

Efecto poner cara en objeto

Y por último, los de Naranja volvieron a contactar conmigo para la promo de un nuevo tema.

Esta vez querían que la cara de cualquiera se pudiese ver en una moneda con la cara de rey emérito, simulando la portada del disco, y que sonase el single.

Otra vez, consulté un tutorial sobre el tema, y después hice algún aporte mío como lo de incluir una moneda 3D o lo de modificar el Shader del material para que la cara se integre mejor en la moneda.

Efecto cara en objeto.
Efecto cara en objeto.

Si queréis probar este filtro podéis encontrarlo en el perfil de Instagram de Naranja: https://www.instagram.com/naranjagrupo/?hl=es

Y hasta el momento, estos son los filtros que he creado, pero las posibilidades de Spark AR Studio son increíbles. Si no estoy el día entero haciendo filtros es por falta de imaginación, pero basta ver los filtros que hace la gente para alucinar y querer crear más filtros con los que adornar, modificar y desvirtuar la realidad.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *