javascript - examples - Three.js: instancias de malla esquelética de piel, animaciones y mezclas

three.js tutorial español

Question

Estoy trabajando en un pequeño juego multijugador que tiene una sola malla de jugador despellejado con muchos jugadores usándolo. Algunos antecedentes: he intentado cargar a través de la exportación maya y blender collada. Ambos parecen hacer referencia a algún tipo de datos de animación, pero no pude hacerlo funcionar. He intentado con el exportador maya JSON, que escupió pequeños archivos 1k con solo una línea material. Finalmente, el exportador JSON de la licuadora funcionó. Para aquellos que también intentaban cargar mallas peladas, encontré esto muy útil: Animación de modelo con huesos (exportación de mezclador) incorrectamente en three.js

Así que ahora tengo un objeto de geometry y una matriz de materials del cargador JSON.

Puedo establecer skinning=true en los materiales, crear THREE.SkinnedMesh , agregarlo a la escena, agregar animaciones a través de THREE.AnimationHandler.add ( no tengo muy claro qué hace realmente AnimationHandler ), crear un THREE.Animation , call play() y update(dt) . Finalmente tengo una sola malla y una animación en mi escena.

Ahora lo que quiero son estos ...

1. Muchas instancias : quiero que corra más de un jugador en mi escena.

   • No quiero cargar los mismos datos de malla y animación muchas veces.
   • El tiempo de animación debe ser por instancia (por lo que no todos animan en sincronización).

   ¿Debo crear muchas THREE.SkinnedMesh y THREE.Animation para el mismo modelo? ¿Dónde entra THREE.AnimationHandler ?

2. Muchas animaciones : quiero que los ciclos de inactividad / ejecución puedan reproducirse individualmente.

   AFAIK solo hay una línea de tiempo de fotogramas clave de animación. ¿Cómo funciona Three.js para que participe de esto, o tengo que hacerlo manualmente?

3. Mezcla de animación : cuando un personaje deja de funcionar y permanece inmóvil con la animación inactiva, no quiero un chasquido instantáneo de uno al otro. Me gustaría pausar la animación de ejecución y mezclar ese estado nuevamente en la animación inactiva.

   ¿Es esto posible actualmente con mallas peladas (no metamorfosis)? ¿Hay ejemplos o documentos sobre esto?

Cualquier información sería muy apreciada, incluso un pequeño empujón en la dirección correcta. No estoy buscando un tutorial completo , me gustaría obtener información de más alto nivel sobre estas características.

Felizmente podría implementar 2 y 3 , pero me gustaría obtener información / documentos descriptivos sobre el marco de tres skin y animación para ayudarme a comenzar. Por ejemplo, this no es mucho para seguir.

[ EDITAR ]
Gracias, @NishchitDhanani, esta página es bastante buena, pero no menciona múltiples animaciones o combinaciones de animaciones esqueléticas: http://chimera.labs.oreilly.com/books/1234000000802/ch05.html#animating_characters_with_skinning

Esta página dice que las animaciones múltiples siguen siendo un problema actual, pero no mucho más (se discute un poco en los comentarios): http://devmatrix.wordpress.com/2013/02/27/creating-skeletal-animation-in-blender-and-exporting-it-to-three-js/

Las respuestas actuales son ...

1. Use muchos THREE.SkinnedMesh y aún no está seguro acerca de THREE.AnimationHandler .
2. No lo se Tal vez haya una manera de modificar los fotogramas clave de inicio / final de forma manual en la THREE.Animation .
3. No implementado AFAIK. Podría intentar crear un sombreador personalizado que pueda tomar dos THREE.Animation e interpolar entre ellos.

Answer 1

@Xealgo: Hay un nuevo exportador para Maya que también fabrica huesos y animaciones. Me encantaría tenerlo hace unos meses, antes de que me obligaran a trabajar con el flujo de trabajo de Blender. :)

Aquí hay un enlace: https://github.com/mrdoob/three.js/tree/dev/utils/exporters/maya

Answer 2

A partir del lanzamiento 67 (abril de 2014), se admiten la combinación de animación esquelética y múltiples animaciones. Aún necesitará crear un SkinnedMesh para cada modelo. El AnimationHandler es responsable de actualizar (marcar) las animaciones de cada cuadro, por lo que debe llamar a la actualización sobre eso y no manualmente en cada Animation .

