Performance issue with Angular

Hi, i was struggling a long while with performance problems with Babylon and think it can be produced by angular.

My app looks like this:

I load all the meshes and create the geometries of all the elements on scene once, and then clone or instance them.

In the case of walls they are all instances of same mesh, but the characters on the map are clones of various meshes that are putted together with the same skeleton. This means each character has various meshes like hair, body, shirt, etc (all are clones of the loaded ones with their own material cloned too).

With walls i have no problem, can add a lot of them and the performance stay high. But with characters the performance (fps) lows a lot for each one i add. And same with doors, that are clones too (because i need to hide them individually)

The same scene only with walls (up to 200 or more maybe) runs at 120-140fps in my pc, but with 20 characters and 40 doors it slows down to 40-60fps.

I did a performance record of the scene for 8 seconds with up to 20 characters and 40 doors. The result on the call tree shows that most of the time is occupied by zone-evergreen (angular):

Here is the profiling file made with Chrome: Profile-20210503T113513

I’m not an expert on profiling so i don’t know if it’s the problem or not.
Anyway i don’t know how to solve it too.

I think this amount of meshes is not too much for a GPU, maybe there are 300 clones in total made from 25-50 different geometries. Maybe i’m wrong and this application is inviable.

The render loop of the scene is executed this way:

// ignore the change events from the Engine in the Angular ngZone
this.ngZone.runOutsideAngular(() => {
// start the render loop and therefore start the Engine
this.engine.runRenderLoop(() => this.scene.render())

Hope you can help me.

Just looking at your profiler I can definitely tell you that you have a major GC issue: meaning you are creating TOO much objects per frame (And this is probably linked to Angular honestly)

Also you need to open the “Function call” in the profile to see what is contributing to your perf issue

300 clones of 25-50 geo is definitely not the issue

I’m trying to solve this but i have no clue on how to make angular not detect changes on babylon engine. I though it could be done with “ngZone.runOutsideAngular” but this do not solve the issue.

No idea :frowning: not an angular user unfortunately

Found that much part of the low performance was produced by the skeletons of characters. I had been cloning the base skeleton on the clothes meshes instead of use the same and this slows down a lot.

Another thing i fixed was putting the ngZone.runOutsideAngular on the correct places, you need to put it again on the callbacks functions, because it will run on the zone anyway if you put it only in the upper scope.

Now the scene run between 90-130 fps, it’s still a little low considering the little of the scene and the specifications of my pc (Ryzen7 and RX580)

Something i notice is that how much more meshes put outside the camera view (panning the camera) the fps increase more (144 fps when there is nothing on screen). Why this happening?

Thanks DK.

Well because the engine only computes what is inside the view frustum of the camera :slight_smile:
This is called frustum culling