Optimizing cloned/instanced meshes playing separate animations

[arcman7]

Hi all

I was playing around with getting a group cloned/instanced meshes to play their animations separately, and in general trying to see if one approach works better than another in terms of performance. Are there any other tricks I could be using to squeeze out even more performance (fps, lower memory usage) in either case of using clones vs instances?

Babylon.js Playground

[Panuchka]

I wondered this a bit in the past as well. It is a bit complicated topic and I think depends on your use case…

Check out this thread:

Animations and performance, tips and tricks?

Hi everyone! I have a pretty generic question about animations and performance. I am making a game where I have these different characters that cannot be instantiated; they need to have separate meshes, textures and animations. I also made a small stress test illustrating the situation, take a look: https://playground.babylonjs.com/#S7E00P#51 Now, the framerate drops quite significantly if there are tens of models in the screen at one time. I can of course see some obvious optimizations, like …

[arcman7]

Thanks for sharing!

This random variable that doesn’t get used is cracking me up right now

const meshTask = assetsManager.addMeshTask(‘Very nice task’, ‘’, path, fileName)

This is definitely useful for exploring the curve of n-entities vs fps for both instances and clones as you scale up the number of entities with animations playing.

[Evgeni_Popov]

Note that by default instantiateModelsToScene will always clone meshes if they have a skeleton, even if you set doNotInstantiate = false. If you want to force instanciation in this case, you should pass () => false for doNotInstantiate.

However, doing so will prevent you to use a different animation for each instance: all instances of a mesh share the same animation.

Since 5.0, we added Baked Texture Animation, if that can help:

Baked Texture Animations | Babylon.js Documentation

[arcman7]

That’s super interesting to learn. So it sounds like in the playground I set up, those birds are always cloned? Yet I thought I had seen a consistent difference in the fps as measured by the babylonjs inspector.

I tried it out as you said, opts = { doNotInstantiate: () => false } and observed all of the instances animations play as one.

A limitation of the current VAT implementation is that you cannot blend animations to play simultaneously. Also, the animations may not be as smooth as when not using BVA because there is no interpolation between frames. The “smoothness” will depend on the number of frames of the animation.

So it sounds like if I wanted to do a large flock of birds in the distance this could work but otherwise is too rigid to work in a game setting where birds close to the player need to be able dynamically stop and go… is it possible to use both baked animations and regular animations on the same model/instance?

[Evgeni_Popov]

@arcman7

So it sounds like in the playground I set up, those birds are always cloned?

Yes indeed.

@arcman7

is it possible to use both baked animations and regular animations on the same model/instance?

I think it should be possible, but not at the same time, as there’s a BakedVertexAnimationManager property on the mesh that you can disable by doing mesh.bakedVertexAnimationManager.isEnabled = false.

[arcman7]

Wow, if that’s the case, that makes some really cool stuff possible. Say for example we have a flock of ducks, animated as flying and moving forward on a given axis at 3m/s:

d0 d2 d4 d6 d7 … d500 … dn-1
d1 d3 d5 … d300 … dn ~~~> 3 m/s

If the game allowed it, the player could click at random any duck in the flock, and that particular duck instance could then be switched over from a baked animation, to the regular more dynamic animation system and do something to display different behavior from the flock?

[Evgeni_Popov]

Yes, it seems it could be work, but you will really know once you test it

[arcman7]

Finishing up some code, and there’s a thread I need to respond on first, but very soon I think I can set up a cool pg to demo it. I’ll also have to learn about baking animations first, but that looks easy enough

[Panuchka]

Really interested seeing your pg!

Also wondering if WebGPU could provide any help in this matter…

[aWeirdo]

WebGPU will change the game completely
drawcalls will no longer be such a huge limitation it is today,
and you’ll be able to just have 100’s of clones playing separate animations

[aWeirdo]

I remember seeing @Deltakosh showing this in a video once,
this version was just what i found from a quick google
i believe it’s 10000 static clones in each scene.

WebGL vs WebGPU: BabylonJS

[Panuchka]

I wish it could be validated already… Trying to run my example from the other thread gives bazillion errors in google chrome canary with webgpu turned on

[Raggar]

This could be useful, too

@Raggar

I actually created a POC some time ago:

Babylon.js Playground

It let’s you* play different animations on instances, as well as allows you do move, scale and rotate bones dynamically. My arachnid is a bad test case as it has 110 bones(loads of helpers from Max’ IK)
It’s only a very basic POC and could probably do with quite a bit of rewriting. For instance, meshes not in the camera’s frustum are still calculated. I just did a quick test using the VAT shader

Bone matrices are still calculated on the CPU though, so the only win is fewer drawcalls

[Panuchka]

Pretty cool!

There is additional requirement at least in my case, since I need some specific trickery with lighting as well and that sorcery only works with clones…

[arcman7]

Hypothetically would it make sense to have bone calculations done in a wasm module and it would just write the results to a shared buffer array that babylon.js would internally reading from?

[arcman7]

Really interested seeing your pg!

Yeah, getting around to it soon-ish, lol, I just keep getting side tracked by things that I need to do first.

[Panuchka]

@arcman7

I just keep getting side tracked by things that I need to do first.

Feeling you