Multiple mesh rendering lags

I have a house model and a garbage model. There are many garbage (that is, many sub-objects) in the garbage model, such as: waste paper balls, fish bones, etc. For example, fish bones may have more than one material. The fish head is a material, and the fish bones are a material. When I created 600 pieces of garbage (maybe 20 different kinds of garbage of their kind), my renderer’s function was executed on the mobile device every time It takes about 60ms, how can I optimize it?

And I also need to use ammo.js to make the grid fall freely, which means I need to manage the position and rotation of each grid.

Have an artist merge all your model types into one material and one texture so they can share the same material. Then you can use InstancedMesh to make the copies. Also consider compressing or optimizing your gltf files with gltfpack and meshopt. 📦 gltfpack | meshoptimizer
In some cases it can implement the instancing for you I believe.

My model has been compressed by gltfpack, and a public material has been set in the model, but InstancedMesh must use a material to create a copy, which means that similar to a fish, its head and bones will be the same color.

1 Like

Yeah. Another approach, if all the models are static… is to merge them into a single mesh… but if you expect to dynamically add /remove them, this becomes less practical.

There isn’t really an automated way to combine materials into a single material… this is usually something done in the modelling software.

If I use texture mapping to merge the fish into one geometry, is this feasible?

If you have multiple meshes, that all use the same material and geometry, you can merge them into one geometry and one mesh.

You can use vertex colors, i.e. each vertex to have own color. Vertex colors are part of the geometry, not the material. Thus you can have an object with a single material and single geometry that have different parts colored differently.