El documento describe cómo crear filtros de realidad aumentada 2D y 3D para publicar en Facebook y otras redes sociales usando la herramienta gratuita ARstudio. Explica los pasos para descargar e instalar ARstudio y la aplicación AR Studio Player, preparar los recursos como imágenes, modelos 3D y audio, desarrollar el filtro usando capas y eventos, probarlo y publicarlo en Facebook para que otros usuarios puedan usarlo. Luego, da un ejemplo práctico de cómo crear un filtro que reconozca una cara y le ponga

1. Facebook Filters
Hoy en día, redes sociales como Facebook han generado diversas
tendencias por medio de las “historias”, herramienta que usan los
usuarios para hacer publicaciones temporales en sus perfiles. Además,
este tipo de opciones ahora cuentan con las nuevas tecnologías de
realidad aumentada en la característica de filtros.
Esta es una guía introductoria al desarrollo de filtros 2D y 3D, sin la
necesidad de programación avanzada para publicar en Facebook y
otras redes sociales sin costo alguno, usando el entorno de desarrollo
de “ARstudio” (actualmente solo para MAC) y la aplicación móvil “AR
Studio Player” (disponible en Android y iOS) para hacer pruebas de
rendimiento desde nuestro celular (opcional).
Descargamos “ARstudio” desde su link oficial:
https://www.facebook.com/fbcameraeffects/arstudio/download/
Y podremos descargar “AR Studio Player” desde su respectiva tienda
en Android y iOS.
Primero tendremos una introducción de las características a tener en
cuenta, seguido de un ejemplo práctico paso por paso.
Assets
Para los filtros 2D con imágenes estáticas usaremos imágenes .png (otros formatos sirven, pero la calidad
disminuye) y para las animaciones usaremos sprites donde el motor de desarrollo lo reconocerá
automáticamente como animación.
Para los filtros 3D preparamos modelos en .fbx .obj .dae ó .collada con sus respectivas texturas en .png. Estos
modelos se pueden descargar desde internet de manera gratuita, pagando o usando otras herramientas como
“Blender”, “AutoCAD” para diseñar los moldes por nuestra cuenta.
También podemos preparar audios .wav para poner de fondo.
Adicionalmente, tengamos en cuenta que una vez terminemos compilando, los archivos del proyecto serán
comprimidos, afectando su resolución.

2. Desarrollo
Trabajaremos por capas jerárquicas, donde contaremos con prefabs tales como: Reconocimiento facial, focos
de luz y canvas.
Por el lado de eventos o trigers podremos usar el “Patch Editor”, que se maneja por la lógica de programación
con bloques. De no estar cómodos con este estilo, podemos usar JavaScript con clases predefinidas que
podemos encontrar en su documentación: https://developers.facebook.com/docs/ar-studio/reference
Pruebas
ARstudio incluye diferentes videos de personas con variedad en relación de aspecto para probar nuestros
filtros en diferentes situaciones. Sin embargo, podemos usar la aplicación “AR Studio Player” en nuestros
celulares con la opción de “USB Debugging”, donde veremos el rendimiento FPS en nuestro dispositivo.

3. Publicación
La publicación del filtro en Facebook y otras redes es gratuita, donde posteriormente podremos realizar
campañas promocionando el uso de esta. Para ello vamos a
https://www.facebook.com/fbcameraeffects/manage, donde encontramos un dashboard para subir, editar,
publicar y eliminar los filtros que hemos subido.
La publicación de los filtros se hacen compilando el proyecto en el formato .arexport (extensión por defecto),
donde debemos segmentar la publicación por localización geográfica y palabras clave. Una vez lo subamos,
tendremos que un tiempo aproximado de 12 horas hasta ser aceptados por las políticas de Facebook, pero en
dicho periodo de tiempo el filtro puede ser compartido por medio de links.
Ejercicio
Crearemos un proyecto donde reconoceremos una cara para ponerle una máscara y al abrir la boca
desaparece:
• Abrimos un nuevo proyecto en ARstudio.
• Agregaremos un “Face Tracker” en la escena.
• En “Face Tracker” agregamos “Face Mesh”

4. • Buscaremos en internet o diseñaremos nuestra máscara para el rostro en formato .png y lo
importamos en assets.
• Todas las máscaras o sprites necesitan un material, por lo cual haremos desde assets en “Create New
Material”.
• Seleccionamos el nuevo material y vamos a la paleta de la derecha configurando: “Shader Type=Face
Paint” y asignamos la textura que importamos anteriormente.
• Vamos al “Face Mesh” creado en la paleta derecha y ponemos el nuevo material de la máscara, así
podremos ver un resultado avanzado.

5. • Por último, agregaremos ciertas funcionalidades por medio del “Patch Editor” y formaremos la
siguiente lógica, para que cuando el personaje abra la boca, la máscara se desactive.
• Una vez lo exportemos desde la pestaña “File”, iremos a su publicación en:
https://www.facebook.com/fbcameraeffects/manage/ , donde subiremos el archivo generado
.arexport en la pestaña de “Upload AR Studio Effect” y seguimos paso a paso la configuración que
deseamos.
Ahora en adelante todo queda a tu creatividad…