Invalidating frames only during GLTF animation, with frameloop = demand?

[leone6]

hello all, i am making a game using r3f. the game is a strategy game so the game components will be resting for a majority of the time, and only moving position occasionally so i am using a demand frameloop to avoid needless re-renders.

react spring has worked perfectly with a demand frameloop (using version 9.2.1) for animating positions of game components.

but... i have some gltf animations that do not require changing props like position, rotation, etc.

so i have been trying to figure out the best way to invalidate frameloops while the gltf animation is running (let's say the gltf animation is triggered by an event like a click). but right after the animation is finished, i'd like the frameloop to go back to rendering only on demand.

somehow drei controls and react spring have figured this out but i'm a bit confused on how to implement their invalidation methods.

any ideas?

[drcmda]

r3f exposes invalidate, either in the imports or as part of useThree. drei controls call that inside the "change" event. same for spring, it calls it when it updates. a gltf animation could be tricky, i don't know if three gives you something like a onFrame, onChange, ... you need to call invalidate somewhere.

[drcmda]

ok, that wasn't so hard: https://codesandbox.io/s/gltf-animations-forked-dcwov?file=/src/Model.js

  useFrame(() => action.isRunning() && invalidate())

[drcmda]

updated the sandbox, it seems it can get out of sync. you need something like a clear update signal from threejs to invalidate, isRunning is probably not good enough.

[drcmda]

updated it again, this time listening to events, looks OK

[leone6]

great, it looks good to me although i noticed sometimes it is missing the first click for me. but it seems more reliable than the original sandbox method.

i noticed this method is dependent on useframe. to this point in my app i haven't used useframe for anything. i only use springs. because springs invalidate frames, i can also run gltf animations while the spring is running.

in terms of game design, let's say there are many gltfs that each have their own animations, maybe even dozens of gltfs - would using useframe on each gltf cause performance issues? i'm wondering if i should just allow the frameloop to continually render instead of using demand? i could try it out and test it but i am several weeks away from having all my gltfs ready

[drcmda]

useframe is just a function call inside the renderloop. it's the most important r3f hook, it allows components to participate in the renderloop. that useAnimation hook from drei calls mixer.update(delta) inside a useframe. there's no performance problem unless you're doing expensive stuff in it.

[leone6]

got it, i need to practice using useframe more. thank you for the weekend homework, and for all of your help