I’m working on a project where I’m essentially building an editor to create tile based maps, sort of like a game board. With some helpful feedback from the forum, I’ve gotten to the point where I have an editor using
InstancedMesh for each tile type and can build very large boards of tiles in a way that feels pretty performant.
I’m now working on adding character model to the scene, kind of like game pieces. Right now I’m working with some low poly gltf models. Before I get too far, however, I want to have a reasonable understanding of how I should be thinking of performance with respect to models like this. To clarify, I’m currently just using the robot model in this example as a test case: https://threejs.org/examples/?q=animation#webgl_animation_skinning_morph.
I have a general understanding of instancing from a simple mesh point of view, but it’s not too clear to me what a best practice for using multiple models like this in a scene would be. I’ve set up a service that will load the model, or, if it has already been loaded, clone it with
SkeletonUtils.clone() based on this example https://threejs.org/examples/?q=animation#webgl_animation_multiple. This seems to be reusing the geometries and not creating new ones, as my geometry count stays the same, but allows them to be animated individually. However, draw calls go up with each model added and each model itself seems to require many draw calls. If I add ~15 or so, I start to drop frames.
So generally I’m wondering what best practices look like for importing models like this. I kind of have two high level questions:
- Are models with animations generally expensive/require many draw calls each based on the model? Is there any similar concept of instancing like with instanced meshes that allows them to be animated individually?
- Alternatively, is it possible to import the robot model and merge the meshes to a single mesh, retaining the materials and giving up the animations to drastically reduce the number of draw calls related to each model? This could potentially allow me to easily use
InstancedMeshto implement multiple in the scene if I wanted to as well. Is this something that would generally happen after you import a model in Three.js, or would you export a model differently from Blender?
I’ve been searching for details around the above, and I’ve found a handful of posts on here that seem related, but I feel like I’m missing some of the general context around how this is generally handled in 3d projects to piece together an approach. I’m trying to keep performance as a fairly important aspect of this project, so I’d like to get a good handle on a holistic approach for and managing models moving forward.
Thanks for any advice!