Pointer Events Grind to a Halt with Devtools Open.

[tonetime]

Hi everyone,

New to r3f and I am having trouble debugging a problem. I see some serious FPS drop when working with meshes that have pointer/drag events. ( when chrome devtools is open )

https://codesandbox.io/s/holy-brook-cgnqg

The mesh is moderately complex and a simple shape does not exhibit this. I have tried using meshBounds and stopPropogation with no luck. Seems to be fine when devtools is closed but it is definitely annoying and is a signal of something not doing what I think it should be doing. Anyone experience this before? Any thoughts on how to further debug it?

Thanks! George

[Honga1]

I've seen this before with React dev tools / non production builds.

#639

Could help!

[tonetime]

Thanks! Glad someone else has seen that as well. I did disable react tools to no effect. I am hoping to dig in a little deeper when I get some time.

[drcmda]

i think that's more of a problem with devtools and chrome, or with your laptop and/or operating system. on mac (m1) it's always 60fps. events can still be expensive on the cpu, combined with react devtool overhead which is hundreds of times more than production it could be problematic. but i doubt this is something that can be helped on our side.

[drcmda]

btw <group raycast={meshBounds} does nothing at all. raycast is a function on meshes and linesegments. if you want that you must exchange it on the meshes that receive rays.

so i guess this would fix your problem:

  useLayoutEffect(
    () =>
      void scene.traverse((obj) => {
        if (obj.isMesh) {
          obj.material = material;
          obj.raycast = meshBounds;
        }
      }),
    []
  );

but you should be using gltfjsx if you want to alter the graph, traversal and mutation isn't a good idea most often: https://github.com/pmndrs/gltfjsx and as an online tool http://gltf.pmnd.rs

[tonetime]

Thank you! I did not fully understand where raycasting worked. obj.raycast = meshBounds fixed the problem 100%.

My project requires the loading of meshes on demand ( here's an early prototype of dragging and dropping objects into the scene: https://mattoboard-b8284.web.app/). Do you think it's wise to generate gltfjsx files and then use React lazy to load them on demand?

[drcmda]

gltfjsx is only good when you statically know about the file. dynamic assets have to be traversed in order to change things.