Low frame rate in React based Three.js application

Questions
,
1

Hi Everyone,

I have written a Three.js application on react.js. After the development was complete I found that the FPS was limiting itself to 40FPS on the browser and about 10-15FPS on the phone browsers.

So, to see what was limiting the frame rate of my application I started removing objects from the scene one by one to see if the FPS increased and eventually ended up having a scene without children.

But I still see that the FPS is limiting itself to 40FPS on the browser and slight increase (30FPS) on the phone, which kinda tells me that React.js somehow is limiting the FPS of the application somehow. (Probably limiting the frame rate somehow). So I built my application for release mode and then tested it again just in case. But the issue seems to persist even then.

Is this a known bug? Does anyone know about this issue?

Any help would be invaluable.

Regards
Srinivas

2

react is only active when props change, it will (should) never interfere with your framerate unless you’re doing something bad, like setStating an animation or involve it in any way that keeps it busy. chrome dev tools will tell you immediately if it’s active every frame or not.

i’ve collected react specific performance hints here: https://github.com/react-spring/react-three-fiber/blob/ff0c2d3d161b4d4d171d88a8a06e29fc8fc3f2f1/pitfalls.md you probably use raw threejs, but the same principles apply. i would still suggest r3f, it has a toolset that makes managing three easier, useFrame for instance. without this pitfalls are pretty much inevitable bc you’re mixing two worlds: imperative & declarative, they’re naturally clashing.

1 Like
3

Hi Paul,

Yes, you are right, react wasn’t the reason in this case for the lower framerate that I had.

I found one of the issues, i.e I had a GIF image on top of the viewer to point to something which was decreasing the frame-rate on the desktop browser. I looked around in Chrome Dev window and saw the composite paint was taking about 30ms which was decreasing my overall frame-rate. But yeah, I am still fixing the issue on the phone which has shown no improvement at the moment. (Probably due to post-processing etc )

In my case, I have used Raw three.js at the moment but I will definitely consider using r3f for my future projects.

Regards,
Srinivas