Discrete Event Simulation Animation is possible in Babylon.js?

Questions
,
1

I am trying to reproduce animation for a discrete event simulation (DES) model, so I am exploring libraries like Babylon.js to do so. Thus, I am new in Babylon.js, thus I am not fully aware of the capabilities and constrains of this library. So, I would love any ideas in how I can achieve an animation for a DES model in Babylon.js.
To give a little bit of context what DES is capable here is a common use of DES models: Discrete event simulation can be used to model a system where customers arrive and a server serves them, e.g and ice cream cart(server) and customer for those ice creams(customer). The simulation would involve creating virtual “customers” and a virtual “server” and then modelling the events that occur when a customer arrives, is served, and leaves. By saying this, the most common scenario of DES models is when customers arrive to request a server randomly, meaning that animation cannot be looping a customer arriving at the same time to the server every time, and the server takes a random time to serve a customer, that means that an animation of a server servicing customers cannot be by looping the same service time for all the customers since every service is very likely to be different one to another. So, it’s very likely as well that customers must wait sometimes for being served by the server or likewise the server might be idling during the animation-simulation, thus looping for a standard behaviour would not be helpful to this kind of animation-simulation.
Here is an example of a DES animation made with Simpy and Maya in Python, where a fleet of trucks uses a couple of servers and follows some paths, but sometimes the trucks wait to be loaded and sometimes they are loaded immediately after arriving to the serve. This is more or less what I want to achieve with Babylon.js

(2) Discrete Event Simulation with SimPy and Maya - YouTube

What I have tried:

I have tried some animations applied to a black box but everything with keyframes, that once I try to with a couple of element gets very clunky to make an automation of a sequence of the same kind objects, modifying the keyframes every time I wanted a different behaviour in the object animated.

I have try as well with group animation, but when I stop, pause, play, and reset a group of animations they stop, play…etc, all at the same time so it does not work in my purpose. Here is the playground that I tried to modify to stop only one object but not possible.

I have tried as well with some methods like scene.registerBeforeRender() and scene.registerAfterRender() but with the type of input that I will receive from the DES model that is like a trace file with commands to do with a timestamp, to be honest I cannot imagine how to tackle this.

Here there is another playground that show a sample of the input file produced by the DES model, it is represented by lines of strings in text file, and for simplicity is given in this playground in the array called “trace” and every push line means a command from the DES model.

try_1 | Babylon.js Playground (babylonjs.com)

What I am looking for is for a bit of inspiration in how to tackle this, I recall that what I wish to achieve is something very similar to the youtube video of maya and simpy beforementioned.
Thanks a lot for any help. God bless you all.
Best,
Andres

2

cc @PatrickRyan , we’ve been discussing a lot our animation system internally so your use case is very valuable information :slight_smile:

2 Likes
3

@Andres_Gomez, I am not sure I am following the exact system you are wanting to make as the ice cream cart sounds like procedural motion where the example you show of the trucks is a predetermined animation path. The road has several options to choose from when it splits, but the trucks must stay on the road and cannot simply drive where they want.

I have two examples I can share to start and encourage you to ping back with more questions if these aren’t quite what you are looking for. The first one is a more procedural motion solution where you are creating the end point and speed of the animation dynamically, being able to interrupt the motion as needed.

This is a fictional product page showing how to integrate a Babylon canvas into a web site. As you can see as you scroll down the page, the position of the HTML content will drive the animation of the device. The code for the example is available in GitHub for you to experiment with. You can see in this example, we are creating a animation every time we move the object or animate a parameter. The animations can be interrupted (if you are scrolling quickly down the page) so that the new animation take the mesh’s current position into account. This would be the approach I would take for a scene entirely driven by procedural motion.

The other option would be if you had a predetermined animation path that your asset follows like in the truck example. I would bake those animations in Maya, and then group them by segment of road. Each group would have a start/end that lines up with either a split in the road or another point at which the truck needs to stop. You can then sequence the animations as you like just by calling play or stop on the animation group associated with the specific truck. You would either clone one of each possible animation group for each truck, or you could clone and dispose of the current animation group that each truck should be playing at any given time. This second option would limit the number of groups in a scene at any given time to the total number of imported groups plus one additional group per truck in the scene.

