Análisis de Proyecto - Caso BGCA - Filtro + Web 3D + IA
Descripción General
Este documento analiza el desarrollo durante el proyecto tomando en cuenta desde la propuesta , implementación inicial, ajustes y resultado final.
Pruebas y plan iniciales
Al principio se investigo un elemento de lens
pero se descartó rápidamente al concluirse pesado para la experiencia.
Se realizó una prueba de estrés para validar cuantos personajes animados se podía agregar a la experiencia sin que se trabara o afectara el performance del filtro.
se concluyo que 5 personajes al mismo tiempo funcionaba bien la experiencia. (se agregaron hasta 7, pero se considero la implementación de otros elementos)
Búsqueda de assets
La idea era elegir personajes ya riggeados para solo hacer limpieza faltante de rig y pasar a animación, ya que el presupuesto era limitado, por lo que se sacrifico en esta parte el que se vieran como adultos en ámbito profesional al encontrarse unos con rig en atuendo casual.
Para los personajes de atrás la idea era poner 3 áreas 
- personajes principales en medio
- personajes con menos topología sin moverse
- personajes optimizados de fondo
La idea era ir haciendo pruebas y en base a eso tener una tarea de pase de optimización para los personajes.
Se dieron dos opciones en cuanto a animaciones
- animaciones desde 0: más tiempo, más modificaciones personalizables
- mixamo: menos tiempo, menos modificaciones personalizables
Se eligió la opción de mixamo
En total fueron 4 animaciones, dos de caminado y dos de idle.
Igualmente se planeaba tener un domo tipo autocompara sin embargo al ser un espacio oscuro y para ahorrar tiempo y poligonaje se concluyo un cubo unlit negro, esto después se cancelo debido que al implementarlo, se notaban los bordes del cubo dentro de la experiencia
En cuanto a partículas se decidió que 3D las haría debido a la carga de trabajo que tenía WEB
FLUJO 3D CON WEB
El flujo de trabajo establecido consistió inicialmente en que el equipo de WEB desarrollara toda la parte de la base del marcador, mientras que el equipo de 3D se enfocaba en la creación de escenarios y personajes, realizando pruebas de manera independiente en Lens Studio.
Después se manejo un storyboard donde se especificaba que assets estaria animando el programador.
Posteriormente, los assets eran integrados por WEB en lens, seguido por testing para validar que todo se viera correctamente.
Ante la identificación de áreas de mejora en la comunicación entre ambos equipos, se implementó una dinámica de reuniones internas más frecuentes para tener una sincronización de animaciones y detalles visuales más alineado a lo acordado.
Propuesta de Figma y Story Board
Conceptos iniciales desde comercial y diseño
Se planteaba que se sintiera más lleno, con un mapa en el centro, circulos en el piso, que las personas tuvieran movimiento y representaran diferentes profesiones.
- El usuario esta en un punto estático, ves como aparece una puerta y entra a la habitación donde se muestran a varias personas que representan a los niños que crecieron y se convirtieron en profesionistas gracias al programa de la fundación.
Primera implementación
Por temas de rendimiento sufrió muchas modificaciones y cancelaciones de tarea respecto a la propuesta inicial.
- Se utilizaron idles muy leves para los personajes de fondo.
- Se quito la textura del piso y el color se dejo oscuro.
- Se puso una luz en tiempo real para la silueta de luz calida de la puerta en el piso.
- Se redujo el numero de personajes del fondo para mejorar la estabilidad de la experiencia.
- En cuanto a los personajes, se compró un asset de personas low poly y otro asset con modelos que contenían rig. Se buscó que fueran parecidos o se vieran profesionales.
[Video no disponible: OPPO_PrimerEscenarioComprimido.mp4 — removido durante la migración. Las áreas correspondientes ya fueron notificadas.]
Modelo 3D
Textimonios - Three.js
Aqui se hizo bake en Blender de la iluminación. Se quitó a los personajes de fondo y ase agregaron los personajes con Rig, además se les añadió un outline.
Ajustes
Se cambiaron varias cosas para retomar la narrativa de la experiencia aunque no pueda ser 100% igual a la propuesta inicial se buscaba mantener la esencia de lo que quiere comunicar.
General - Escenario
Paleta de color :
- La paleta inicial era un azul muy hacia los morados (por ende más oscuro) , cuando la identidad de cliente maneja azules más hacia los verdes. Se ajustó el color de los elementos para hacerlos mas brillantes. :color: Recuerda considerar la identidad de cliente al hacer los escenarios, esto ayuda a brandear el escenario de manera sutil.
Domo :
- Evitar 100% negro , daba una sensación de inmensidad y vacio, se reemplazo por un azul oscuro en un material Unlit para que no fuera afectado por la luz.
Piso y puertas :
- Se retomó la idea del piso con los circulos para mostrar la conexión entre las personas. Con una diferencia, esta vez para hacer más dinamica la experiencia , serian animados. Por ende es una geometria separada con un truco para simular el “dibujado“ de lineas entre circulos.
- Setup del modelo de lineas (es un solo objeto), Marisol (Web) nos ayudó a implementar la animacíon. La idea es bajar el offset de la textura para que llegara a la parte “sólida” para simular que se unen entre sí.
-
Las puertas tenian un mapa de normales para los rectángulos. Hay dos casos en los que esto se puede manejar dependiendo de como se esté dando el proyecto.
- A veces es complicado reemplazar un FBX interativo, si es probable que se ajuste, se pueden manejar los detalles con un mapa de normal. La desventaja es que la textura puede agregar más peso.
- Como otra opción y si es necesario actualziar el FBX, se puede agregar el detalle de los relieves cuadrados en el modelo como geometria, usualmente las texturas pesan más que agregar unas pocas caras a la geometria.
- Piso - Se acortó el tamaño y se cambio a un cilindro para ocupar más UV en la textura (mas espacio, mejor resolución) quedo en un área más reducida, ya que a los extremos no llegaba muchas luz.
- Se añadió otra textura para un lijero Fog falso
Particulas:
- Se cambio el color de las partículas y el dissolve a azul.
Door - Lens Studio :
-
Se compraron otros asset de personas Low poly que representaran mejor las profesiones , ya que los primeros se veian como personas mas casuales.
-
De estos assets que se compraron, se eligieron los 4 principales, se les añadio en low poly algunos elementos para hacer referencia a su profesión como un portafolios y un cabestrillo de pintor.
-
Para las personas que iban a ser planos. Se buscó otros modelos gratuitos de mid y high poly que ya estuvieran posados, se les agregó otros elementos referentes a profesiones, y se les aplicó un modificador de “Decimate“ en Blender para lograr el estilo de caras con hard edges low poly.
-
Se hizo un despliegue de UVs con el método “Project from view“
-
Se aplicó una textura con degradado para darle un toque a los personajes.
-
Se realizaron tres niveles de planos.
- Planos cercanos, tendrían el circulo
- Planos medios - Grupo de personas, con una iluminación comenzando a oscurecer
- Planos lejanos - un grupo de personas con iluminación más oscura, en el atlas de textura ocupan un espacio más pequeño ya que no necesitan mucha resolución.
-
En cuanto al acomodo de planos, se dio variedad de posición en base a la vista del usuario.
Testimonios - Three.js
- Se usó de base el escenario de Lens, pero se hizo otro bake por que los personajes estaban a acomodados frente a la mesa.
- Aquí se contaba la historia de ganadores anteriores, así que mejor se buscó que los modelos se parecieran al as personas de las fotografías.
Proceso de Elaboración de personajes con IA.
-
Se nosproporcionó la foto de primer plano de las personas. Con ayuda de Chat GPT se generaron fotografias de cuerpo completo.
-
Con estas fotos de cuerpo completo, se llevó a Hitem3D: generador de modelos 3D con IA , esta página cuenta con 100 creditos para una cuenta gratuita. Se pueden usar correso temporales para generar varias cuentas Email temporal desechable - Temp Mail.
-
-
Sin embargo descubrimos que al pasarla por la IA los rostros no siempre salian bien y hay algunas poses que no lee bien. Asi que se generaron otras poese donde se vieran mas definidos los brazos, el cuello y los pies.
-
-
Los rostros se sacaron por separado, se pidió a Chat gpt que generaran una foto de las personas sonriendo con la boca cerrada ya que los dientes salian muy raros.
-
Ya en blender se unió la cabeza y el cuerpo. Primero se limpió:
- haciendo merge de los vertices.
- Se borró las partes que no se necesitaban.
- Se aplico un primer Decimate a 0.1
- Se pusieron las caras duras / flat
- Se aplicó otro Decimate
- Para el caso de partes especificas que se quierna reducir más, se aplicaron los Vertex Group y se aplicó el modificardor Decimate usando la seleccion del vertex group creado.
- Despues se generó el despliquege de UVs proyectado desde la vista.
- Para las animaciones se crearon dos blendshapes, uno para la respiracion y otro para un movimiento de giro de cadera y cabeza.
Tabla de iteraciones
| Kelly | Perry | Natalia | Mona | Bethany |
|---|---|---|---|---|
| 1993_zimmerman.jpg | 1969_ludy.jpg | 2014_Natalia.jpg | 2010_Dixon.jpg | 2020_Bethany.jpg |
| KellyZimmerman_cuerpoCompleto.png La primera pose de kelly parecia mas timida / infantil | Perry_Joven_CuerpoCompleto.png No se distinguia el cuello de la cabeza | NataliaLynch_CuerpoCompleto.png | MonaDixon_CuerpoCOmpleto.png No se le ve el cabello y la IA lo interpretó como un abuelito | bethany cuero compleo.png |
| kelly pose 2.png | perry pose completa.png | natalia cuerpo completo v2.png | ||
| Kelly_Pose.pngimage-20260407-162608.pngimage-20260407-162722.png | image-20260407-163643.png | image-20260407-162553.png | ||
| kelly_face.png | perry cara.png | natalia cara.png El cabello en el cuerpo completo lucia bien, aqui solo queriamos sacar su rostro, por eso el cabello recogido. | mona primerp lano.png | bethany.png El cabello de la primera iteracion lucia bien, aqui queriamos sacar su rostro solamente no toda la cabeza o cabello |
| image-20260407-163427.pngimage-20260407-163444.png | image-20260407-163247.pngimage-20260407-163300.png | image-20260407-163319.pngimage-20260407-163336.png | image-20260407-163354.pngimage-20260407-163411.png En las chicas ayudo marcar las pestañas como picos para hacerlas ver mas femeninas image-20260407-163751.png | image-20260407-163508.pngimage-20260407-163525.png |
Producto Final
Conclusiones
- Se recomienda tener máximo dos personajes animados con rig.
- No considerar animaciones de mixamo de personajes principales , calcular horas para animaciones con modificaciones especificas.
- Considerar más animaciones básicas para objetos : posición , rotación, uvs scroll.
- Considerar en la planeación que en narrativa las animaciones las va a implementar WEB. Ej. Sincronización de animaciones lineales como la caminta del niño, luego la transición entre niño a adulto.
- Considerar una implementación base de partículas por parte de WEB antes de empezar a trabajar en ellas (3D), para evitar problemas/bugs de velocidad aparición. Pulir con Marisol dandole feedback.
- Considerar siempre bake de iluminación en todos los ambientes. En caso de objetos aislados, agregar el AO en el mapa del albedo tambien.
Ventajas
La IA nos permite generar modelos rapidos, en cuanto a cuerpo completo, e imagenes de personas.
Al ser Low poly y estaticos o con lijeros movimeintos puede ser una buena opción para generar modelos.
Desventajas
Las particulas siguen siendo un reto, ya que su implementacion difire de como se suelen hacer en Unity, en Lens Studio es mediante nodos, no es tan amigable para los no programadores. Todavia tenemos que depender de Programacion Snap chat.
La IA para generar modelos puede costar muchos créditos, los rostros salen algo raros si no se usa una foto con bien contraste y una pose definida, las sonrisas mostrando los dientes son muy conflictivas.
Falta hacer pruebas sobre si puede generar modelos en pose T con buena topologia para rigugear y animar.
Elaboró
Diana Delfino
Laura Soto