Huge performance difference between chrome and firefox

Questions
1

Hi,
I am working on this website : https://egreact3.vercel.app/ and the main canvas doesn’t even succeed to print anything on chrome for me for the moment. I have no problem at all with firefox, not even a slow down. All the particles are moved with full js, which is not optimum but I can’t make ping pong fbo for the moment. Reducing the number of particles doesn’t change anything and I think that performances are getting worst each time I try on chrome. Do you know what is going on ?
Thanks

2

Maybe disabled hardware acceleration

3

Thanks for your answer but I have already tried

4

Works ok-ish on MacOS Chrome 131 - but yeah, the performance overall is a bit :skull:

Your code is minified, so it’s more guessing than actual debugging, but:

  1. You’re doing something relatively very expensive in requestAnimationFrame / animation loop at 60fps. Consider not doing that.
  2. If I understand the minified code right, you’re doing a loop through all the particles on every frame and create a new Vector3 for each particle - that’s quite very super expensive and will trigger GC quite very super often if there’s a lot of particles. Just put the vector above the loop and reuse it, there’s no reason to create more than 2-3 calculation Vector3’s per application, most of calculations are non-parallel.
const tmp = new THREE.Vector3();

const onFrame = () => {
  requestAnimationFrame(onFrame);

  for (let i = 0; i < 1000000; i++) {
    particle[i].getWorldPosition(tmp);

    // NOTE Do calculations...
  }
};
onFrame();
  1. You can use Chrome devtools Performance tab to record and check bottlenecks in performance on unminified code - will be likely easier to debug :see_no_evil:

perf
perf1355×952 184 KB

5

wow, thanks a lot, it’s time for me to learn this kind of things !

6

Thank you for taking some time for this.