Integrar diseño de ojo en Spark AR

Clase 6 de 27 • Curso de Creación de Filtros Faciales para Instagram con Spark AR

Daniel Alejandro Cardona Navarro

student•

Gente, hay una correccion que note que se puede hacer al momento de conectar los ojos desde Eyeball.

Al ir siguiendo los pasos tal cual el profe iba indicando, note que en el contorno de mi iris se creaba una especie de recuadro transparente que para posteriores clases se iba notando mas, ya que si agregabas algun maquillaje sobre el ojo, mascara, o las misma practica que hacia el profe, este recuadro se notaba mucho, y si uno ve en la camara del profe, sus ojos si se ven de forma adecuada.
Que hice para corregir esto, me toco investigar un poco mas a fondo porque realmente me molestaba un poco el resultado del iris, y en otros videos muestran que la conexion desde Eyeball no sale desde el primer punto como lo indica el profe, sino que sale desde el segundo punto y tercero, aplicando eso para ambos ojos, entonces, al realizar este cambio, de verdad hubo una gran diferencia, ya que se notaba un poco mas de naturalidad, y los parpados al hacer un face mesh sobre los ojos, se ven mas naturales.
Les dejo la imagen de como realizar las conexiones, y para que ustedes tambien puedan hacer las comparaciones sobre el comportamiento de los ojos, por un lado como lo indicaba el profe, y por el otro lado como los dejo aqui en la captura.

Nicolas Velasquez Lopez

student•

🤖 Estuve haciendo las pruebas que mencionaste pero la verdad veo mejores resultados con la configuración del profesor. Lo que pasa con el arreglo que tienes es que los ojos que usamos de photoshop quedan ubicados abajo, y cuando se inclina la cabeza hacia arriba se pierde la info.

Para descartar calidades de cámara y hablar el mismo idioma, intenta como yo usar los videos de prueba de las distintas personas. Saludos! :D

María Alejandra Flórez

student•

Gracias por tu aporte Daniel, también tuve el mismo inconveniente y sí, era bastante molesto.

Alejandro Ramos

student•

Crear los ojos en Spark AR

Estando en el menú de Spark AR, crear un “Sharing Experience”
Importar el ojo (en este caso lo llamaremos “ojo png”) creado desde ++Assets++ (lado izquierdo). Aparecerá en la carpeta de ++Textures++
Desde la sección ++Scene++ (arriba de assets) en la capa de ++Focal Distance++, dar clic derecho y crear un ++Plane++ y nombralo “ojo derecho”
Desde la sección ++Scene++ crear un ++Face Tracker++
Poner el “ojo derecho” dentro del ++Face Tracker++ arrastrandolo.
Seleccionando el “ojo derecho”, aparecerá una sección de las propiedades del objeto seleccionado en el lado derecho, hacer lo siguiente:

→ Transformations:

Scale : 0.15 X - 0.15 Y - 0.15 Z

→ ir a donde “materials” y presionar en el +
Aparecerá un nuevo material en la sección ++Assets++ como “material 0”, renombrarlo con “ojo” dando clic derecho → rename
Seleccionando el material ojo, en la sección de propiedades (lado derecho), hacemos que:

→ Shader Type: Flat

→ Shader Properties

Texture : “ojo png”
Hacemos clic derecho sobre “ojo derecho” y luego en “Duplicate”, al nuevo plano generado lo llamamos “ojo izquierdo”

Agregar movimiento a los Ojos

Abrimos el editor de parches (++Patch Editor++): En la barra del lado izquierdo, presionamos en el icono de ++Workspace++ y luego en “++Show/hide patch editor++” . Aparecerá la ventana del editor de parche, puedes reajustarlo si lo necesitas.
Agregaremos el ++face tracker++ al editor de parches arrastrandolo desde ++Scene++ hasta ++Patch Editor++.
Desde el editor de parche, agregaremos el ++Eyeball++:

→ Dentro de la ventana de ++Patch Editor++ y sin estar seleccionando ningún elemento, damos clic derecho

→ Aparecerá una ventana: la biblioteca de editores de parche

→ Escribimos ++Eyeball++ y le damos clic al resultado.

