react-xr icon indicating copy to clipboard operation
react-xr copied to clipboard

Interactive component high CPU usage when wrapping large models

Open Korben3 opened this issue 2 years ago • 2 comments

When wrapping large/ complex models in the very useful Interactive component the CPU usage increases a lot. This causes stuttering in VR headsets and laptop fans to go crazy. This doesn't happen with simple models.

  • After clicking the Enter VR button, Chrome taskmanager indicates that the tab is using around 20% CPU.
  • Hovering over the simple cube wrapped with an interactive component increases the CPU usage to ~25%.
  • Hovering over the complex cube wrapped with an interactive component increases the CPU usage to ~90%.

simple cube: 2 KB, 24 vertices complex cube: 12 MB, 280.260 vertices

The more complex the model, the more heavy it becomes when wrapped within an Interactive component and hovered with the controller ray.

See the used cubes and try it out using this repo: https://github.com/Korben3/inter-example

image

Korben3 avatar Sep 03 '22 10:09 Korben3

I presume the problem to be the fact that we raycast each frame (not sure if this can be improved by itself). I wonder why hovering the simple cube increases cpu consumption but for a complex one you can probably use BVH (drei has it https://github.com/pmndrs/drei#usebvh) or other approaches of simplifying the raycast process

saitonakamura avatar Sep 06 '22 18:09 saitonakamura

For now I placed a fully transparent simple cube over the complex object and added interactive to it.

ghost avatar Sep 07 '22 07:09 ghost

There's also https://github.com/pmndrs/drei#meshbounds by the way. I'm closing this for now since I'm not sure about simple cube cpu consumption (if you have a repro however I'm willing to investigate) and I'm not sure if anything can be done on the react-xr side to prevent cpu consumption with complex objects

saitonakamura avatar Sep 26 '22 15:09 saitonakamura