Guía para Implementar LipSync en Web mediante un audio/texto
Descripción General
Esta guía tiene como objetivo explicar los requerimientos y el flujo de trabajo necesario para generar modelos optimizados para la sincronización labial de audio mediante audio o texto que el programador web o incluso cliente ingrese.
[Video no disponible: Screen Recording 2025-02-06 at 13.32.01.mov — removido durante la migración. Las áreas correspondientes ya fueron notificadas.]
PRUEBA 01 - PRIMER ACERCAMIENTO
Alcances
Requerimientos de Modelado
Se debe entregar un archivo .glb que contenga los fonemas comunes. Actualmente, no existe una librería estándar entre Web y arte 3D, por lo que estos fonemas podrían cambiar en el futuro.
Fonemas y sus Representaciones
- A: Boca abierta (Ejemplo: "ah")
- B: Boca cerrada (Ejemplo: "m", "b", "p")
- C: Sonidos dentales (Ejemplo: "s", "z")
- D: Sonidos labiodentales (Ejemplo: "f", "v")
- E: Boca semiabierta (Ejemplo: "e")
- F: Boca estirada (Ejemplo: "ee")
- X: Boca en reposo
Comparación: Blend Shapes vs. Joints
Blend Shapes
✅ Ventajas:
- Transiciones suaves entre expresiones faciales.
- Ideal para sincronización labial precisa basada en fonemas.
- Más fácil de integrar con herramientas de lip sync automatizadas como Rhubarb Lip Sync.
❌ Desventajas:
- Mayor uso de memoria si el modelo tiene muchas variaciones.
- Requiere un modelo 3D con todas las formas de la boca predefinidas.
Joints
✅ Ventajas:
- Mayor flexibilidad y reutilización en distintos modelos.
- Requiere menos memoria, ya que solo almacena la estructura ósea y la deformación se genera dinámicamente.
❌ Desventajas:
- Más difícil de sincronizar con fonemas de manera precisa.
- Puede ser más complejo de integrar en motores gráficos y necesita ajustes detallados.
Recomendación
Se recomienda el uso de blend shapes para facilitar la implementación. Los blend shapes deben ser nombrados según los fonemas que representan. El programador web se encargará de asignarles los valores correspondientes.
Flujo de Trabajo de Programador Web
-
Conversión de texto a audio
- Convertir texto a audio, por ahora se tiene contemplado ElevenLabs, una herramienta de síntesis de voz basada en inteligencia artificial que permite convertir texto en audio y viceversa.
-
Generación del archivo JSON del modelo con el análisis del audio
- Convertir el modelo a JSON, un formato que contiene información sobre el análisis del audio y las posiciones de la boca requeridas para la animación (actualmente se hace mediante el programa Rhubarb Lip Sync)
- Rhubarb Lip Sync GitHub
-
Asignación de valores a los fonemas
- Los fonemas identificados en el JSON con el audio se vinculan a sus respectivas posiciones de boca en el modelo 3D, el programador asignara valores a estos fonemas para poder identificarlos mediante código
-
Implementación del código para la sincronización
- Se desarrolla un sistema que detecta en qué momento un fonema está activo en el audio para encender la expresión facial correspondiente.
- Al salir del rango de un fonema, la expresión se desactiva.
Comentarios generales o extras de la investigación.
PENDIENTE : Revisar el suavizado entre cambios de blendshapes o intensidades segun que tan fuerte se escucha en el audio , podría tomarse valores de 0 a 1 de los blendshapes comparados con los decibeles del audio.
Animación corporal y facial del idle más natural y otra pra cuando habla
PRUEBA 02 - DEMO OXXO
Visemas en Ready Player Me
15 visemas incluídos + blendshapes de labios, cejas, etc
En animación y lipsync profesional, hay tres enfoques comunes:
- El sistema reducido (8–12 visemas) → más rápido, más barato, pero menos preciso.
- El sistema medio (12–15 visemas, como el que tienes) → balance entre realismo y eficiencia.
- El sistema extendido (20+ visemas) → más preciso, usado en animación muy detallada o captura facial.
La siguiente lista son los visemas que trae por default el avatar de ready player me, con estos se hicieron las primeras pruebas.
| Visema | Letras/fonemas que activa | Sonido que representa | Ejemplo en español | Ejemplo en inglés | |
|---|---|---|---|---|---|
| 1 | SIL | — | Silencio/reposo | — | — |
| 2 | PP | M, B, P | Labios cerrados | papá, meme | pop, map |
| 3 | FF | F, V (en inglés), en español solo F | Dientes superiores tocando labio inferior | foca, fruta | fun, free |
| 4 | TH | TH (inglés) — sin equivalente directo en español | Lengua entre dientes | — | think, that |
| 5 | DD | T, D | Lengua detrás de dientes superiores | dado, tarde | dog, dad |
| 6 | KK | K, G (dura), C (dura) | Parte posterior de la lengua contra el paladar blando | casa, queso, gato | cat, go |
| 7 | CH | CH, J (en inglés “judge”) | Aire forzado entre lengua y paladar | chico, chile | chair, cheese |
| 8 | SS | S, Z, C (suave), X (como /ks/) | Aire entre dientes y lengua | sí, casa | see, pass |
| 9 | NN | N | Lengua en el paladar con paso nasal | no, nube | no, net |
| 10 | RR | R (simple y doble) | Vibración de lengua | ratón, carro | red, run |
| 11 | AA | A | Boca muy abierta, lengua baja | casa, pata | car, father |
| 12 | E | E | Sonido medio abierto | mesa, perro | bed, set |
| 13 | I | I, Y (vocálica) | Sonido cerrado | sí, vino | see, machine |
| 14 | O | O | Labios redondeados, sonido medio cerrado | sol, loco | go, more |
| 15 | U | U, W (vocálica) | Labios redondeados y cerrados | tubo, luz | blue, food |
PRUEBA 02 - DEMO OXXO - PARTE 02
- En la primera prueba se animaron las cejas y ojos a través de los blendshapes que ya tría el modelo, había un clip que la idea era que se reproduciera en loop mientras se ejecutaba el LypSync en tiempo real, pero no se logró, se ejecutaba el LypSync pero no el clip de animación, creemos que porque solo podía estar llamando “una información de blendshapes a la vez” y era para el LypSync, entonces se hizo un rig facial para poder animar las cejas y ojos y así sí funcionó.
- Se hizo una limpieza de los visemas, para que fueran más acorde al español, su intensidad y se agregó un “pivote” que sería el que siempre estuviera activado para que el personaje no cerrara la boca por completo, ya que se veía extraño el salto entre palabras al hablar.
- Los visemas finales y el archivo final se encuentran en este link:
https://drive.google.com/drive/folders/1fekkRFdYx5wJumM1JyoI9sxI6Of8u6Tu
Enlaces de descarga
Referencias
https://codehub.inmersys.xyz/documents/investigacion/Nuevas%20Tecnolog%C3%ADas/speeach/avatars
https://codehub.inmersys.xyz/documents/investigacion/Nuevas%20Tecnolog%C3%ADas/speeach/LipSync
https://codehub.inmersys.xyz/documents/investigacion/Nuevas%20Tecnolog%C3%ADas/speeach/voicetotext
Comentarios
Ventajas
Facilita el ingresar texto en tiempo real sin necesidad de pasar por flujo de animación de arte 3D
Desventajas
Hasta ahora no se ha investigado una forma de hacer un blend entre los fonemas por parte de Web, por lo que el resultado se ve robótico.
Ubicación Proyecto
La ubicación del proyecto en el servidor.
Elaboró
Laura Soto
Cassandra Rodríguez