→ Aparecerá un bloque al respecto dentro de la ventana del Patch Editor.
Uno el bloque de ++face tracker con el bloque de Eyeball++, seleccionando la salida de ++face++ y arrastrandolos.
Selecciono el “ojo izquierdo” y hago lo siguiente:

→ Presiono en la flecha que se encuentra antes (o a la izquierda) de la palabra ++Position++

→ Repito el paso anterior con la palabra ++Rotation++

→ Aparecerán dos nuevos bloques en el editor de parches

→ Teniendo seleccionado el bloque de ++Eyeball++:

Unir Left Iris con “ojo izquierdo 3D Position” [1era salida del Eyeball]

Unir Left Iris Rotation con “ojo izquierdo 3D Rotation” [3era salida del Eyeball]
Repito el paso anterior con el “ojo derecho” [4ta y 6ta salida del Eyeball]
Confirmo que mi filtro este funcionando
Echar sal y pimienta al gusto
Disfrute

Diego Armando León Buitrago

student•

Gracias compañero por tu resumen.

Ilai Guevara

student•

Si tienen los ojos con una forma cuadrada como esta imagen:

Solo deben seleccionar el material de los ojos, buscar en sus propiedades a la opción Alpha Test, darle clic y listo!!

Jenny Gomez

student•

Gracias por mostrar en las imagenes como era.. :)

Alan Mata

student•

Más adelante, vi un aporte de otra chica y encontró otro método. Hizo lo mismo de seleccionar la textura pero en vez de seleccionar Alpha Test fue a Advanced Render Options>> Desmarcar la casilla de Write to Depth Buffer y listo.

Luis Carlos Jaramillo Zuñiga

student•

Gracias Platzi, gracias Meta por la beca y a los colaboradores del grupo en Telegram CarlosGonzalez/Byront/Renzo por la paciencia con nuestra impaciencia, ya pude acceder al resto del videos para generar contenido de realidad aumentada y cumplir con el reto. MUCHAS GRACIAS

Fredy Daniel Flores Lemus

student•

Eliminen la primer capa antes de guardar el ojo (la capa del ojo original), eso evitara que se vea un cuadrado cuando lo usen en el facemesh

Daniel Quiaro

student•

Hola, vengo del futuro. Me dí cuenta que los ojos tienen forma cuadrada, vuelvo a esta clase y veo que al profesor no le pasa. En los comentarios del curso + la documentación ví que se puede usar otra opción en el patch editor, peeeero, al momento de subir la cabeza los ojos dejan de seguirte. .

. ¿Por qué pasa esto?, ¿Es un bug?

Moisés Eduardo Gómez Perez

student•

A mi también me paso y una solución para que se vea menos el cuadro de los ojos es que antes de guardarlo como PNG, debes de recortar el lienzo de trabajo a el tamaño de la imagen de los ojos, para que quede justo, selecciona la capa base (en el lado derecho de photoshop) y en la barra de herramientas (cinta vertical izquierda) selecciona la herramienta de recortar y ajusta el recorte lo más que puedas a los ojos y listo!

Daniel Quiaro

student•

Lo voy a probar, muchas gracias :3

Andrés David Loaiza Zamudio

student•

Dani que cámara estas usando? Es que ando ahorrando para una y esa se ve en excelente calidad

Ricardo Aguilera

student•

es la del celular

Carlos Hermosillo

student•

No es la del celular, cuando dan la toma completa de él con la laptop, se logra apreciar la webcam. Pero desconozco cual webcam es, yo también quiero saber cuál es la que está utilizando, se ve brutal. 🤯

Camila Paez

student•

Me encanta cuando el profe no se salta ni un solo click ni un solo pasito, por que todo me sale bienn siguiendo exactamente los pasos!!!

Jaime Alejandro Torres Ocon

student•

Excelente tutorial!

Israel Ruíz Godínez

student•

¿Se podrá poner en ves de una textura un video en para el ojo? me gustaría ponerlo a prueba a ver si logro hacer un iris animado e importarlo para darle más animación.

Eloy Chávez Dev

student•

👋🏻 Holaaa, eso sería genial, no lo he intentado, pero me parece una muy buena idea ya la probaste, me encantaría saber si funciono? :D

Angely Rocio Andrade Gonzalez

student•

Intenta hacerlo con un gif, es menos pesado y te deja el mismo efecto.

Vicente García Pérez

