Threejs is dropping frame when scrolling on mobile

Questions
1

Hi guys,I am working on a project everything is good except on mobile when I scroll the page the framerate drops drastically, I am not sure why and it only happens on mobile.

https://webdesign-flash.ro/ht/pap/build/

1 Like
2

The app is potentially fragment shader bound. For testing, can you see an improvement in performance if you disable post processing on mobile?

3

I tried to disable the post-processing but still the same issue, when scrolled and when the player gets in the viewport the scroll gets laggy and frame rate drops, I don’t understand why…

4

I have finished the product Plasmic Audio Player

Thank you for your help.

5

How did you solve the issue? I have the same problem, but on desktop.

6

I could not find a solution other than disabling the post-processing… I don’t understand why this is happening, it makes no sense to me!

I am not sure about your project but make sure to keep a maximum of 60 FPS in my tests, especially on mobile I had even 170FPS and this drains the battery like crazy, 60FPS is more than enough to have a perfect visual experience.

7

Got it, thank you for the tips! I disable post-processing on mobile devices but want to keep it enabled on desktop. Can you suggest how to manage FPS limiting?

8

Sure this is how I did it in the render function

const fpsInterval = 1000 / 70;
const current = Date.now();

this.delta = current - this.current;
  
this.elapsed += this.isPlaying ? this.delta : 0;
  
if(this.delta < fpsInterval) return;

// Ececute your render code here!
1 Like