How to handle many complex skinned mesh models animating at the same time on a seenable frustum in the scene?


I am working on a multiplayer browser based three.js first person shooter game. Now i came to the part where my nightmares start. I am trying to play with 29 more players except me in a single match and the player models are are 800kbs. I reduced the vertices but stuck at a point where i can not anymore because the quality gets disturbing among the scene and the environment. I use skinned meshes and each player has animation system. What i have in my future plans are;

1- Use LOD with 5 more reduced vertices geometry ( dont know if it is suitable with skinned meshes)
2- Hide players based on their frustum areas which i choosed and implemented manually. Also implemented updateMatrix false on the hidden objects

but what will happen if these 30 players with me meet in a point. Is there anything i can do like instancing on skinned meshes and change their positions whenever i want?

I shared a video below demonstrating the situation where 11 players with me on the same area (10 of them are fake bots to test the netwroking speed) , fps rate got down from 60 to nearly 20 when renderer renders all the skinned meshes at the same time. Is there any chance that this can be done with three.js

Video of the issue:


Can you please verify first if your application is actually CPU or GPU bound. Do it like so:

  • If you decrease the geometric complexity of your models and the performance problem goes away, it indicates a problem in the vertex shader.
  • If you decrease the resolution and the performance problem goes away, it indicates a problem in the fragment shader. But I don’t think this is relevant in your case.
  • There might be a bottleneck on the CPU side. You can easily verify this with e.g. the Chrome development tools and the respective performance analysis.

Since your players do no share a common animation state, it’s unfortunately not possible to use THREE.AnimationObjectGroup.

Instanced rendering only reduces the CPU overhead since you lower the amount of draw calls. The overhead in the vertex shader is still the same.

Thanks for the information. From the begining, i always tried and made optimizations to get the cpu between around 50% - 90%. CPU bottlenecks also causes the fps decrease slowly after an amount of time after the scene has started ( for example i am having this issue when i add looping audios with positional audio to an object ). So as you said, it is probably the vertex shader. But i haven’t edited the vertex shader in the code. How can this be?

You maybe just hit a limitation of the library, WebGL and or your hardware. Calculating complex vertex transformations for that amount of players might be too much. Sry, I can only provide more specific/detailed information with debugging.

Well that would be great. If you have time and availability you can just sign up with only nick and pass on (sorry for this, for now i havent deployed play as guest option) and i will deploy it around 30 min - 1 hour and send the match link here. If you can’t just no problem. Thanks for helping.