Threejs Performance bottleneck?

Questions
1

Hi all
I’m new to threejs and want to get some hints for performance issues I encountered

I have a relative small .glb file

I just want to create it for 40 times by using for loop and scene.add()

But my Chrome 78 crashes, on a 2-year-old thinkpad x1 yoga that has only a intel cpu(i7-7500U) and its embedded gpu(Intel® HD Graphics 620)

My question is quite simple:
is this something expected according to threejs’s inherent performance and my hardware?

or I could easily optimize this significantly by js coding?
(Since I’m not familar with threejs, lots of my codes are just simplest ones)

Big thanks in advance:)

2

Hi, welcome to Three.js !

First of all, your model is not relatively small, as I count 26,000 polygons. As you add it 40 times, it’s about a 1 million polygon scene, which is quite a lot.

Two things :

  • For real-time rendering, you might want to optimise your model. You can use a normal map to render the details of your model while keeping the number of polygons low. On Youtube there is videos explaining how to do that in Blender. For this model, I don’t think you should need more than 3,000 polygons at most.
  • There is a way in three js to tell your GPU to render an object several times at different places, without the need to actually have the polygons in the scene. If you want to render this exact model 40 times, this is something you should consider. Have a look at InstancedMesh

If you follow this two advices, your scene will drop from 1 million polygons to 3,000, and performance will be much better.

In Three.js, the most important bottleneck is yourself, and how you are able and willing to optimise your work.

7 Likes
3

Thanks fleix~

Awesome suggestions!

I would certainly take it seriously and put my head into this beautiful js world

1 Like