Hello I wanted to create a huge land model by adding Small Land (2 x 2 ) GLTF model side by side, but it decrease the performance can anyone help me how to create huge land by using single (2x2) GLTF model?
By merging small models into a big one, maybe? 
I wanted to display 100 same model, if I do that directly the performance will be reduced in website so any other ideas for that?
Devil hides in details 
Then instancing?
-
merge
- ups: fast
- downs: individual elements are now fixed, nothing can ever change
-
THREE.InstancedMesh
- ups: fast, individual elements can change
- downs: elements can’t nest, it’s kept in a blob outside the regular scene graph, the whole app needs to be rewritten for it, instances don’t cull, only one pair of geometry + material
-
drei/Instance (requires React + react-three-fiber)
- ups: fast, individual elements can change, elements can naturally nest, multiple pairs of geometry + material, app doesn’t need a rewrite
- downs: updateMatrix/each frame for each tracking THREE.Object3D, instances don’t cull
-
THREE.BatchedMesh
- ups: fast, individual elements can change, elements cull, multiple geometries
- downs: elements can’t nest, it’s kept in a blob outside the regular scene graph, the whole app needs to be rewritten for it, only one material
-
custom shaders
- ups: fastest possible
- downs: hardest possible, you would cull, position, rotate, scale, animate etc inside the shader
drei/instance would be my go to choice for dynamic apps written in three+react. it’s very fast, you have nesting and grouping, an app that previously used multiple geometries doesn’t have to be rewritten, just change the meshes in place with instances. if it’s not hundreds of thousands of objects, pick this, if you can.
in vanilla you use either instanced or batched, they’re not easy to use or easy to integrate in an otherwise nested app as everything happens in a blob separate from the rest of the scene. but they will give you the best performance. if it’s hundreds of thousands objects pick this.
2 Likes
Thank you it helped me but i want the models to be displayed side by side in square format
it does not matter how you position them, side by side, on top of one another, randomly, you must choose a strategy. they all allow you to position side by side.
1 Like
Thank you for the solution.
Don’t forget the underated LOD as a performance option.
Here are 2500 LOD trees in a grid formation.
1 Like
is there any tutorials like this in react three fiber like placing huge models in grid format?
no but it would be straight forward, i don’t think this would warrant a lesson or tutorial.
here’s how you use plain three.instancedmesh (with animations and interaction) in fiber
if you don’t need animations and interactions just remove all the extra code.
1 Like
btw, how many individual elements/tiles do you plan to have? maybe you’re doing something wrong. if you share geometry and material you can have thousands of meshes without doing anything special. distinct geometries and materials bring performance down, not the amount of draw calls per se.
I thought instead of placing the whole land, take the single tile and display this tile side by side using instances.
If im wrong please correct me because Im new for r3f.
the whole land is one geometry and one material? and you want 5 more, with unique geom+mat? in that case instancing will do nothing. it seems more related to vertex count and using game-ready, simplified assets.
The whole land is not one material. The whole land as 30-40 land tiles. Single tile is about 2x2cm i think and there are other components like birds, trees etc. What should i do?
This is the single piece land tile that is 2x2cm and to make a whole land they have used 30-40 single piece land tiles by placing them side by side.
it depends on vertex count, i can’t that from, these images. you would see it in blender. whoever gave you the models, ask them to make them game ready with as few vertices as possible.
try this, open shell, type:
npx gltfjsx yourmodel.glb --transform --instanceall
this will recognize similar geometries and instance them. the file it gives you already has all the varying parts set up as instanced and you can have x ground tiles for instance in a single drawcall, x trees a single call etc.
1 Like