It is possible to make more than 2 dependence parts of simulation?

Hi. I have one problem. I don’t know how to make a simulation of a plate in the system (simulation by sliders). I have ball and plate simulation which should move by two sliders ( X-axis, Y-axis, XY and YX). When I move the slider one arm should move up\down and the second arm shouldn’t move. I tried to make a simulation with a blender skeleton (and tried that example - _https://playground.babylonjs.com/#1EVNNB#15) but It doesn’t work :expressionless:

It is possible to make two dependent parts that control one common part?
Thank you

*Sorry for my English :slightly_smiling_face:

Welcome to the community !!!

Could you create a repro in the playground to simplify the community process of helping you ?

@carolhmj would definitely be able to have a look once we get a playground setup.

1 Like

A playground would definitely help us greatly in helping you! But starting the discussion, there are many different ways to connect and move elements together in computer graphics. One option would be joints with a physics engine: Joints | Babylon.js Documentation (babylonjs.com)
Or bones: Bones and Skeletons | Babylon.js Documentation (babylonjs.com)
Or even by just parenting objects and setting pivots: Parents and Pivots | Babylon.js Documentation (babylonjs.com)

@sebavan @carolhmj I’m a bit confused. I have studied the documentation about Babylon Playground, but as I’ve understood its main purpose is to provide me opportunity to contribute into Babylon.js project. I have studied this link as well Babylon.js Playground Maybe I’m too much unexperienced with Babylon, but as I have figured out - mainly Babylon projects are written in Typescript. I have certain restrictions for my project - I am not allowed to use Typescript at all (only pure JS is allowed).
I want to express to you my gratitude for your willingness to help, but I am afraid that I’m pretty noob in that all. I hope that this link on my github repo can help you some way. If not - I would be really thankful if you can explain me how can I create a Playground repo with the codes I have got already. Looking forward to your answer and thank you one more time.

No worries, asking questions is how we all learn! The Playground is a tool that helps you quickly share your code with others without the need for them to clone a project or run a web server - it’s very helpful for collaboration and getting your questions answered more quickly. You can use either Javascript or Typescript on the Playground. Here’s a documentation link: Playground | Babylon.js Documentation

To use Babylon code on the Playground, you can copy the createScene or delayCreateScene functions and paste them on the code area. Most of the Playground examples you see use createScene, but the delay version is perfectly fine too, as shown here: Available Mesh Dude | Babylon.js Playground (babylonjs.com)

In the case of your code, some slight adaptations would be needed. You’ll need to change the scene loading arguments to point to the Github URL of your asset: Using External Assets In the Playground | Babylon.js Documentation (babylonjs.com)
And since you can’t edit the HTML directly, you’d have to either create the slider through Javascript, or use Babylon GUI: The Babylon GUI | Babylon.js Documentation (babylonjs.com)

And as a further recommendation, the more you can describe your problem, the better you yourself and we can understand your requirements. You want to achieve the effect seen on the gif, but what are the steps you’ve taken? What specifically worked and didn’t work? Without more details, we can only really give general advice.

3 Likes

Good afternoon. Thank you for your answer. I tried to make the animation with the blender skeleton. First of all, I made the first animation (which doesn’t look okay because of my blender skills). Secondly, I made two animations of arms. Now I don’t know how to join the animation of two arms and make them move dependently at the same time. Maybe I need to make animation for XY-axis. How can it work, for example, if I have X - 20°angle and Y - 40° angle? It seems that it is a wrong way to make this all with animation only. The problem is that for skeleton animation you can use only a .babylon file. I need to use a .glb file. For example, I didn’t try to animate separately independent parts (meshes) because I have three dependent parts.

There is repo in the playground with the first animation (without slider) - https://playground.babylonjs.com/#ZF4MV0#6
there is the model with 2 animations - Add files via upload · someannushka/ball_plate@3fe3848 · GitHub

Thank you once more

1 Like

So, you have this model with two arms and a plate, and you want to be able to move the arms independently with the two sliders, and when the arms move, the plate should move along, right?

I think there is more than one way to approach this problem. For a relatively simple system like this, one could try finding an equation that relates the plate’s orientation to the angles of the arms, and update the plate as the slider moves. But another approach would be using the Physics engines. And since you want the ball rolling on the plate anyways, I think physics would be the best solution in this case. :slight_smile:

You can connect the pieces of the model by using Joints: Joints | Babylon.js Documentation (babylonjs.com)

I think each arm can have two hinge joints, one that connects to the base and another one that connects to the plate:

@PatrickRyan and @PirateJC have you worked with joints before? Have any tips?

And just one correction on the skeletons:

The problem is that for skeleton animation you can use only a .babylon file

This is not true, Babylon supports skeleton animation for GLB/GLTF too :slight_smile: Available Mesh BrainStem | Babylon.js Playground (babylonjs.com)

3 Likes

@annushkatea, if I need to create repeatable motion, I tend to want to go with animations rather than physics just to make sure the motion is the same no matter what. But if you need to roll a ball around on the moving plate, then I would definitely want a physics simulation for the ball and using the table top to orient the collider. This gives you the best of both worlds in that you get predictable motion in the arms and simulated motion on the ball.

If you want to drive the animation with sliders, You can set the range of the sliders (Babylon GUI is easiest here) to match up with the number of frames in your animation of each arm. So if you have 100 frames of animation, your slider would range from 0 to 99 (rounded so you get whole numbers). On slider change (depending on the slider) you would pass that value to the animation so you are displaying the corresponding frame. Obviously you would not be playing these animations, just have them stopped and pass the correct frame to currentFrame to display.

For your animations, you want a single animation clip of each arm moving from minimum extension to maximum extension only. This means you will have two animation clips, and you will pass the currentFrame to the corresponding animation.

To get them both to blend nicely, you will use animation blending to make sure that your mesh takes influence from both animations. Your weight parameter will need to scale with your sliders. This means when both X and Y are at their full extensions, you will want your weight to be 0.5. When one is at maximum and the other is at minimum, you will want to balance your weight toward the fully extended axis. You can also just start with a weight of 0.5 which will blend both animations equally, but you will notice your animations don’t reach the extents of the original animation.

To change both axes at once, you simply need to pass your slider value to each animation. Depending on the desired motion, you may need to pass the “inverse” value to keep them in sync. Say, for example, you want one to move up and the other down, on a 100 frame animation, you may need to pass frame 20 to one and 79 to the other (max value minus current value) to keep them in sync.

I hope this helps you think through the problem a bit and helps unblock you. Let us know if you have more questions.

4 Likes

@PatrickRyan So, I have tried some things you have written about and now I’ve got some progress.
First I modified some example from the internet. I have succeeded in stopping animation and jumping between frames in this example

Then I used this example for inspiration. As I can see, babylon provides pretty decent UI for my task, I think there will be no problems with adding controls to my scene.

But now I’m feeling a bit confused with the results I have. I am not sure what am I doing wrong, but here I am trying to import my model as mesh and pause it’s animation. But the code has no effect on the model. I also tried to modify previous example, just replaced the file path and name hoping that I will be able to control the animation, but the result was the same. I have commented out unnecessary lines of code, didn’t use the animation range, but hardcoded frames nums, etc.

Briefly the problem is that animation just starts looped after the mesh is imported and I can’t get any control over it with the JS code. I think the problem might be with the .glb file I’m trying to load. Is there anything I have to do with the blender model, skeleton or animation before it can be processed correctly by the Babylon? I have noticed, that the Dummy model’s skeleton has integer id, and mine model’s skeleton’s id is a String value, but for now it’s everything I’ve got.

I would appreciate if you can advice me something I can try. Your links to the babylon documentation were really helpful, thank you for that. Looking forward to your answers. You have really pushed me up with this project, hope I will be able to finish it soon and then share the results with you :slight_smile:

update: @carolhmj I have tried to modify your example but the results are the same as in my case. Is it possible to control non-babylon mesh file, ot it can just be loaded and shown as a complete animation?

1 Like

To correctly obtain access to your animation to play and pause it, you need to grab the AnimationGroup:

Grouping Animations | Babylon.js Documentation (babylonjs.com)

Scene | Babylon.js Playground (babylonjs.com)

Same for the other example: Available Mesh BrainStem | Babylon.js Playground (babylonjs.com)

2 Likes

Hi @annushkatea just checking in to see how’s your simulation going, if you have any more questions :slight_smile:

Hi, @carolhmj , thanks for asking! I have bin on vacation last few weeks, so I haven’t got any significant progress. I’ve returned to work on this progress on Monday and here are some questions that I have now.

Example for question 1

Here I’m trying to explore the animation object itself. I’m trying to get values of the from and to values of the object. My animation has 80 frames, but the values logged to console are 0 and 3.3333…

The first question is - why does this happen?

Example for question 2

This idle-walk-run dummy example has no animation groups at all, but it uses skeleton and weighted animations instead. I have studied the documentation and didn’t see any good explanation of animation blending, except of this page. There are not so much information provided there. For example I’ve tried to use my animation group object as parameter for beginWeightedAnimation() function instead of skeleton, but that had no effect at all. Then I’ve examined the dummy simulation and noticed, that there are no animationGroup at all and the skeleton is used for the animation.

So the second question is - maybe I am doing something wrong not with the code, but with the way I implement animation in my 3D model? I’ve found this video, but I am not sure that I have understood at least half of it.
I am totally not sure, that I am able to implement animation through skeleton programming, it seems pretty tricky from the video.

So the third question - is there any way to use AnimationGroup to create 2 separated weighted animations?

As far as I’ve understood from @PatrickRyan post - I have to use animation blending for my solution. The result will be:

  1. A model with an animation, where for example range 0-50 will be X axis rotation of the desk and 51-100 will be the Y axis rotation.
  2. Then I have to create 2 weightedAnimation objects Xrotation and Yrotation and then, for example if I set Xrotation weight to 0 and Yrotation weight to the same value - I will see the desk tilted diagonally, on it’s corner, and for (1.0, 1.0) weights - the desk should be tilted same diagonal way, but on the opposite side (hope you understand what I mean, sorry :frowning: ).

And the last, fourth and maybe the easiest question - have I understood the solution right? :slight_smile:

Thank you for your patience.

P.S. It is a bit late, but hope you had good and happy holidays. Wish you only the best in the new year.

1 Like

Hi! Hope you had a good vacation, and I’m happy to help with your questions! :smiley:

This is because the model is using the GLB/GLTF format, which uses seconds instead of frames. So your animation of 80 frames at 24fps got converted to 3.33 frames at 1fps! This is definitely not intuitive, so I think I’ll add an explanation on the docs/Inspector.

The beginWeightedAnimation method’s first argument has to be the target of the animation, so you really need the skeleton here.

I’ll get to the rest of the questions in a bit!

I’ll ask @sebavan since I’m not very sure about this - are we able to create weighted animations from different Animation Groups? My guess would be no?

I unfortunately do not think so either. Maybe @Deltakosh would know ?

Nope they have to be linked somehow.

But if the ask is about having 2 weighted animations INSIDE an animation group then yes no problem

@carolhmj Ok then, if I need a skeleton animation to create weighted animation, do you know some documentation or youtube guide that I’ve got chance to understand? If so - I would be grateful if you share it.

@Deltakosh Can you please explain what do you mean? I should create 2 different animations, incapsulate them into an animation group and then access them separately from code? How can I do this?

If you need to use weighted animations and animation groups you will have to do it within the same animation group. From an animation group you can get access to each animation through animationGroup.targetedAnimations