Throttling / debouncing useFrame for certain checks

[haywirez]

Throttling certain checks inside useFrame might be useful for performance reasons. In the case of UI interactions (tracking raycaster hits etc.), not everything needs to be checked every single frame. In my "tracked" 3D asset code block that's using a context with references to XR controllers I ended up adding this for emulating a pseudo-hover:

let lastCheck = 0;
useFrame((state, delta) => {
  // check only every 200ms?
  if (lastCheck >= 0.2) {
    const keys = Object.keys(controllers);
    const currentlyIntersecting =
      keys.map((k) => controllers[k].getIntersects(gltf.scene.children)).flat()
        .length > 0;
    if (hovered !== currentlyIntersecting) {
      setHover(currentlyIntersecting);
    }
    lastCheck = 0;
  } else {
    lastCheck += delta;
  }
}, priority);

Planning to look into wrapping with _.debounce or _.throttle but haven't toyed with it further. Any thoughts on a more idiomatic way? How would that work with the second useFrame param (priority )?

[drcmda]

i think thats easy to do in userland

import throttle from 'lodash-es/throttle'

function A() {
  const foo = useCallback(throttle(state => {...}, 200), [])
  useFrame(foo)

i thought about maybe offereing sth like this in r3f, but it's kind of at the threshold of getting bloaty right now, im trying to cut out functionality rather than adding.

[drcmda]

btw, i once forked raycaster and made it skip the detailed steps. it first checks bounds, which is often precise enough for many cases. if we had something like a configurable raycaster in drei that can switch off vertice tests, that would be formidable. it would save so much performance.

if you want to look into it, it's this function: https://github.com/mrdoob/three.js/blob/dev/src/objects/Mesh.js#L128

it could work like ...

import { cheapRaycast } from 'drei'

...
return <mesh raycast={cheapRaycast} ... />

[drcmda]

ha, it seems to work: https://codesandbox.io/s/r3f-basic-demo-8fpip?file=/src/index.js for meshes at least.

[haywirez]

The cheap raycaster idea is brilliant 😄Will look into integrating it tomorrow. Some weeks ago, I ran across this gist from September 2019 titled A look into threejs raycaster
, might also offer some hints for improving its performance.

[drcmda]

i added it to drei :-) i need this too! https://codesandbox.io/s/r3f-basic-demo-8fpip?file=/src/index.js

[drcmda]

if you want to improve it, youre welcome. line support maybe, or something that's more precise but still fast.