Render the same model many times（obj-model）,FPS is much lower

Questions
1

I tried to render 150 of the same tree models in the program, but the FPS suddenly dropped from 60 to 30 +. Can you tell me what’s the best solution? Be deeply grateful。
peace and love 。 skr~

2

There are two typical ways to solve this performance issue (too many draw calls):

  • Use instanced rendering
  • Merge all geometries into a single one (so you have just one mesh)

There are several three.js examples which demonstrate instanced rendering in detail:

https://threejs.org/examples/?q=instancing

Merging geometries via BufferGeometryUtils.mergeBufferGeometries() is demonstrated here:

https://threejs.org/examples/webgl_geometry_minecraft

If your trees are static then start with geometry merging. If it’s necessary to animate or move them in an independent fashion, instanced rendering is more flexibel.

1 Like
3

Am I right that if the model is large (in data), then instancing will reuse the same buffer, whereas merging will create a single much larger geometry that may even be too large?

4

Correct, merging results in a larger buffer. However, it’s easier for users to start with merging since you need custom shader programs for instancing.

2 Likes
5

since you need custom shader programs for instancing.

In the meanwhile, this is no longer true. With the new InstancedMesh class, it’s now possible to use instanced rendering with all built-in materials without writing custom shader code.