Vea el ejemplo recién agregado: webgl_animation_skinning_blending.html o revise algunos de los míos aquí:

Controlador de personaje básico (con mezcla de velocidad de tiempo distorsionado)

Time Warped Speed ​​Blend

Answer 3

Pude desplegar simultáneamente cuatro modelos animados diferentes creados con Blender y exportados como archivos JSON mediante la creación de mallas individuales para cada modelo utilizando funciones personalizadas con el cargador JSON. Cada uno de mis cuatro modelos tiene diferentes mallas, animaciones, texturas y números de fotogramas clave.

var loader = new THREE.JSONLoader(); 
loader.load("model_1.js", createSkinnedMeshforModel_1);
loader.load("model_2.js", createSkinnedMeshforModel_2);
loader.load("model_3.js", createSkinnedMeshforModel_3);

...

var animations = [];

function createSkinnedMeshforModel_1( geometry, materials )
{
  var myModel1, animation;
  THREE.AnimationHandler.add( geometry.animation );
  myModel1 = new THREE.SkinnedMesh(geometry, new THREE.MeshFaceMaterial(materials));
  enableSkinning( myModel1 );
  scene.add( myModel1 );
  animation = new THREE.Animation(myModel1, Model1_Animation_title, THREE.AnimationHandler.CATMULLROM);
  animations.push( animation );
  for( var i = 0; i < animations.length; i ++ )
  {
    animations[ i ].play();
  }
}


function createSkinnedMeshforModel_2( geometry, materials )
{
  var myModel2, animation;
  THREE.AnimationHandler.add( geometry.animation );
  myModel2 = new THREE.SkinnedMesh(geometry, new THREE.MeshFaceMaterial(materials));
  enableSkinning( myModel2 );
  scene.add( myModel2 );
  animation = new THREE.Animation(myModel2, Model2_Animation_title, THREE.AnimationHandler.CATMULLROM);
  animations.push( animation );
  for( var i = 0; i < animations.length; i ++ )
  {
    animations[ i ].play();
  }
}

function createSkinnedMeshforModel_3( geometry, materials )
{
  var myModel3, animation;
  THREE.AnimationHandler.add( geometry.animation );
  myModel3 = new THREE.SkinnedMesh(geometry, new THREE.MeshFaceMaterial(materials));
  enableSkinning( myModel3 );
  scene.add( myModel3 );
  animation = new THREE.Animation(myModel3, Model3_Animation_title, THREE.AnimationHandler.CATMULLROM);
  animations.push( animation );
  for( var i = 0; i < animations.length; i ++ )
  {
    animations[ i ].play();
  }
}

La función enableSkinning () es la misma que la proporcionada en http://devmatrix.wordpress.com/2013/02/27/creating-skeletal-animation-in-blender-and-exporting-it-to-three-js/

La variable "Modelx_Animation_title" es el nombre del título de la animación definido en Blender y copiado en el archivo JSON exportado por el exportador Three.js Blender.

Cuando cargo varias copias de un modelo dado, inicialmente se animan en sincronización. Sin embargo, pude hacer que se animaran fuera de sincronización pausando individualmente cada modelo por una breve duración aleatoria antes de volver a empezar a reproducir. Las animaciones para cada modelo individual se reanudan a partir del cuadro en el que se pausaron.

animations[ i ].pause();
... (random delay) ...
animations[ i ].play();

Tal vez este enfoque proporcione una solución de tipo a la pregunta 1, y posiblemente a la pregunta 2.

Con respecto a la Pregunta 2, el lanzamiento de Three.js r62 actualizó al exportador de Blender para permitir "Exportar acciones múltiples". Aunque no lo he probado, quizás esto permita cargar dos o más copias de un modelo dado mientras se especifican los títulos de animación para las diferentes acciones. Entonces podría ser posible intercambiar los modelos dentro y fuera de la vista cuando se requieren diferentes acciones.

Si eso funciona, entonces una posible solución a la Pregunta 3 podría ser crear una acción animada adicional dentro de Blender que mezcle el modelo de un estado activo a su estado inactivo.