student•

Hasta ahora todo muy cool. Saludos a todas todos! ![](

Diego Armando León Buitrago

student•

Que curso tan bacano, cuando el profesor explica todo paso a paso y uno lo sigue y salen las cosas como en el video es muy gratificante.

Christian Alejandro Vargas Menchaca

student•

Es un curso muy práctico y rápido de entender

Kely Farias

student•

super facil de seguir los pasos

Oscar Ortega Cabello

student•

👁️👁️COMO AUMENTAR EL TAMAÑO DE INTERFAZ DE TU SPARK AR: 👁️👁️ *COMO EL TEMA TOCA OJOS, ESTO AYUDARÁ A TUS OJOS... 😄 *PRIMERO FUI A PREFERENCIAS Y NO ENCONTRÉ NADA ☹️, POR DEFECTO VIENE DE ESTA MANERA:

PARA CAMBIAR ESTO HACEMOS LO SIGUIENTE:

TECLEAMOS INICIO > ESCRIBIMOS SPARK AR > ABRIMOS LA UBICACIÓN DEL ARCHIVO.
CLICK DERECHO EN EL PROGRAMA > PROPIEDADES > VAMOS A LA PESTAÑA DE COMPATIBILIDAD > ACTIVAMOS PALOMITA EN INVALIDAR EL COMPORTAMIENTO ... > SELECCIONAMOS SISTEMA > ACEPTAR
ABRIMOS EL PROGRAMA Y WALAAA:

TU OJO TE LO AGRADECERÁ. OJO ESTO APLICA PARA CASI TODO LOS PROGRAMAS, Y SÍ, PUEDES HACER ESTO A PHOTOSHOP

Francisco Javier Rodriguez Bernal

student•

En los ojos ponga 0.15 con un PUNTO

Kevin Alexander

student•

para los ojos usar de entre 0.15 a 0.18 que es lo optimo para que calce bien.

Luis Carlos Jaramillo Zuñiga

student•

La escala traté de hacerla con comas como lo tiene el allí y me marcaba error, me funciono con punto. 0.15

Jhon Garrido

student•

Que cool, me está encantando este curso. Deseo poder llegar a crear excelente y atractivos filtros.

Julian David Villegas Araque

student•

Para este caso, cómo se evidencia la rotación del objeto?

Daniel Murcia

teacher•

Se evidencia, cuando el ojo mira totalmente a a izquierda o derecha, el plano gira un poco, para generar el efecto de la forma esferica que tiene el ojo humano. Es poco, pero le da el toque de que se vea mas real ell rastreo de ojo.

Elizabeth Ramos Valerio

student•

Cuando cierro los ojos, la imagen queda sobre mi párpado

Alguien sabe como arreglarlo?

Daniel Murcia

teacher•

hola revisa la parte que se programa con parches, donde poner a cada plano con la accion de cerrar los ojos.

Daniel Murcia

teacher•

Hola

Integrar diseño de ojo en Spark AR

Conocer Spark AR

Crea tu primer filtro usando Spark AR

Descarga e instalacion Spark Ar studio

Desplazamientos en el programa

Interfaz y Face mesh

Creando un efecto en los ojos

Crear diseño de ojo en photoshop

Integrar diseño de ojo en Spark AR

Crear extracción de textura de rostro y retoque facial

Descarga de referencias de rostros de Spark AR

Crea un efecto de maquillaje en realidad aumentada

Creación de maquillaje en photoshop (boca)

Creación de maquillaje en photoshop (nariz y ojos)

Integrar maquillaje en spark ar

Publicación de pre diseño del filtro

Vincular cuentas

Cómo subir un filtro a Instagram

Crear un efecto animado en 2d

Creación de sprite sheet en photoshop

Integración de sprite sheet en spark ar y creacion de particulas

Interacción de abrir la boca con parches

Personaliza elementos de tu escena

Color de cabello

Agregar fondo

Crear marco o viñeta

Imágenes 2D sobre plano

Interacción sacudir la cabeza

Agregar interacciones al filtro

Agregar sonido

Crear instrucciones

Publicación del diseño final de tu filtro

Optimización

Cómo asegurarse de que el filtro sea aceptado

Subir filtro final Instagram

Bonus

Cierre y recomendaciones finales