How to load a lot of GTB models without performance drops

Questions
,
1

I am trying to create a 3d experience that features a forest in which you can wander (Kind of like Mozilla Hubs) but when I load the Tree models and props, my FPS drops to 12. I tried casting rays to figure out which objects are in the view and removed the rest but this approach droped the FPS to 10. Is there a solution to my problem?
Thanks in advance

2

I’m using props from Polyhaven btw

3

Is the performance drop persistent or temporary?

It’s normal to lose fps when loading new models (more specifically, it’s the new materials + textures that cause the fps stuttering.)

4

Persistant.

5

Performance is inversely proportional to how much work you are asking your computer to do; that’s mostly unavoidable. The work of optimizing requires understanding what work your computer is currently doing and reducing it. There are many prior threads on performance around here, but broadly you’re looking at:

  1. draw calls (aim for <100)
  2. vertices (aim for <100,000)
  3. textures (as few as possible, none over 4K)

Without knowing what your scene contains (please share a demo and code!) we can’t help you know what to optimize, but these are good rules of thumb and with some work you can generally get the visual quality you want while staying within these bounds.

More concretely – if you have many hundreds of trees and props, you cannot render them as separate meshes (i.e. draw calls). Merge them or use THREE.InstancedMesh. If your entire scene is composed into a glTF file, there are good tools for optimizing that file, but if you’re loading each piece dynamically you’ll have to do that optimization at runtime.

2 Likes