Switch to PIXI.JS

Original weather card code had one major issue when applied to Zima Weather –- it implemented all weather conditions like rain, snow and clouds as SVG animations. This was more or less okay with one weather card using a modern desktop computer, but became very heavy with five cards on Raspberry PI – at that time I measured around 15 FPS. And I am just getting started and would like to add more features to the dashboard and other animations.

I looked around for a possible replacement and found PIXI.JS – a really fast WebGL/WebGPU rendering library. So I started to rewrite all SVG shapes and animations to PIXI, and upgrading TweenMax to GSAP 3. Luckily, I could keep GSAP object animations as GSAP has a plugin for PIXI. I generated objects/shapes directly in PIXI at first –- lines for rain, circles for snow, but this was also not the most performant method in PIXI, so I also changed all objects to be textures inside a spritesheet.

That almost doubled the performance on Raspberry PI, to ~30 FPS. Disabling antialiasing in PIXI renderer got me additional 5-10 FPS.