Tutorial Spark AR – Video calling filtro (concurso)

Spark AR está realizando un concurso para su comunidad llamado “Spark play time” destinado a generar filtros para video llamadas. Si estás pensando participar generando estos efectos grupales, debes ver este tutorial. Aquí te enseñaré los principios básicos para comprender el proceso de creación y tú mismo puedas crear efectos potentes. Hice estos ejemplos y como siempre dejaré mis archivos el Patreon de Emiliusvgs para que practiques. ¡Comencemos!

Tutorial paso a paso: Video calling filtro

Los efectos en llamadas grupales son relativamente nuevos, pero con mucho potencial porque puedes interactuar junto a otras personas con efectos de realidad aumentada en tiempo real. Básicamente para trabajar con estos efectos debemos utilizar el multipeer, si no lo usas sería como generar un efecto aislado. El multipeer manda información de un participante a otro a través de la videollamada.

Hay dos formas de trabajar con el multipeer, vía código y a través de patches, usaremos la última opción pues es la más fácil para todos. Cuando entramos de lleno a la documentación encontraremos toda la información necesaria para crear nuestro primer filtro. ¡Manos a la obra!

• Abrimos Spark AR, veremos 3 plantillas y arriba estará la experiencia en blanco llamada video calling. Podemos entrar a la plantilla send to group y aquí podrás hacer el cambio del objeto a interactuar. Usar plantillas puede ser el proceso más sencillo para trabajar pero si no tienes el conocimiento base posiblemente no podrás desarrollar algo más complejo, por eso vamos a trabajar desde cero. Entremos al video calling experience.

• En edit properties podemos ver que están habilitadas las tres opciones de videollamada. Activamos el patch editor, creamos un rectángulo, cubrimos todo el espacio del video y le creamos un material. Este material estará en flat. 

• En estos momentos, vamos a extraer la textura de la cámara y también vamos a generar el person segmentation. Regresamos al material y es allí donde agregaremos la textura de la cámara. Activamos el alpha, en este espacio conectamos el person segmentation. Finalmente, cambiamos el color básico de blanco a otro color, por ejemplo azul. Luego invertir el alpha.

• Ahora si quieres hacer una interacción simple haz tap a la pantalla para cambiar el fondo, para eso, utilizaremos el screen tap, conecto la textura y en el medio utilizo el patch switch, de esta manera interactúo fácilmente.

• Si se dan cuenta, es una interacción simple, usamos 3 elementos. Si quisiéramos usar esta misma lógica para llamadas grupales tendríamos que agregar más elementos, pero conservando los principios. Ahora lo veremos.

• Quitamos el switch, agregamos el multipeer send. Este patch funciona para conectar la información que vamos a enviar hacia otros usuarios a través de un multipeer receive. Entre ellos conversarán. Es importante agregarle un topic para conectar adecuadamente.

• Luego llamamos a un pulse pack, este nos servirá para enviar varias piezas de información de manera empaquetada, este también debe tener un valor.

• Agregam s un multipeer receive, tiene que tener el mismo nombre que el primer multipeer. Luego llamamos a un switch. En este caso usaremos el turn on pues queremos solamente activar el efecto que estará relacionado al material del fondo. También le crearemos un delay para desactivar el mismo fondo en diferente tiempo. Puedes modificar la duración a tu antojo y por último llamamos a un pulse unpack para completar la lógica. Utilizamos el mismo valor.

• ¡Ya tenemos todo listo! ahora nos falta probarlo adecuadamente. Primero guardamos el archivo y ahora trabajaremos con Spark AR Player versión escritorio.

• Spark AR Player es un software que nos sirve para probar nuestro filtro antes de publicarlo en las redes sociales, yo lo uso para mis pruebas que hago para Instagram, pero esta vez es diferente, por lo que requerimos descargar Spark AR Player para PC. Descargaré la versión windows. Sigue todos los pasos.

• Entonces cuando queremos probar nuestro filtro videocalling, tan solo entramos a File y luego a Preview in Spark AR Player. Después de unos segundos aparecerá una ventana. Cambiamos de plataforma hacia messenger y agregamos más participantes con sus respectivos rostros. Ahora que pasa si hacemos tap, automáticamente se pintan los fondos de los otros participantes, y si hacemos tap en otra pantalla, se mantendrá la lógica.

• El tiempo que dura el fondo azul dependerá del delay, así que lo puedes modificar para lograr el efecto que desees. 

• Teniendo la lógica base podemos crear varias otras experiencias. ¡OJO! Esta no es la única forma de crear efectos de este tipo pero sí es importante recordar que debes usar los patches multipeer para la experiencia. 

• Por ejemplo, en vez de usar person segmentation, usaré face tracker. Sé que ambas experiencias para videocalling no son compatibles para ser usadas en simultáneo, por eso retiraré todo lo relacionado al rectángulo, el fondo y claro el person segmentation.

• Ahora agregaré un plano dentro del face tracker, lo ajustamos de tal manera que quede encima del rostro, usaré el mismo material del primer ejemplo. Dentro del patch, desconectaré el material para que veas como quedaría antes de ser conectado con el multipeer.

• Quitaré el screen tap y agregar toda la estructura del face tracker dentro del patch, luego conectaré un mouth open quedaría de esta manera.

• Conecto nuevamente el material. Lo guardamos y vamos a probarlo en Spark AR player.

• Si alguien abre la boca como una expresión de sorpresa, se activará la experiencia en los otros participantes, y si otros usuarios abren la boca en simultáneo podremos ver el plano aparecer a la par. Recuerda que tenemos el delay patch, si queremos que el plano aparezca solo al abrir la boca, tendremos que modificar esa parte. En nuestro caso aparece un poco más de tiempo.

• Teniendo estos dos ejemplos base, podemos subir un poco más la complejidad. En vez de mouth open, pondremos la expresión kiss face. Lo conectamos. También podemos cambiar los nombres de las conexiones para guardar relación entre los componentes.

• Retiro el material del patch editor, de hecho lo vamos a borrar de los assets y también borraremos el plano. Crearemos unas partículas, quiero generar un efecto donde estas partículas aparezcan desde abajo. Bueno para ser un prototipo me parece bien.

• Le creamos un nuevo material. Aquí agregaremos una imagen png, este es solo un ejemplo recuerda. Acá aparecen, son como unas pequeñas luces incandescentes. Por supuesto seguiremos ajustando, finalmente usaremos el visible de la partícula para conectarlo dentro del patch.

• Ahora vamos a probarlo pero esta vez directamente en una llamada real de messenger. La mejor forma de probarlo y que nos servirá para subir nuestro filtro es en una llamada en vivo.

• Recuerda que para subir un efecto necesitamos el video de demostración, en nuestro caso grabamos la llamada sin que aparezcan los íconos de llamada. Te comparto el link del efecto para que lo pruebes ttps://www.messenger.com/ar/323581146350445/

¿Qué te pareció este tutorial? Espero que te haya servido para iniciarte en el mundo de los video calling filters. Si deseas también puedes verlo en vídeo aquí:

Ya sabes que este solo ha sido un video de iniciación, depende de ti hacer cosas increíbles. Comparte este tutorial con quien lo necesite. ¡Nos vemos!

Si deseas apoyarme para mantener mi sitio web y también recibir los archivos de mis tutoriales, puedes hacerlo accediendo a mi patreon.