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:
- useFrame computation is light.
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 ()