Performance drop only when the animation is behind the page. (react-three-fiber)

Hi everyone!

I am having problems with the performance of the animation when it is placed as the background of the page - and not always. It is very visible on weaker smartphones.

I am using:

  • instancedMesh
  • instancedBufferAttribute
  • meshLambertMaterial
  • sphereBufferGeometry
  • useFrame computation is light.

Live demo:

Link to code:

How can I fix the performance degradation?

Thanks for any help.

nothing wrong with your code, 20 instanced spheres wont do a thing to performance, but it could be the css backdrop-filter: blur(1rem). i have used that before and had to remove it from a real world project because customers complained, it can absolutely wreck some systems aparently.

Thanks for your fast reply.

I will try to improve performance with the will-change and translate3D properties on blurred divs.

If that doesn’t help, is it possible to create rectangles with rounded corners and blur effect in three.js and better performance?
I could try to generate these objects in place of the current blurred divs. I would update the position of elements with intersectionObserver and getBoundingClientRect ()