react-xr
react-xr copied to clipboard
Interactive component high CPU usage when wrapping large models
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
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
For now I placed a fully transparent simple cube over the complex object and added interactive to it.
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