Pose Animator: Una herramienta de animación SVG en tiempo real que utiliza modelos TensorFlow.js

Pose Animator es una librería capaz de tomar una ilustración vectorial en 2D y animar las líneas de sus curvas en tiempo real en función del resultado de reconocimiento del reconocimiento realizado por las librerías PoseNet y FaceMesh; se ha tomado prestada la idea de las animaciones basadas en esqueletos creadas mediante gráficos a través de ordenador.

En la animación de esqueletos, un personaje se representa a través de dos partes: Una superficie es utilizada para dibujar el personaje y basándose en el conjunto de la jerarquía de los huesos conectados, esa idea es utilizada para poder animar la superficie.

Mediante Pose Animator, la superficie está definida por las rutas de vectores 2D en los archivos SVG de entrada. Para la estructura ósea, Pose Animator proporciona una representación de plataforma predefinida (jerarquía ósea), diseñada en base a los puntos clave de PoseNet y FaceMesh.

La postura inicial de esta estructura ósea se especifica en el archivo SVG de entrada, junto con la ilustración del personaje, mientras que las posiciones óseas en tiempo real se actualizan por el resultado de reconocimiento de los modelos ML.

Demostraciones

Demostración 1: alimentación de la cámara

La demostración de la cámara anima un avatar 2D en tiempo real desde una transmisión de video de la cámara web.

Demostración 2: imagen estática

La demostración de imagen estática muestra el avatar posicionado a partir de una sola imagen.

Crea y prueba

Instale dependencias y prepare el directorio de compilación:


yarn


Para ver los archivos en busca de cambios e iniciar un servidor de desarrollo:


yarn watch


Soporte de la plataforma

Las demostraciones son compatibles con Desktop Chrome y iOS Safari; también debería ejecutarse en Chrome en Android y potencialmente en más navegadores móviles Android, aunque todavía no se ha probado el soporte.

Anima tu propio diseño

1. Descargue el esqueleto SVG de muestra.

2. Cree un nuevo archivo en el editor de gráficos vectoriales de su elección. Copie el grupo llamado ‘esqueleto’ del archivo anterior en su archivo de trabajo. Nota:

   • No agregue, elimine ni cambie el nombre de las uniones (círculos) en este grupo. Pose Animator se basa en estos caminos nombrados para leer la posición inicial del esqueleto. La falta de articulaciones provocará errores.
   • Sin embargo, puede mover las articulaciones para incrustarlas en su ilustración. Ver paso 4.
3. Cree un nuevo grupo y asígnele el nombre ‘ilustración’, junto al grupo ‘esqueleto’. Este es el grupo donde puede poner todos los caminos para su ilustración.

• Acoplar todos los subgrupos para que ‘ilustración’ solo contenga elementos de ruta.
• Las rutas compuestas no son compatibles en este momento.
• La estructura del archivo de trabajo debería verse así:


[Layer 1]
|---- skeleton
|---- illustration
|---- path 1
|---- path 2
|---- path 3


1. Incruste el esqueleto de muestra en el grupo ‘esqueleto’ en su ilustración moviendo las articulaciones.

2. Exporte el archivo como un archivo SVG.

3. Abra la demo de la cámara Pose Animator. Una vez que todo se carga, suelte su archivo SVG en la pestaña del navegador. Deberías poder verlo cobrar vida: D