About creating dynamic avatars

[dsman]

What is the top level logic for creating avatars where the user can change some elements (clothes, accessories etc)?

Characters can be made easily by skeleton/bones and animation but how to lay clothes which move/stretch as per animations?

[trevordev]

@dsmanare you looking for something that looks along the lines of this? http://playground.babylonjs.com/#0K8EYN#0 or more complex clothing?

@kcoley any ideas on how to do this?

[dbawel]

You can dispose of meshes, materials, and textures at anytime. And I often use the RunAfterRender() function to apply different attributes to the scene. However, there are may ways to do this... so RunAfterRender() may not work for your scene. However, if you have a command of JavaScript, then this should be simple... as the babylon.js framework has all the functions in place. If you need more assistance, then post a playground scene.

DB

[dsman]

@trevordev  Clothing on the character in PG your link is kind of simpler. I am talking about clothing like Fabric Motion demo on babylonjs.com home page. 

Besides I want to understand how to change clothes for an avatar and still have clothes dynamically animated like the Fabric Motion demo. 

[trevordev]

I know babylon supports cloth simulation via physics plugins like cannon https://www.babylonjs-playground.com/#7N1BRU#0 but I'm not sure the performance and quality would meet your scenario.

@PatrickRyan do you have any ideas how this might be approached?

[kcoley]

@dsman you may be able to bake the cloth animation using a DCC application (e.g. Blender) and bring it into Babylon using glTF if you have a consistent character animation, similar to the Fabric Motion demo you mentioned.  But if you want the cloth to react dynamically to character movement, it may be trickier to implement in a stable way.  You may be able to start with the cloth animation that @trevordev referred to, but getting the animation you want could be a considerable investment.

[PatrickRyan]

@dsman I'm with @kcoley on this one that unless you need procedural deformation of cloth for simulation using something like Canon.js, baking out the animation from your DCC is the best alternative. Having the clothes skinned to the same skeleton as your character and exporting them as separate mesh objects to be loaded independently of the character mesh is the way most tech pipelines will take. It also depends on the complexity of what you are speaking of. If you are thinking of multiple clothing/accessory options for each character, you will quickly get into trouble trying to do cloth simulation at runtime because you are speaking about many meshes per character all doing collision on the character per frame. If you were to bake out the animations into each piece of clothing, the clothing mesh as well as the character mesh could share the same animations, so they would be in sync. Ideally, you would retarget the skin weights of the mesh to the skeleton of the character as well so that you are handling multiple skeletons as well. This way all of the physics calculations are baked into the animations rather than needing to have them on each character.

Anything that does not need to deform, like armor/shield/bracer for example, could just be instantiated and parented to the correct bone. This means you would want extra bones in your skeleton rig for attachments but is the easiest way to accomplish this as the mesh doesn't need any animation or skinning, but just follows along with its parent joint. Hopefully, this makes sense, but please shoot back any questions you have.