Hi,
I’m working on a tower defense game based on three.js. Now I’m stuck at optimizing the performance. My game load two GLTF models as enemy and tower, both have skinned-mesh. When the player creates a tower or game spawn an enemy, I use THREE.AnimationUtils.clone to clone the loaded model then add this cloned model to the scene. For animation, I use THREE.AnimationObjectGroup to animate all the enemies. This result average 370 draw-call per frame in the performance test with the scene loaded 45 towers and 70 enemies, which is a nightmare for the game.
The following is the screenshot of the performance test and the analysis using Chrome dev tool:
I think maybe using instancing can optimize the performance because every tower and enemy share the same model and state in each frame, but only rotation and position are different. But after I studied some examples using instancing, there is no example using instancing with skinned-mesh.
Is there any chance that this can be done with three.js, or some other solution for this situation?
Thanks!