How to optimize performance in Threejs?

Hello Friends,

I am currently working on a space scene build with react-three-fibre and react-three-drei. I use the stars object multiple times to add more dynamic and different star sizes into the night sky. Furthermore I have some basic geometries and I am loading three different models into the scene. The models are not super high poly objects, however I got strong performance issues and would like to ask you some questions:

  • How to analyse which object causes these perfourmance issues?
  • How to optimize performance with Threejs?
  • Is it ok to use multiple stars objects to increase the dynamic of the starlit sky?

I highly apprechiate your help!

Thank you =)

In order to find out which object caused the issue you can use: in your code, it will show the frame rate going down in red color if that object is demanding higher resources.<a-scene stats

Hi Akhilesh,

thanks for your answer!

Do you mean statistic performance tools like react-stats?

I already tried to install this tool, but I got an error. I just copy and paste the sample code from the description but it did not work.

performance tips and tricks in threejs, read this from a - z: The Big List of three.js Tips and Tricks! | Discover three.js it goes through all the common issues and it’s good to know in general.

scaling performance: React Three Fiber Documentation lists a bunch of tools that help you to make your app/game resilient so that it runs everywhere, from weak devices to the most powerful.

btw the Stars component has a count property, i don’t think it makes sense to duplicate it, and if you do keep in mind you’re rendering thousands of objects. while threejs is very fast and handles a vast amount of objects, i wouldn’t exaggerate.

1 Like

ps, if nothing helps you can adapt performance to the device the app is running on with drei/performancemonitor: with this the app gradually finds its own sweet spot by dialing quality down until it sits in a safe margin. we have this running at Next.js Conf (when you check out the ticket and click explore), and it’s working very well.

1 Like

@drcmda Thank you, this was very helpful =)

About the Stars component:
I already deleted the additional Stars to get a better performacnce. However I miss the dynamic and depth inside the stars component. The idea was to use multiple Stars components in order to show a small amount of Stars with a bigger size and a large amout of stars with a smaller size. When I just use one Stars component then all stars will have the same size and the same saturation.

Btw, is it possible to display the stars as a cross or a cube? I would like to get some more option to controll the design of the stars and out of the box they are a bit blurred out.

I will use the tools you suggested and hope it will increase the performance significantly.

I just recognized that the file size from one of my 3D models is around 150MB and therefore I got an error when I tried to upload my project on github. Can anyone recommend a tool to decrease the scene.bin file size?

PS: I used gltfjsx library to convert a gltf file into a JavaScript file.

Thank you for help!