Cloth physics to gltf

physics
cloth

#1

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


📕 Three.js Bookshelf
#2

There are two official examples related to cloth simulation:

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

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

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…


#4

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.


#5

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.


#6

@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:


#7

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: https://pybullet.org/Bullet/BulletFull/index.html
and the Bullet forums: https://pybullet.org/Bullet/phpBB3/


#8

Added to the bookshelf + libraries and recommended book from amazon


#9

Thanks @yombo