CODEWITHSUNDEEP
androidperformancegoogle-chromethree.jswebgl
sintj
sintj

Reputation: 814

Navigation stutters with webGL context active on mobile

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?

Upvotes: 0

Views: 271

Answers (2)

sintj
sintj

Reputation: 814

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?

Upvotes: 1

PartialFlavor_55KP
PartialFlavor_55KP

Reputation: 157

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:

Upvotes: 1

Related Questions