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

2 minuto(s) de lectura

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.

馃敟 Seguro tambi茅n te interesa: mejores libros de programaci贸n聽禄 programas para desarrolladores聽禄 mejores lenguajes de programaci贸n聽禄 port谩tiles para programadores聽禄 mejores auriculares para programadores聽禄 ratones verticales para trabajar聽禄 componentes de PC para programadores聽禄 mejores regalos 1 - 馃摝聽禄 mejores regalos 2 - 馃巵

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 鈥榚squeleto鈥 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 鈥榠lustraci贸n鈥, junto al grupo 鈥榚squeleto鈥. Este es el grupo donde puede poner todos los caminos para su ilustraci贸n.

    • Acoplar todos los subgrupos para que 鈥榠lustraci贸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
    
  4. Incruste el esqueleto de muestra en el grupo 鈥榚squeleto鈥 en su ilustraci贸n moviendo las articulaciones.

  5. Exporte el archivo como un archivo SVG.

  6. 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

馃敟 Seguro tambi茅n te interesa: C贸mo aprender Python en 2020, 馃 鈻 C贸mo aprender aprendizaje autom谩tico o machine learning en 2020 馃, 鈻 M谩s de 200 de los mejores tutoriales de aprendizaje autom谩tico, PNL y Python