search

utsuboco / r3f-perf

Easily monitor your ThreeJS performances.
https://codesandbox.io/s/perlin-cubes-r3f-perf-wtp9t?file=/src/App.js
MIT License
573 stars 21 forks source link

Potential performance issues (with web workers)? #6

Closed simonghales closed 3 years ago

simonghales commented 3 years ago

Feel free to close / ignore this issue, as it's a bit niche I believe. But I think r3f-perf is having performance issues with web workers, (though it might not even be specific to that.)

I noticed that messages from my physics web worker occasionally would take awhile to be received. Mesages could be delayed by well over 30+ms vs the typical < 1ms

After spending awhile debugging, it seems that removing <Perf/> from my app immediately resolved the issue.

I've uploaded a recording here:

https://gfycat.com/snivelingpersonalanglerfish

In the beginning I'm demonstrating without <Perf/> included, the object moves fine. Then upon reload I demonstrate with <Perf headless /> included, which becomes choppy and in the console messages are printed when the physics is falling out of sync with the main thread (due to message delay).

Then what's probably most useful is from the 43 second mark with <Perf/> added, you can see the GPU graph has spiked and the time displayed is well beyond what one would expect.

Note, this is all from a desktop pc, so it has a decent gpu.

The interesting thing is, the joystick that runs on the main thread never seems to lag, so it's not as if the performance of the website overall is dropping, it's just that the web worker messages are being delayed.

Anyway, this isn't urgent or anything, I just wanted to flag it in case you wanted to know, but it's not a big issue. So feel free to close!

RenaudRohlinger commented 3 years ago

@simonghales I tried a fix with v0.76.0 could you test again please?

simonghales commented 3 years ago

Not entirely, but I'm starting to suspect it might be somehow related to my code? When I move my player character using the keyboard controls I set up, things seem okay, but when I move using an on-screen joystick controller I set up, that's when the latency begins (with <Perf/> included).

Also just noticed now that when I resized the browser by opening the console, suddenly the latency stopped occuring (and when the latency was occuring the graph was claiming on average >100ms (up to 7000ms) for the gpu, but after the resize it dropped to ~15ms.

I'm gonna close this issue for now, as I'm not entirely sure what the cause is considering the inconsistency. If I spend some time looking into it further I'll let you know the outcome.

simonghales commented 3 years ago

This might be a dumb question, but is it intentional to not include the dependency array (empty) for this useEffect https://github.com/RenaudRohlinger/r3f-perf/blob/main/src/headless.tsx#L131

RenaudRohlinger commented 3 years ago

@simonghales oh nice indeed I forgot this one. It might have fixed the onResize issue because the dependency array was missing. Otherwise, I think the gpu variation is relevant because when you open your debugger the drawing surface changes and that might impact consequently the performances.

I did a quick update on npm 0.76.1