8TH wall AR Face Effects – WebAR Tutorial

8thwall nos ha sorprendido con una nueva característica: la plataforma de experiencias de realidad aumentada para web y app ahora añade efectos para el rostro. Al fiel estilo de los filtros de Spark AR o Lens Studio. La competencia siempre es buena y permite que el usuario tenga más opciones de elegir. Ahora te explicaré en estos momentos cómo funciona esta nueva característica llamada AR Face Effects y cuál es la diferencia respecto a los competidores.

8thwall, es una plataforma que brinda herramientas para que desarrolladores puedan crear experiencias de realidad aumentada. Siempre están actualizando sus servicios y librerías. Esta nueva funcionalidad exclusiva del modo agencia, podemos agregar objetos 3d, imágenes, animaciones que están relacionadas a nuestro rostro para generar un impacto interesante para nuestro negocio, cliente o marca.

Proceso de creación

Vamos a crear un proyecto. Podemos elegir diferentes plantillas, pero para este caso usaré el Face Effects trabajado con A-frame. Esperemos que cargue y ya veremos el archivo completo.

A primera vista veremos tres archivos básicos como head, Apps.js y body.html. Acá estará alojada toda la información de trabajo. Aquí veremos diferentes archivos como los objetos 3D del occluder, los lentes y tatuajes, por cierto esos archivos se encontrarán en assets, en models encontrarás el head occluder y también stereo glasses. En las texturas encontraremos la imagen de tatuajes y otras aspectos gráficos para el rostro. 

Lo siguiente que debemos hacer es autorizar el dispositivo, ya que esto es solo una prueba y no va salir de manera comercial lo configuré solo para mi smartphone.

Ahora vamos a crear nuestro propio efecto utilizando blender. En esta plataforma estamos trabajando con un rostro 3D. Existen varias opciones en internet que puedes utilizar. Lo que necesitamos para este ejemplo es modificar la forma de nuestro rostro para darle un aspecto diabólico o al menos eso es mi intención inicial. 

También le podemos agregar una textura para que no se quede solo con esa apariencia gris:

• Vamos a uv editing
• agrego una imagen como mi logo: emiliusvgs
• hago que esta textura sea unwrap. 
• Luego le damos clic a “shader editor”
• Aquí agregamos el elemento image texture y seleccionaremos la imagen que ya habíamos agregado previamente
• Regresemos a uv editor y ya podremos ver la textura agregada en el objeto 3D.

Ahora haremos unos ajustes para que todo quede OK, sobretodo crearé orificios de los ojos y eliminar vértices para que se vea nuestra boca, como si fuera una especie de antifaz.

Vamos a agregar el objeto 3D al proyecto. Lo primero que haremos es subir el archivo hacia assets. Reemplazamos el “stereo-glasses” por nuestro archivo llamado face2.glb. Luego ocultaremos todos los elementos que no sean necesarios, podemos mencionarlos como comentario.

Diferencias respecto a Spark AR o Lens Studio

Por el momento Spark AR o Lens Studio son más potentes tecnológicamente hablando, pero quizá el hecho de ser usado sobre una red social sea su punto en contra porque estás sujeto a sus reglas y si o sí debes usar su app. 

Por otro lado, con 8th wall tendrás la autonomía para utilizar tus propios efectos en tu página o plataforma de negocio. Posiblemente no tendrás el mismo impacto de difusión que tendrías con una red social pero podrás saltar las reglas de imágen estática, cantidad de logos, peso del filtro u otros elementos que impongan en el futuro.

8th wall sin lugar a dudas es una gran opción si lo que estás pensando es crear experiencias para empresas. Su plataforma permite diseñar proyectos de calidad y eso es uno de sus puntos más fuertes.

Patreon

Si desear apoyarme para mantener mi sitio web y mi proyecto, puedes hacerlo accediendo a mi patreon.