fiery lance
I have a comparison gallery with one each of WebGL, Three, and R3F, all controlled by the same slider inputs and state hook. The WebGL and Three examples always re-render whenever props change, but when props change very rapidly, R3F mesh (console log "inside triangle") fails to re-render as often. See attached pic.
Here's my current code: https://github.com/affordances/webgl-rosetta-stone/blob/main/src/components/howItWorks/varyingTriangle/ReactThreeFiberVaryingTriangle.tsx
Any ideas?
hard vigil
without looking into it, have you made it so things dont re-render while sliding, only after?
fiery lance
i've set frameloop="demand" on the Canvas, if that's what you mean
if you mean debouncing the webgl and three examples so they behave like the r3f example, i can see the argument for that, but first i'd like to know why the r3f example doesn't do what i expect
hard vigil
is the performance bad when the slider is being used left and right?
Or is performance bad 24/7?
The console.log may not be firing due to too many state updates skipping frames.
I couldn't see state in that example, but if there is anything in the useFrame that is changing state, it's a bit of a no-no
Is performance fine if the useFrame is commented out?
Sorry, I can't load the example so it's difficult to provide in-depth info
I'm not meaning frameloop=demand, basically if the slider is being used and it causes performance issues, only run the useFrame when the user has stopped using the slider
useFrame(() => { if (materialRef.current && !controlsInUse) {
fiery lance
specifically the r3f example stops updating when props change, if props change very rapidly
i update a ref in the useFrame but afaik that's ok?
the discrepancy in updates is still there even when i comment out useFrame
does r3f debounce updates automatically?
fiery lance
phenomenon persists even if i comment out everything inside the component besides the bare mesh
leading me to believe it's something in Canvas
should i be using zustand to manage state instead of useState?
or rather, when is it important to do so?
fiery lance
got some clarification in poimandres discord