Three.js - animated skinned meshes, instances, and seamless blending

Question

Three.js - animated skinned meshes, instances, and seamless blending

I am currently developing a small multiplayer game that features a single skinned player mesh utilized by multiple players. Some Background: I have experimented with loading via Maya and Blender Collada export, both of which seem to reference some sort of animation data, although I encountered difficulties in getting it to work. After trying the Maya JSON exporter (which only generated tiny 1k files with a material line), I eventually found success with the Blender JSON exporter. For those also struggling with loading skinned meshes, I came across this helpful resource: Model with bones animation (Blender export) animating incorrectly in three.js

As a result, I now possess a geometry object and a materials array from the JSON loader.

I can enable skinning=true on the materials, create a THREE.SkinnedMesh, add it to the scene, incorporate animations through THREE.AnimationHandler.add (I'm uncertain about the role of the AnimationHandler), create a THREE.Animation, invoke play() and update(dt). Consequently, I have a singular mesh with an animation playing within my scene.

Now, here are my objectives...

Multiple instances - I desire to have more than one player model moving around in my scene.
- I do not wish to load the same mesh and animation data repeatedly.
- The animation time should be specific to each instance (thus preventing them from all animating simultaneously).
Should I create numerous THREE.SkinnedMesh and THREE.Animation for the same model? How does THREE.AnimationHandler factor into this?
Multiple animations - I want idle/run cycles that can be independently played.

To my knowledge, there exists only a single timeline of animation keyframes. How does Three.js handle partitioning this for me, or is manual intervention required?
Animation Blending - To avoid abrupt transitions when a character halts running and shifts into the idle animation, I aim to pause the run animation and blend that state back into the idle animation.

Is this functionality achievable with skinned meshes (excluding morph targets)? Are there any examples or documentation available on this topic?

Any insights would be highly appreciated, even if just directing me towards the right path. I do not seek a comprehensive tutorial; rather, I desire some overarching information regarding these functionalities.

I could potentially implement 2 and 3, but I require informative/descriptive documents pertaining to the Three.js skinning and animation framework to initiate the process. For instance, this offers limited guidance.

[EDIT]
Thanks to @NishchitDhanani, while the provided link proves beneficial, it lacks details on multiple animations or blending skeletal animations:

This page suggests that handling multiple animations remains a current challenge but provides limited insight (discussed briefly in the comments):

The current responses include...

Utilize many THREE.SkinnedMesh, still uncertain about THREE.AnimationHandler.
Unknown. Potentially adjust the start/end keyframes manually in the THREE.Animation.
Not presently implemented to my knowledge. Possible exploration involves creating a custom shader capable of handling two THREE.Animations and interpolating between them.

javascript animation opengl-es three.js skeletal-mesh

Answer 1

Answer №1

Starting from release 67 in April of 2014, both skeletal animation blending and the ability to use multiple animations have been incorporated into the system. Each model still requires a SkinnedMesh to be created. The AnimationHandler takes care of updating the animations every frame, so it is recommended to call update on that instead of manually updating each Animation.

Take a look at the recent example: webgl_animation_skinning_blending.html, or explore my own demos:

Basic Character Controller (featuring time-warped speed blend)

Time Warped Speed Blend Demo

Answer 2

Starting from release 67 in April of 2014, both skeletal animation blending and the ability to use multiple animations have been incorporated into the system. Each model still requires a SkinnedMesh to be created. The AnimationHandler takes care of updating the animations every frame, so it is recommended to call update on that instead of manually updating each Animation.

Take a look at the recent example: webgl_animation_skinning_blending.html, or explore my own demos:

Basic Character Controller (featuring time-warped speed blend)

Time Warped Speed Blend Demo

Answer 3

Answer №2

I successfully deployed four unique animated models using Blender and JSON files. By creating individual skinned meshes for each model and utilizing tailored functions with the JSON loader, I was able to incorporate different mesh designs, animations, textures, and keyframe counts for each model.

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();
  }
}

The enableSkinning() function is based on a tutorial by DEVMATRIX.

The "Modelx_Animation_title" variable corresponds to animation titles defined in Blender and exported into the JSON file.

To sync or desynchronize animations of multiple copies of a model, I implement a pause tactic followed by resuming playback from the paused frame.

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

Exploring Three.js release r62's feature allowing "Export multiple actions" from Blender might provide insights into managing different animations for multiple instances of a single model.

A potential solution to question 3 could involve creating an additional animation within Blender that transitions the model from an active to idle state.

Answer 4

I successfully deployed four unique animated models using Blender and JSON files. By creating individual skinned meshes for each model and utilizing tailored functions with the JSON loader, I was able to incorporate different mesh designs, animations, textures, and keyframe counts for each model.

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();
  }
}

The enableSkinning() function is based on a tutorial by DEVMATRIX.

The "Modelx_Animation_title" variable corresponds to animation titles defined in Blender and exported into the JSON file.

To sync or desynchronize animations of multiple copies of a model, I implement a pause tactic followed by resuming playback from the paused frame.

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

Exploring Three.js release r62's feature allowing "Export multiple actions" from Blender might provide insights into managing different animations for multiple instances of a single model.

A potential solution to question 3 could involve creating an additional animation within Blender that transitions the model from an active to idle state.

Answer 5

Answer №3

@CreativeCoder: I just discovered a new tool for exporting from Maya that handles bones and animations smoothly. It would have been so helpful to have this a few months back when I was stuck using Blender instead. :)

Check it out here: https://github.com/mrdoob/three.js/tree/dev/utils/exporters/maya

Answer 6

@CreativeCoder: I just discovered a new tool for exporting from Maya that handles bones and animations smoothly. It would have been so helpful to have this a few months back when I was stuck using Blender instead. :)

Check it out here: https://github.com/mrdoob/three.js/tree/dev/utils/exporters/maya

Three.js - animated skinned meshes, instances, and seamless blending

Answer №1

Answer №2

Answer №3

Similar questions

Testing a custom Angular directive that encapsulates the functionality of SlickGrid

Using jQuery and regex, calculate the sum of the numbers located at specific positions within the content of div classes

creating dynamic data objects in ajax calls

Store fresh JSON information in a newly created JSON document

The back div is not retained on the second animation when flipping the card

Slider Footer Player for Rdio

Animate elements in Vue.js when navigating between pages is a great way to enhance user

Sliding panel for horizontal overflow

Ways to obtain an attribute through random selection

Continuously converting methods recursively until the array is fully processed

Steps to add an item into an array and access specific properties of that item within the array:

An AJAX error occurred: Resource identified as a script but transferred with MIME type text/json

Securing a downloadable file with a password on a webpage

Is there a way to transfer FormsAuthentication.SetAuthCookie across various layers from Data Access Layer Class to WebService and then to Javascript?

How to generate flexible arrays using an established array?

Exploring the process of updating initialState within react-redux

Changing an array of object arrays into a consolidated array in JavaScript

What is the method for setting the current time as the default in a time picker?

Avoid having the page become unresponsive

Socket.io filters incoming data for xss vulnerabilities