Aprende a crear efectos para Instagram Stories

8 de enero de 2021

¿Te ha pasado que últimamente guardas todo efecto que encuentras en IG stories? Créeme que no eres el único. Estos filtros se han convertido en uno de los principales atractivos de Instagram y Facebook, ya que brinda la oportunidad de sobreponer una máscara a tu rostro en tiempo real. 

Entonces, ¿qué se necesita para crear filtros para la cámara de Facebook e Instagram? Solo instalar la aplicación Spark AR Studio que está disponible tanto para windows como para Mac. Aunque el proceso de creación de filtros no es extremadamente fácil, esta app hace que este procedimiento sea un poco más sencillo y esté al alcance de todos. 

¿Qué necesitas para hacer un efecto?

Instalar la aplicación Spark AR Studio que también está disponible en su versión móvil, para poder visualizar los efectos desde un smartphone. 

Dentro del app, encontrarás tutoriales que te permitirán aprender a crear los filtros, pero, nosotros te recomendamos iniciar con uno de los ocho ejemplos disponible para que te vayas familiarizando con las distintas herramientas. 

Creando efecto para Instagram stories

¿Cómo crear efectos que respondan al movimiento facial?

Desde la aplicación Spark AR Studio vamos a usar Patch Editor para:

  • Detectar movimientos faciales 
  • Desencadenar animaciones que respondan a movimientos faciales.

Los dos objetos en 3D que parecen ojos se moverán cuando la persona que usa el efecto alza sus cejas como en el ejemplo, a continuación:

Dentro del app

Para empezar, abre la versión prediseñada en la carpeta descargable que tenemos como ejemplo. Podrás observar una selección de algunos objetos en 3D del panel de escáner. En la etiqueta de viewport y el simulador, podrás observar como están quedando los elementos.

También usamos una forma de mezcla para distorsionar la cara y agregamos un efecto de retoque. 

Añadiendo efectos para los filtros de instagram stories

Si quieres abrir el Patch Editor:

  • Dar click en el icono de la mesa de trabajo que está en la barra de herramientas.
  • Selecciona mostrar/ocultar Patch Editor.

El Patch Editor se abrirá en el fondo de la pantalla:

Añadiendo efectos para los filtros de instagram stories

Detectando los movimientos faciales para los filtros

Queremos que la animación de los objetos 3D empiece cuando las cejas de los usuarios cambien de posición. Este cambio se detectará con una ruta que representará el rastreador de facciones. 

Puedes crear la ruta con los siguientes pasos para tus efectos:

  • Selecciona el rastreador de rostro en el panel.
  • Arrastralo al editor de ruta. 

Tres rutas serán creadas: 

Editando rutas en spark ar studio

Usaremos la tercera ruta, llamado facetraker. Enseguida conectamos la ruta hacia Face que es el puerto de salida en este ruta, para obtener la información de los movimientos de la cara. 

Si quieres detectar movimientos de la cara  como el levantamiento de las cejas, vamos a usar un parche de interacción denominado  eyebrows raised.

Para crear una interacción, debes dar click en Agregar Parche en el fondo del editor y te aparecerá el menú: 

Creando interacciones para los filtros de instagram stories dentro de spark ar studio

Puedes encontrar la opción de identificar el levantamiento de cejas de la siguiente manera: 

Ruta o pasos para identificar el levantamiento de cejas dentro de spark ar studio

1) Selecciona “interacción” 

2) Escoge “levantamiento de cejas” 

3) Click sobre “insertar parche”

Los parches que detectan el movimiento facial debe estar conectados al rastreador de rostro para funcionar adecuadamente. Entonces, conecta el puerto face dentro de facetracker0 para luego conectar al parche levantamiento de cejas. 

Animación de efectos

El siguiente paso es agregar los parches que desencadenaran la animación, cuando las cejas levantadas sean detectadas. Puedes usar pulsar patch para agregarlo a tu proyecto:

  • Dar click en agregar parches.
  • Selecciona “pulsar parche” desde el menú.
  • Dar click en “insertar parche”

Conecte el puerto sin nombre en el parche “levantamiento de cejas” al puerto de encendido/apagado en el parche “Pulse”.

De esta manera se verá tu gráfico:

ruta o pasos para hacer animación de efectos dentro de spark ar studio

El parche pulso, te enviará una señal hayas levantado las cejas. Este proyecto se conectará a la animación para desencadenar el efecto. 

Agregar los parches de animación 

Estos parches los usaremos para agregar el efecto a la animación y los parches de transición. Esto le indica al efecto que debe empezar la animación, cuando la señal haya sido dada. En este caso se trata del levantamiento de cejas.

ruta o pasos para agregar parches de animación de efectos dentro de spark ar studio

Una vez que haya hecho eso, conecte el puerto “apagado” en el parche “pulse” al puerto “restablecer” en el parche “animación”. Esto restablecerá la animación cada vez que se levanten las cejas:

Rotación de ojos

Ahora que configuraste el desencadenante, así puedes empezar a construir las animaciones que rotaran con el efecto 3D. 

Vas a necesitar realizar esta acción por separado, una vez por cada ojo. 

Vamos a empezar por el ojo derecho.

Primero necesitas crear un parche representando la rotación en 4 mallas que cubren esa parte del ojo. Cada una está sobre un objeto diferente en el panel. Expande los objetos y cualquier objeto nulo debajo de ellos para encontrar la malla.

Cuando encuentre la malla, selecciónelas. Puede seleccionar toda la malla al mismo tiempo manteniendo presionado el comando en su teclado.

Expande: 

  1. eyes_3.dae –  y selecciona right_eyeAO.
  2. eyes_3.dae0 – y selecciona right_eyeBO.
  3. eyes_3.dae1 – y selecciona right_eyeCO.
  4. eyes_3.dae2 – y selecciona right_eyeDO.

Tú panel debe mostrarse de la siguiente manera:

paso a paso para rotar ojos dentro de spark ark studio

En las configuraciones, dar click en la flecha que está al lado de la palabra rotación para agregar parches a tu proyecto.

Cuatro parches serán agregados:

paso a paso para rotar ojos dentro de spark ark studio

Es momento de conectar:

  • La salida de progreso del parche de animación a la entrada de progreso en el parche de transición.
  • La salida de valor del parche de transición a la entrada de rotación 3D en cada uno de los parches que acaba de crear.

Así lucirá parte del gráfico

grafico dentro de spark ark studio

Antes de que esta parte del gráfico esté completa, necesitamos evaluar los valores del parche de transición. Esto va a configurar cómo se moverá la animación. 

Así es como la transfiguración se ve:

paso para ojo izquierdo - spark ark studio

Básicamente haremos lo mismo para el ojo izquierdo. 

Ahora conecta: 

  • La salida de progreso del parche de animación a la entrada de progreso en el segundo parche de transición.
  • La salida de valor del parche de transición a la entrada de rotación 3D en cada uno de los parches que acabas de crear.

En el parche de transición cambia:

  • El valor Z junto a fin a 180.
  • La curva hacia la entrada cuadrática.

Ahora, ¡tus efectos están listos!