Help Needed: Combining GLB Models and Physics Simulation for Clothing on a Mannequin

Questions
1

Hi everyone,

I’m working on a web game project where I want to create a virtual mannequin that can be dressed with various pieces of clothing. The idea is to allow users to select different clothing items (GLB models) and have them automatically fit onto the mannequin, with basic physics simulation to mimic real-world behavior.

What I’ve done so far:

  • I’ve set up a basic Three.js scene with a mannequin model loaded via GLTFLoader.
  • I also added Cannon.js for physics simulation to handle the movement and fitting of the clothing.
  • Users can select clothes from a dropdown, and the selected GLB model should be applied to the mannequin.

The problem:

  • I can’t get the physics to work as expected. The clothes don’t attach properly to the mannequin, and the simulation isn’t behaving correctly.
  • Additionally, I’m having trouble making the clothes fit automatically onto the mannequin’s body when loaded.

Has anyone worked on something similar or can offer guidance on how to approach this? Any advice on how to properly implement the physics and fitting of the clothes would be greatly appreciated!

Thanks in advance!

2

I don’t know what the state of cannon softbody is or if it’s supported.

I’ve used ammo softbody physics for this in the past…

If you’re using a static mannequin then you can probably use regular static mesh->softbody collision.
If you’re planning on animating the mannequin, it gets much trickier… and you may have to create a ragdoll/collision proxy… by animating some invisible physics primitives like boxes or ellipses around the limbs, to collide against.

3

The idea is to have a stationary static mannequin and then add physics-based clothes on top of it. Can you point me to some documentation?

4

https://threejs.org/examples/physics_ammo_volume.html

iirc there is an internal “pressure” on those… you could make clothing mesh, make it a softbody with pressure… position it on the mannequin, and then release the pressure to let it snap back towards its original shape, and stopped by the collision.

This is similar to how you can make clothing in blender as well.

For robust solutions, folks will often create a mannequin with toggleable body parts to avoid seeing the skin underneath colliding/intersecting with the clothing…
So for pants, you would disable the leg mesh… for shirt you would disable torso etc.
and for additional performance, you can do something like I described above, instead of colliding with static mannequin mesh, instead collide with some collision primitives like spheres or cylinders set up on the bones… this makes the collision faster and lets you do more complex cloth. But with perhaps less nuanced collision/draping.
This is pretty hard mode. :smiley:

5

do you think my idea is possible? However can I make different objects have different densities? for example if I have to make jeans it is less soft than a velvet dress

6

From what I recall, you can set the mass on the softbody… so that would get you floatier/draggier “cloth” maybe. So yea, maybe?

It will be a process. Ammo.js isn’t for the faint of heart. There isn’t much documentation and the API is like cranking levers, but its fassst and pretty damn good.

7

wow this is such a complex thing. I’ve never done this kind of thing dang

8

Yup. Would be quite an achievement. I did something similar for a virtual tryon thing, but used a crappy verlet integrator of my own, and it wasn’t great, and then a second time i used ammo softbody, (but this time for a basketball net ) and it worked Really well… so… I’m optimistic that you might get somewhere with it. But its definitely hard!

1 Like
9

TLDR; Physical mass is derived from geometric area. Physics is complex/unreliable when clothes are self-intersecting, concave, and not water-tight (i.e. holes, strips).

Games often employ limited simulation (a cape) or morph targets (pose matching). The culprit is intersection results, not necessarily computing power. Ammo physics relies on scale⁰, mass¹, time, type² and more³. When you init the world⁴, cloth vertices bounce around like popcorn… because the limit of fidelity and connectedness.

Suggestions from an amateur:

  • Easy road: Substitute a SkinnedMesh which attaches vertex weights to bones. Cloth and hair use child joints to simulate bunching. Because there are physics types for softbody (convex beachball) and cloth (flat flag)… but not massless triangle strips! There’s an example of an anime girl with a hair rig.
  • Hard road: Experiment with seams in cloth patterns, and manually step control routines to limit bad outcomes (prioritize affixed areas and mitigate drifting collisions). Consider liberal use of invisible primitives with extreme values.

⁰ standard units are THE basis
¹ ignore, static, dynamic, asleep
² hardbody, softbody, cloth, chain, hinge, motor…
³ friction, gravity…
⁴ broadphase, narrowphase

1 Like
10

I’m really interested in what you said but I’m a novice developer and just started “playing” with these 3d simulation and physics libraries. Can’t you pass me some documentation or references where I can read them?

11

It depends what tools each library exposes (Ammo, Oimo, etc.). Browse official code examples to validate feasibility. General concepts can be searched on Wikipedia. You may enjoy SnapChat Lens Studio because it’s free, with iconic presets and top-notch sliders (for major properties)… I made a springy hat with fireworks in 5 minutes.