[SOLVED] Can babylon.js do this kind of cloth physics?

[ozRocker]

I saw this on Facebook, from a mate of mine:

https://fitting3d.com

Pixel perfect cloth physics and collision in realtime.  Also works on mobile devices.  Can Babylon.js do this?

Edit:

Just realised, maybe the physics was baked into vertex animation instead, 'cos it doesn't look like you can interact with that animation

[RaananW]

I wrote a cloth tutorial once - https://blog.raananweber.com/2016/04/03/cloth-physics-simulation-for-babylon-js/ .

This animation seems to be integrated, but it is worth a tr. I assume the performance will not be so good if you include such a detailed mesh for the cloth object, but it is worth a shot. We will hopfully integrate a physics engine that supports soft bodies pretty soon, and it will then work better.

[ozRocker]

7 minutes ago, RaananW said:

I wrote a cloth tutorial once - https://blog.raananweber.com/2016/04/03/cloth-physics-simulation-for-babylon-js/ .

This animation seems to be integrated, but it is worth a tr. I assume the performance will not be so good if you include such a detailed mesh for the cloth object, but it is worth a shot. We will hopfully integrate a physics engine that supports soft bodies pretty soon, and it will then work better.

Nice! I'm going to experiment with both methods

[ozRocker]

In Blender when you bake cloth physics into the keyframe animator, is it possible to export that info with the .babylon file?  I know the exporter can include armature animation and shape keys, but I'm not sure about vertex keyframe animation.

[Sebavan]

not sure ping @JCPalmer

[JCPalmer]

I do not think a .babylon file even supports that.  Making a set of shapekeys at key-frames, then animating in BJS seems like the only way.

[ozRocker]

9 hours ago, JCPalmer said:

I do not think a .babylon file even supports that.  Making a set of shapekeys at key-frames, then animating in BJS seems like the only way.

So create a shape key for every frame? That sounds like a lot of work.

[JCPalmer]

First, I said only way not easy way.  But no, I would only create / export shapekeys at key points.  In your walking example maybe to & from leftForward & rightForward.

If you also are going to use a skeleton, then just the "swish" needs to be isolated, since the matrix weights of the cloth mesh is already going to modified by the skeleton.

My morphing is always done on the cpu, so I know I can do both morphing move bones at the same time.  I assume you can to both with BJS morph targets, but do not know.

[ozRocker]

I saw a video where an OBJ sequence was converted to shape keys.  However, the shape keys aren't controlled via relative movement.  I think each shape key holds new absolute positions for the object.  Is this possible with Babylon.js Blender -> morph targets conversion?

http://www.blenderinmotion.com/controlling-blender-physics.php (video and instructions on this web page)

 

[babbleon]

I suspect that the cloth animation is driven by PC2 or MDD... probably from Marvelous Designer.

[ozRocker]

2 hours ago, babbleon said:

I suspect that the cloth animation is driven by PC2 or MDD... probably from Marvelous Designer.

Yes, using Marvelous Designer and exported as an OBJ sequence

[babbleon]

Attached is a .blend where falling cloth is controlled via shape keys. This was exported from Marvelous Designer as a single OBJ & PC2.

Does this help or have I misunderstood what you're looking for?

At some point controlling the exported shape keys in BJS would be good for me but I haven't got the time at the moment.

cloth.blend

[JCPalmer]

What I would do is create a couple of shapekeys by hand, not for every frame.  These keys would be like the max of a "dress swish".  Then animate the amount of the morph to apply.  I thought I said this before.  Making a shape key is not that hard.

1. Create be basis
2. Create a key
3. Have the key selected rather than Basis & go into edit mode.
4. Grab / move the faces to where you want if the shape key was fully applied.

[ozRocker]

7 hours ago, JCPalmer said:

What I would do is create a couple of shapekeys by hand, not for every frame.  These keys would be like the max of a "dress swish".  Then animate the amount of the morph to apply.  I thought I said this before.  Making a shape key is not that hard.

1. Create be basis
2. Create a key
3. Have the key selected rather than Basis & go into edit mode.
4. Grab / move the faces to where you want if the shape key was fully applied.

Yes, you did mention this before.  My concern with this is the loss of accuracy.  There's too much interpolation going on.  The resulting animation won't be the same and there's risk of the dress intersecting with the body.  In the demo I posted the physics is perfect so there's definitely a way to get it done without cutting corners and losing accuracy

[ozRocker]

On 17/04/2018 at 10:41 PM, babbleon said:

Attached is a .blend where falling cloth is controlled via shape keys. This was exported from Marvelous Designer as a single OBJ & PC2.

Does this help or have I misunderstood what you're looking for?

At some point controlling the exported shape keys in BJS would be good for me but I haven't got the time at the moment.

cloth.blend

I'm trying to find the best way to convert the cloth physics from Marvelous Designer into a format that Babylon.js can understand.  I have an animated dress which moves around because of the person inside it who is walking and 'cos of gravity so there's no linear movement.  The dress is swooshing all over the place.  I can't use blendshapes to interpolate all positions between start of animation and end of animation.  

[JohnK]

On 11/23/2017 at 12:03 PM, ozRocker said:

Can Babylon.js do this?

If the question is interpreted as 'Can Babylon.js do this with existing base code, extensions and plugins? then the answer (IMHO) is no.

If the question is interpreted as 'Can Babylon.js be used in such a way as to do this?' then the answer is, of course, yes provided someone has the skills, time and inclination to write the code.

Unfortunately I do not have the skills, even though I have the time and the inclination. The reason I say 'yes it can be done' is because there are examples using 'threejs' and 'ammojs' that show good softbody simulations, including cloth movement:

http://kripken.github.io/ammo.js/examples/webgl_demo_softbody_cloth/index.html

http://kripken.github.io/ammo.js/examples/webgl_demo_softbody_volume/index.html

That I do not have the skills can be seen in my poor attempt to reproduce the second example using Babylon. js https://suspicious-ride-8d7b61.netlify.com/soft/soft2.html but it does show that given the right person it could be done.

RaananW has the skills and the inclination

however I would expect not the time.

Sorry I have not been very helpful but hope it gives you something useful to consider. Good luck with your endeavours which I keep following.

[ozRocker]

31 minutes ago, JohnK said:

If the question is interpreted as 'Can Babylon.js do this with existing base code, extensions and plugins? then the answer (IMHO) is no.

If the question is interpreted as 'Can Babylon.js be used in such a way as to do this?' then the answer is, of course, yes provided someone has the skills, time and inclination to write the code.

Unfortunately I do not have the skills, even though I have the time and the inclination. The reason I say 'yes it can be done' is because there are examples using 'threejs' and 'ammojs' that show good softbody simulations, including cloth movement:

I'm implementing it at the moment.  The way its done is through an OBJ sequence.  We can't use physics engines outside of the clothing software because only the clothing software physics engine will take into account thickness, elasticity and other garment properties.  So the physics needs to be baked into an OBJ sequence straight from the clothing software.  The bit I need to work on is being able to cycle through that OBJ sequence in realtime in BabylonJS.  Really, all I need to do is load the first OBJ in the sequence then move the vertices according to their positions in the consecutive OBJs

[ozRocker]

So the answer to my original question is YES!

I made a demo here http://punkoffice.com/fabric

There's a 27MB binary file that requires loading first time so pls be patient.

[JohnK]

Congrats, a job well done.