Debugging low fps in webxr

Hi. Recently started using threejs and love it. Thanks for all your great work!

I made a small guide to introduce students to an engineering lab that they need to do, to help them get prepared for the work they’re about to do. Works great as far as I can tell.
I decided to try it using the webxr plugins, but unfortunately the frame rate is really low when moving around the scene. Tested using a pico neo2, and quest2. The frame rate goes back to normal when the quest 2 is tethered. I was wondering if anyone has any tips on what can be done to debug this type of issue?

What I’ve tried so far:

  • reduce the model polys from 600k to 30k ( the one you see there is only the table) I couldn’t percieve any perfomance change.
  • tried to check for warnings/errors in the console, and there I get the following: WebGL warning: drawBuffers: buffers[i] must be NONE or COLOR_ATTACHMENTi. Possibly related to this issue? Not sure if that is the cause of the perfomance issues though
  • I tried to replicated the performance test from this webpage. See Image below, it appears that the animation function runs quickly, but the call is quite slow when moving around.

Let me know if there anything else I can add- I’m not sure what I can show in terms of code, most of the stuff I got are just code snippets from examples on the threejs site.
Thanks!

In case someone stumbles across this in the future, the change that made the biggest difference was to turn off shadows, i had two directional lights in the scene and removed the following line:
directionalLight.castShadow = true
Now he scene is running fine.

1 Like