Proyecto final - Animación Avatares e importacion de JSON

En este proyecto se pretende analizar las formas de animación de avatares por medio de WebGL. Actualmente existen una serie de aplicaciones móviles que te permiten ver avatares y aplicarles diferentes movimientos como caminar, correr y entre otros.

Entre las diferentes aplicaciones que aplican esto se destacan dos en particular:

• Avatar SDK es un API en el cual puedes subir una foto de tu rostro, te crea la visualización 3D de la misma y poder agregarle gestos faciales.
  
  
• Avatar Lab es un proyecto basado en Three.js y Sea3D en donde podemos ver el modelo de una persona y a través de un panel se puede seleccionar la acción que se quiere hacer con el modelo.
  
  
• Animation Skinning Blending es un ejemplo hecho en Three.js que al igual que el anterior, se tiene un modelo capa de cambiar su animacion a travez de un panel.
  
  

Analizando el contenido de Animation Skinning Blending me pude dar cuenta que para las animaciones se manejan a través de programas externos y son importadas a WebGL para su visualización.

Para este proyecto se estudiara el caso de Blender, una herramienta gratuita de animación y creación de personajes 3D gratis y de fácil acceso.  Dentro de esta herramienta el archivo generado se puede exportar a varios formatos (obj, dae, json). Se utilizara la siguiente animación realizada:

El archivo JSON es el que mas se puede entender en donde en su estructura encontramos los vértices que componen cada una de las caras, adicionalmente los vértices que se mueven en cada una de las poses de la animación e información del archivo generado.

Gracias a Three.js y WebGL, se puede implementar un Loader para cargar no solo los vértices de la figura sino tambien cargar la animación de la misma. Sin embargo, el archivo JSON puede ser demasiado pesado y retrasa la carga de la pagina debido a la cantidad de puntos en las animaciones ya que estas muestran el movimiento de cada uno de los vértices de la animaciones en cada uno de los diferentes frames.  Con esto se pretende buscar una forma de minimizar el tamaño del archivo (no descomprimiendo el archivo) buscando otros modos de representar las trayectorias de los vértices en la animación.

En el siguiente link se puede descargar los archivos de Blender con si respectivo JSON (Un archivo es el monkey y otro un personaje ya mas trabajado)

Los tiempos de trabajo se encontraran aca.

Entrega Final

Tras varias pruebas con los diferentes modelos encontrados se pudo concluir en primera instancia que frente a las animaciones complejas de avatares en WebGL, todos los ejemplos mencionados se apoyan e una librería adicional (por lo general Three.js) para no solo generar las animaciones sino también para generar el objeto.

Con base a lo concluido anteriormente, se procedió a mirar detalladamente el proceso de carga por medio de Three.js. Esta librería tiene consigo dos tipos de loades de JSON que nos permitirán obtener los objetos con sus respectivas animaciones:

• BufferGeometryLoader: Carga un JSON con el formato que siempre se a manejado en WebGL. Este formato es una representación eficiente de una geometría de malla, linea o punto que reduce el costo de pasar los datos a la GPU. Suele incluir información de las posiciones de los vértices, indices de caras, normales, colores indices de texturas o atributos personalizados.
  
  
  
• JSONLoader: Este loader carga la información de un JSON mas simplificado. Como información adicional brinda el conteo total de vértices únicos, las caras y sus normales, indices de textura y también atributos personalizados.
  

En blender contamos con un plugin en python capaz de exportar los diseños que hagamos a un formato JSON ( ya sea BufferedGeometry o Geometry).

A simple vista la información que brindan ambos loaders parece ser igual, cosa que a mi también me engaño. Sin embargo, como mencione anteriormente, el archivo que carga el JSONLoader es mas simplificado ya que por lo general algunos vértices de BufferGeometry suelen estar duplicados. Adicionalmente, el numero de normales es mucho mayor debido a que por lo general en un vértice se conectan mínimo 3 caras y cada una de estas aporta una normal diferente, esto quiere decir que el numero mínimo de normales que se producen en la geometría seria igual al #Vertices*#CarasConectadas.

Ahora si hablamos en términos de animación, el BufferGeometry no es capaz de leer los cambios de cada uno de los puntos a lo largo del tiempo debido a que los medios de exportación de los programas encargados ignoran por completo exportar la animación. Por otra parte, estos programas al exportar como una geometría para cargar en el JSONLoader, estos morphTargets si son exportados correctamente.

Hasta este punto, el formato de exportación adecuado seria el Geometry para cargar en el JSONLoader pero antes debo explicar los dos metodos de animacion en Blender:

• Key Framing: A partir de el estado original del objeto, se procede a crear n numero de llaves en donde cada una de ellas contiene una modificación del objeto; es decir, si tenemos una esfera en su estado de reposo, en la llave 1 tendremos la esfera estirándose simétricamente en el eje X y en la llave 2 tendremos a la esfera estirándose simétricamente en el eje Y. Cada una de estas llaves tiene un valor entre 0 y 1 donde 0 representa el estado de reposo y 1 representa la modificación total. Entonces en la animación por Key Framing, en los diferentes tiempos de la animación se debe especificar el valor de cada llave para así generar una animación.
  
• Rigging/Posses: Este método de animación puede ser el mas común o el que la gente cree que se utiliza mas. En primer lugar a nuestro objeto se le va a crear una especie de "esqueleto" con el cual podremos manejar mejor cada una de sus partes y tener mejor precisión y naturalidad en sus movimientos. Posteriormente, la linea de tiempo de animación se divide en n instantes en donde cada instante tendrá una pose diferente de dicho esqueleto. Al definir cada una de las poses en sus diferentes instantes de tiempo, tendremos la animación deseada; Blender da la opción de ver la animación con diferentes modos de interpolación:  
• Constante: No hay interpolación, pose a pose.
• Linear: Hay una interpolación linear entre la pose A y la pose B.
• Beziel: Se aplica una interpolación suavizada entre A y B.

En este punto las animaciones deseadas deben realizarse en forma de poses para que únicamente en el JSON aparezcan los indices de los vértices en su respectiva posición en los diferentes instantes de tiempo.

La animación del vaquero caminando se exporto de dos formas totalmente diferentes tanto por morphTargets como por poses para ver cual es la forma mas optima de exportar un JSON.  Al comparar los archivos, se puede observar que el archivo exportado con morphTargets es 36 veces mas pesado que el archivo exportado con poses.

Esto da una clara idea de que a la hora de cargar un JSON en WEBGL por medrio de Three.js, es mucho mas recomendable trabajar la figura por poses y no por KeyFrames.

Los tiempos de trabajo se encontraran aca y el proyecto se encuentra en este link.

Blibliografia:

https://www.youtube.com/watch?v=JKB4aPUkCJw&t=762s

https://www.youtube.com/watch?v=JqmjK-4jh8M

https://www.youtube.com/watch?v=f3Cr8Yx3GGA

https://www.youtube.com/watch?v=NtRrYUAd8rs

https://threejs.org/docs/#api/loaders/JSONLoader

https://threejs.org/docs/#api/loaders/BufferGeometryLoader