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

Questions
,
1

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:
https://dev-is.me

Link to code:
Balls.js

How can I fix the performance degradation?

Thanks for any help.

2

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.

3

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 ()