GLTF Loading performance for large files - R3F?

Hi everyone,

I have a question regarding a large gltf model loading.

Let’s say even with all compression tools, the glb is still sizeable (in the 100 Mb or even Gbs). Would it be appropriate to have a window panel with all the nodes and geometries of the gltf displayed, but unchecked when the scene is first initialized for performance purposes (no object is displayed on the scene).

As an example, imagine if you want to display a city (scene) containing roads, cars, houses, people, parcs, etc. However, its extremely rare that we want to display all at once. If we would want to display roads and cars only, Would it make a difference if we have a panel like the attached picture, and the user can only check specific groups.

Would this make things run faster ? or would it be wiser to break down the gltf models into sub-models and load them individually on demand.

What about R3F ? is there any value in doing it this way ?

Thanks for your input


first i’d look into compressing it some more, 100mb is crazy for a web app. then perhaps you can re-use/instance things or dress up differently, like roads, buildings and cars. i would also suggest LODs, fog, everything you can possibly do to minimize drawcalls. there’s a larger article about how react can help you to scale performance here: scaling performance

it makes no performance difference if you load a single glb or multiple, it can make a loading-time difference if you are able to lazy load only the parts you need, react would make that very easy.

not showing stuff coupled to a sidebar with checks of course would reduce drawcalls, something not shown lessens the render effort. but if all checks are marked and it then craps out that would be unacceptable, so i’d focus on getting the bulk render ok first.

THREE.GLTFLoader has some ability to lazy-load parts of the file, but it’s not a primary focus and you’d need to specially prepare the file by splitting data for each mesh into separate .bin files (see “partition” command here).

Whether a sidebar is an appropriate way to manage loading of the scene really depends on your application – if that UI/UX makes sense for your users, great! Having lots of small GLBs would be a fair enough way to handle that.

If you’d rather not have a sidebar but just load things automatically as the user navigates through a 3D space, formats like 3D Tiles (which can embed glTF files in each ‘tile’) are probably more appropriate.

This sort of ‘tiling’ setup is also very feasible to build custom for your application.

1 Like

Awesome guys !
Thanks for your valuable inputs !