0

I'm developing a site with hero banners made with three.js. The scenes are VERY simple, and the render run at 60fps even on low end devices. But on mobile I'm experiencing an issue. When a page is scrolled down quite a lot and then scrolled up again, the browser freezes for 1-2 sec (on my device, Android with Chrome Mobile).

I think that is due to Chrome "saving resources" while the canvas is not visible on the viewport. How can I prevent this from happening?

sintj
  • 804
  • 2
  • 11
  • 23
  • The same performance hiccup occurs when an HTML
    expands. It is page reflow and/or repaint. I have tried combinations of content-visibility and offscreenCanvas. I could not make any improvement. I may be wrong, or you may find an answer...? I hope the terms help your search. Maybe react-three-fiber would help performance.
     – PartialFlavor_55KP Mar 11 '22 at 17:53
  • I didn't find an answer. I only found out that with iPhone (chrome or safari doesn't matter) this bug doesn't occur. I think that this is only affecting android. – sintj Mar 13 '22 at 10:06

2 Answers2

1

You have 28 scripts, so maybe there is a lot of overhead. You might try reducing scripts, resolution, and/or switch to a setTimeout. Ultimately, I think this is a direct explanation:

PartialFlavor_55KP
  • 137
  • 1
  • 3
  • 13
  • This is a general good advice, but my opinion is that if the device is struggling the scene wouldn't run at 60 fps. – sintj Mar 14 '22 at 11:16
  • 1
    When the device struggles, the scene FPS almost definitely drops also. Furthermore as I swiped the frozen page it triggered the in-page reload. In fact, if reducing scripts doesn't help, you SHOULD limit FPS when the canvas is off-screen to avoid playing catch-up. – PartialFlavor_55KP Mar 14 '22 at 11:26
  • 1
    Sorry, by "playing catch-up" I mean Three.js shares available resources. Android has different dpi & allocates memory differently. You notice it stutters going back up, but not when you swipe the canvas off-screen. If the canvas were to transition to picture-in-picture (not a suggestion) there would probably be less noticable performance impact. – PartialFlavor_55KP Mar 14 '22 at 12:34
  • 1
    Thanks, your suggestions lead me to the fix. Instead of slowing down the fps, I pause the rendering entirely. This solved the stuttering problem. – sintj Mar 14 '22 at 19:25
1

I fixed my own problem by stopping the rendering while the canvas is out of the viewport with a cancelAnimationFrame. More info in this question: three.js how to stop render when the user can't see the 3d space?

sintj
  • 804
  • 2
  • 11
  • 23