Whats the best way to create cloth / soft body animations and how to import from Blender / Cinema 4D?

Hello everyone,

I am creating a soccer game with Babylon and trying to simulate goal net when the ball collides with it. I tried ClothImpostor but couldn’t reach well performance on mobile devices like iPhone 7, it’s my goal to get well performance at least for iPhone 7 class devices. Also ClothImpostor works buggy sometimes, for example when i refresh the page often position of the cloth is wrong sometimes. (Maybe i am doing something wrong please check my code: https://playground.babylonjs.com/#WZR0LP)

I would be grateful if you answer my questions below:

  1. Whats wrong with my code causes low performance on mobile devices, whats the best practices for this scenario? Or it’s just the limits of WebGL and engine?

  2. Also another problem with the ClothImpostor it have initial movement when the game load, what causes this?

  3. Another problem with my code it have low FPS for a few seconds when the game load, why this happening?

If high performance is not possible with ClothImpostor i have these questions:

  1. Is there a way to export physics animations (cloth, hair, soft body modifier for Blender & simulation tags for Cinema 4D) to glTF 2.0 file for import in Babylon? (I tried baking, shape keys and recording to keyframes but couldn’t manage.)

  2. Bonus question, whats your recommendation to create grass for soccer game. I see many grass simulation examples but i think it will be better to use mesh for whole field to get better performance. (I converted hair modifier to mesh in Blender)

I know its a long post, i am just beginner now, i hope i will be expert soon to help others here and create amazing games :slight_smile:

1 Like

Adding @RaananW for the cloth physix part as he is the king of it :slight_smile:

About the cloth animation maybe @JCPalmer or @PatrickRyan might be able to help ?

1 Like

@alparslanahmed, if you are targeting lower-end devices with your game, you will want to plan your design elements and art direction around your target device. It doesn’t matter if you have beautiful cloth simulations and realistic grass swaying in the breeze if your target device can’t hit 60 fps. You have limited resources when designing a game for any device, so you have to choose where to spend that budget so you have the best tradeoff between features and art style while maintaining your performance.

In looking at your PG, while I see what you are going for with your physics simulation I wonder if you are getting the most bang for your buck in terms of resources spent. In watching the ball hit the cloth mesh in many different positions, the reaction of the cloth repeats in expected ways. Hits to the upper left always look the same, for example. The ball also bounces back off the cloth, rather than sliding along it displacing it as it goes, so I would suggest that you could lose the cloth sim all together and solve the problem with a skinned animation, which would allow you to include the top and sides of the net as well.

You could determine a handful of locations to simulate a strike from and place a plane imposter in front of the net. The ball would bounce off the imposter and you then determine hit location and play an animation that moves the net skeleton from the closest point. This would allow you to animate the whole net with a skeleton that covers all major parts that need to move, like the top of the net reacting when the back is struck. You can also create one set of animations with the maximum strength hit at each location and one animation where the net is static and blend between them to vary the strength of the hit based on the speed of the ball while maintaining a minimum number of animation clips.

A skinned animation solution also allows you to spend a bit more on the mesh resolution for the net so you can get good deformations without taxing the system with a high-res mesh that needs to be handled by the physics system. You can spend that budget elsewhere. The main question you need to answer is “how important is the physical accuracy of the net in the scene?” Would you give up other gameplay features to have a better physics simulation? Is the net strike a top tier element in your game loop? Is it just a feature to reinforce the feeling of scoring a goal? Is your camera going to be close enough to judge the accuracy of the simulation? Answering these questions help you decide how much of your technical budget to spend here.

I would say the same about grass. Here are two very different representations of grass/turf:

Granted the second one has less resolution, but illustrates the point. If your camera is close to the grass, you would expect to see the blades, even if it’s short. If you camera is further back to encompass more of the field, you won’t be able to see the blades of grass. And if you angle is higher, you won’t see the displacement of the grass by the ball/player. This can be a design choice to keep your camera back from the field at a higher angle to prevent needing to spend your tech budget on grass. I would even go as far as baking a texture with a normal map on the field and not having mesh for the grass at all. Again, will your tech budget be well spent on a heavy mesh for grass or for other things like particle systems, UI, post-effects, lighting, custom shaders, etc.

In terms of physics simulations in DCC tools like Blender, glTF does not support that type of data at all. Even simple things like deformers are not supported as it only accepts meshes (both static and skinned) and morph targets. Morph targets can be used to simulate a more complex deformation on a mesh, but there is a limit to the number of targets that can be stored in a glTF and that number is low enough that you may not be able to use them to do what you want. Mostly they are helpful at supporting a rigged skeleton to create deformations that may make the skeleton more complex than needed. Any simulations or deformers that you use in your DCC tool need to be baked to the mesh, but mostly skinned animation is the best way to deform a mesh in glTF.

Hope this helps, though I know this isn’t likely the answer you were hoping for. I think the pains you are feeling around physics here are pointing to the fact that you may need a different solution for this problem.


I think I’m getting hit with the physics worst. It may not be loading the grass…

Couldn’t you have a custom mesh where you just throw the vertices around a bit wherever the ball hits to run more performant? He could probably use a vertex shader? that’s beyond me.

Just dial down the SIM basically.

So this is where we stand today with BJS? Discussing the physics of grass for a soccer game. That’s simply amazing. I’m a shit with code, not an eng. But I’m a project manager and creative director and a hardcore gamer since … well, since the beginning of gaming I suppose. I think @PatrickRyan 's advice is a good one. Unless of course you are working for EA? Are you?:wink:
As a gamer, I don’t really focus on the grass. As a hardcore gamer, I start by lowering all settings and remove all the faen particles and effects so I can play without ‘disturbance’. Where has I do care a lot about the gameplay and the physics of the ball and players. I would focus on that first and if you make it simple with your grass/terrain you can always go back to it later on I suppose.
Anyways, just wanted to say that these are awesome discussions . Well beyond my expertise.

1 Like


@Cedric will be able to comment much better on the cloth physics, but i can understand what you are commenting about.

Try this demo - does it work a little better? soccer-goal-net-example | Babylon.js Playground


As I said I’m a shit with code, but I have fairly good eyes, and I’m afraid this does not work better. Here are the two results I got (randomly?):wink:

1 Like

Thanks a lot for your interest, this answer is precious for me. I will try the method which you recommend and give feedback with PG here.

1 Like

I am concerned about net animation and grass because i want to impress players with tiny, specific details. You are right, gameplay is first but it will be good to have very specific details to impress players. I am trying to do my best here, of course we can’t compete with FIFA because they have very professional and experienced team of developers. When i play RDR2 i am impressed with story, gameplay, musics and also with this kind of tiny details. As a solo developer i can’t do 1% of the things they done but still i try to push my limits so i will create my best to get success. I don’t wise up to WebGL and game engines tech but i believe and i hope that engines like Babylon.js will reach native performance and capability one day because technology is evolving everyday so fast. That day we will focus on the results instead of the tools. These are not totally related with your answer but i just wanted to share :slight_smile:

Hi @RaananW i checked your demo on Samsung Galaxy S10e which is powerfull device, but interestingly FPS was much more lower than the my PG. Did you tried it with mobile device?

Thank you for taking the time to share.
I only replied to this topic because I find all this emulation and passion around BJS just so awesome and refreshing. Especially in these times.
You know, I had the feeling it could be something like that. Understand you are not a team of 20 working on the project with a half million budget or more. Therefor, my comment. I cannot comment the code and performance, especially with more complexity every day, with the adding of high-end shaders, post-processing and all we can now do with nodes and all the performance gained with textures compression and tiny instances… and…it grows nearly every day. I have seen the early days of Unity (and I struggled with it for the first years). In my opinion, BJS is eventually getting there. It is unlikely that it will reach same performance anytime soon but today, I think it provides enough (performance, stability and features) with some other UNIQUE ADVANTAGES, to create successful projects in 2021 (not just for gaming but also for gaming). With that said, I really believe you should start simple and in order. I would focus on the must-haves first before thinking of adding this ‘detail’ that in fine, could turn against you. Also, if I had to make a choice to save resources for physics, I would rather implement weather conditions and accurate (understand consistent and fun to play) various terrain conditions. That would be real cool. The devil is in the detail isn’t it?

Please continue sharing. I’m sure not just me would be happy to see a faen cool soccer game built with BJS.
GL with the project and have a great day. :soccer: :smiley:

1 Like

@PatrickRyan hello again,

I tried skeleton animation in Cinema4D but i am not satisfied with the result then in Babylon.js youtube channel i saw Jasons NME: Vertex Shader tutorial and it blow my mind because i just explored what shader is and how they work. So isn’t it possible to create shader like water ripple animation or impact animation on the goal net? I am searching for 3D wave graph equation, i will use ball collision point as an input and create impact animation on the goal net based on this. Can you recommend any resource about this to learn the equation and then i will apply it in NME?

Now i find

Y = cos(constantX * X) * cos(constantZ * Z);

equation but couldn’t manage to include time and center of the impact point inputs. Wave must dissolve after some time.

@alparslanahmed, you can certainly do this with vertex displacement, but the tricky part is going to be isolating the strike to center on where the ball hits the net. The most straight forward way to do this would be with a texture mask, you will need to create concentric circles that radiate outward from a center point in the texture and then offset this texture in UV space so that it matches with the point on the net that is struck. So it looks like this:

  • Make sure your net has a UV set so that a circle set in the texture using that UV set remains circular when applied to the mesh. With a rectangular mesh, that means you will be mapping a rectangle to the middle of your UV space.
  • Set up a node material to create the concentric rings using a method like this one which uses this playground. You will want to create several rings that you can adjust in diameter and thickness
  • Remap that texture to contain values that are -1 to 1 rather than 0 to 1 which is normal for textures.
  • Set up a displacement value that is in local space and is multiplied by the output of the texture so your mesh will displace from value to negative value which allows you to increase or decrease the impact on the net by setting that value to the power that the ball hit the net
  • Determine your strike point on the net and translate that into a UV offset on your texture. You will want the texture to be in clamp mode so that the texture doesn’t wrap UV space.
  • Create animation clips and apply them to the exposed variables in your node material to animate both your ring diameter and thickness for each ring in your wave effect as well as an animation for the increase/decrease of your displacement value.

This is a more complex version of a skinned animation. You have more moving parts to coordinate and you are taking the technical debt of the skinned animation into managing it through several systems of masking and displacement. A tradeoff like this is great when you need some randomness applied like the wave shaders that @PirateJC made, or if you need to apply the same technique to several types of meshes to prevent loading in several sets of skinning data.

The benefit here is that you can move the strike anywhere on the net rather than relying on a few skinned strike zones. However, it’s a more complex system needing grouped animations and the management of those animations on top of the more complex shader. Hope this helps.

1 Like