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?
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
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.
ps, if nothing helps you can adapt performance to the device the app is running on with drei/performancemonitor: https://twitter.com/0xca0a/status/1563958783805620225 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.
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.