There was another thread I replied to today that was talking about sequencing animations. This isn’t quite what you are doing, but you can see in the playground example how we are sequencing from one animation group to another using observables. This allows us to know when one animation group ends and we can then either randomly choose another group - in the case of choosing a fork in the road - or timing out before playing the next clip - in the case of pausing for the truck to be loaded.

I hope these examples give you some ideas, but please feel free to ping back and ask more questions if I did not understand the scene you are trying to make correctly.

2 Likes
4

@carolhmj What have you gotten so far? if you do not mind sharing some ideas and bounce information for inspiration of any end. We have just been able to load the layout which is a bit trivial but necessary.

5

Thanks for reaching out, sure thing I will be checking since quouting you in “I have two examples I can share to start and encourage you to ping back with more questions if these aren’t quite what you are looking for. The first one is a more procedural motion solution where you are creating the end point and speed of the animation dynamically, being able to interrupt the motion as needed.” this is more or less the first stage in order to achieve what I want. Thanks again, I will be soon bouncing some questions about it!

1 Like
6

Oh, we’ve basically been discussing how to improve the system in a way that makes it easier to perform more complex animation tasks like your case :smiley: But this won’t be an immediate change, we’ll start working on it more deeply after our upcoming 6.0 release.

1 Like
7

@PatrickRyan hope you are OK and have a spare time to revise post. After reviewing the supplied animation of the procedural motion, I specially focused my attention to the Git file device.js where the core of the animation is (is it true?), but it was hard to follow, I did not identify how actually works this animation, as I am kind of new working with Babylon.js.

The second option you proposed, I feel I am closer to understand. I do not know and have access to Maya so I cannot “bake” the animation in there. But what I have done is the following: I took the car following a path playground and made some variations to gain more control over the car basics behaviours for a DES. So, I added to the animation loop, scene.registerAfterRender() function, another control variable, t, that emulates the time. So, by controlling the increments in t, I can ask the animation to do some behaviours at some values of t and by controlling the position for the next iteration of the animation loop.
The car stops, after the stop keep following the path, then stop again forever and after a time one of the rear wheel disappear from the animation. Those are desirable things that an entity in a DES model does.
here is the playground:

follow path_stopping_finishing | Babylon.js Playground (babylonjs.com)

Some of the challenges to address are:

  • How control the animation time given that in DES all the animation are finite and the animation time is set. I have tried by once t reach a number (that set time described), scene.stopAllAnimations() , but did not work, I guess because the animation is actually by changing the position of the animation objects every set number of frames(I would not know otherwise). Also, I tried by stopping every increment in the position variables at that time value, which is not ending the animation, but pausing it. So, I guess something else should be done. Any ideas? I ask this because I do not fully understand scene.registerAfterRender() works probably, in the documentation is not as easy to get from.

  • In this playground, there is only one car, what happen if I try to have several cars stopping in different places and leaving the animation at different times? by creating a class for car objects, doing some methods that emulates the stop, run, leave behaviours and populate the loop of scene.registerAfterRender() function? I am not sure yet how to successfully do this inside the loop of this function, since I do not fully get what it actually does.

The video of the trucks in Maya I referenced is more to show the desirable outcome of the animation I try to build in Babylon.js, but never with the intention that I know how to deal with Maya.

Since you were not sure to follow the ice cream cart example with customers, which is another common scenario in DES, which is a customer-server(s) queue system. So, by saying this, ice cream cart-customer system is very similar to the customers using an ATM, customer arrives at random times to use the ATM, then leave the ATM.
So, I want to be not only be able to reproduce the truck example, which are a fleet of trucks looping in a set of paths, but also this scenario of the ATM where objects arrive and leave the animation at different times. So, I found another video, this one is in a simulation software called Arena that has its in-built 3D animation functionality (which I do not access neither only by the video), to clarify what I am aiming to, that shows this animation and includes paths to follow by the atm’s customers in the system. The video is 8 minutes plus long, but it is worth to watch it, from the animation perspective, the last two minutes of it, or more precise from 6:28 till the end of it.

Finally, I wanted to ask you about Yuka.js that has a very appealing feature of “Follow Path Steering”, they showcase the use of it with Three.js but they state that Babylon.js can be used in combination with Yuka.js. Any thoughts about it?

Thanks for your help!
Best,

8

Thanks to @labris and @roland we now have a TON of examples of Yuka usage with Babylon :slight_smile: Yuka Game AI + Babylon.js Examples - the 1st Release - Demos and projects - Babylon.js (babylonjs.com)

4 Likes