Cloth physics to gltf

Hi, I’m interested in learning about cloth physics in three.js. I have a gltf and would like to apply cloth physics, what are the general steps that I need to take? It does not have to be specific, I just want to know what I need to research.

Thanks

2 Likes

There are two official examples related to cloth simulation:

https://threejs.org/examples/webgl_animation_cloth.html
https://threejs.org/examples/physics_ammo_cloth

However, the demos are not really documented. They just refer to other resources that might be worth to study e.g.

Cloth rendering is a very specific area of 3D rendering so it will be hard to find beginner friendly tutorials. The scientific papers about cloth rendering mostly assume prior knowledge in this area and computer graphics in general. You have to be really brave when diving into this topic^^.

3 Likes

You’re right… it does appear very complicated. I notice that the 2nd demo you provided is made with help from ammo.js. Using ammo.js, it should be simple for beginners like me who have no experience with physics but want to achieve physics? If so, I think I will start there…

If you can settle for ‘baking’ an animation in Blender and playing it back as animation, then these threads might help: https://blenderartists.org/t/export-bezier-curve-animation-as-gltf-and-or-fbx/1151423/4 + https://blender.stackexchange.com/questions/51230/cloth-bake-save-frames-in-timeline-as-shape-key. But I don’t know of a general-purpose workflow for simulating cloth realtime from a custom model.

2 Likes

Hello, I’m the author of the Three.js Ammo examples. You have all what you need in the webgl_physics_volume demo:

The function createSoftVolume( bufferGeom, mass, pressure ) will create a soft body with the given BufferGeometry, the mass, and an internal air pressure value. A soft body is the type of body wich can deform, as opposed to the rigid bodies.

Of course you want to keep all the other functions related to physics in the example.

  • You can give the function a BufferGeometry loaded from gltf.
  • The mass is up to you (the best is to use meters, seconds and kilograms for all the length, time and mass units)
  • Finally, for simulating cloth you can use 0 as the pressure. If you give a positive pressure the cloth will inflate like a balloon even if it is a not closed mesh. (Edit: To clarify, the cloth can be an open, double-sided rendered mesh)

Then, you can also stick the cloth to the person model at some vertices, with the so called anchor points. See the webgl_physics_cloth example, where the function softBody.appendAnchor() is used to glue the cloth to the crane arm. You can add anchors to a soft body, linked to a rigidBody or fixed in thin air.

5 Likes

@yombo Thanks for your explanations! In this forum, we always try to recommend reading materials for the interested developer or student. Do you know any good books or publications in context of cloth rendering/physics? If so, it would be great to add these resources to the three.js bookshelf :blush:

3 Likes

You’re welcome :slight_smile: Sorry, all I’ve learnt about physics engines is from reading Bullet examples and its internal code.

(Bullet is the C++ original library, Ammo is the port of Bullet to js via Emscripten)

A good place is the Bullet documentation: Bullet Collision Detection & Physics Library: Bullet Documentation
and the Bullet forums: Real-Time Physics Simulation Forum - Index page

4 Likes

Added to the bookshelf + libraries and recommended book from amazon

2 Likes

Thanks @yombo

1 Like

Hello,

I have been banging my head against this all afternoon trying to figure out how to get the BufferGeometry from the GLTF file to parse into the createSoftVolume( bufferGeom, mass, pressure) function.

Trying to create custom soft body meshes as well. Any help would be much appreciated!

Best,

O.

1 Like

I’ve been using this library called geometry modifier that works pretty well for cloth simulation.

I’m Currently using it to animate a flag in my mobile game I’m developing.
https://codepen.io/b29/full/LoaRKx

1 Like

Oh cool! ty for posting that! I will give that a try. I am wondering if the performance is good enough to have a few of those going at once. I am looking for a solution for moving hair, skirts, etc on avatars.

What problems did you encounter? A fiddle could help.

With the function you can convert any mesh to soft body, in theory.

1 Like

It was a silly error - it is actually surprising easy to use the function to create geometry from a gltf model. I was just not allowing the model to load before calling the function - all is working well now.

Thanks for an awesome tool!

2 Likes

Hi @R_D

Off the top of my head - as explaioned above - I waited for the geometry to load before calling the create geometry function.

ie. loader.load('model.gltf', function(){ ... })

1 Like

Hello, I want to add physical fabric to FBX character model clothes but don’t know how to do it

Import the FBX model into the createOftVolume function and the page becomes very sluggish

@Gonaldo7 I would recommend starting a new discussion thread, including more details about your code and model.

@donmccurdy I have posted it before, but no one discussed it.So I had to look in the comments to find out, the clothes in the FBX character model didn’t know how to fit the fabric pattern

It is a very broad question, with not enough information to answer it. To me it sounds like you may want to be using modeling software like Blender instead? That is a much better way to do most changes to existing 3D models.