Switch to PIXI.JS

Original weather card code had a major issue for my dashboard – it implemented all weather effects like rain, snow and clouds as SVG objects and animated them. This was more or less okay with one weather card on a desktop computer, but extremely heavy with five cards on Raspberry PI – I measured around 15 FPS. And I am just getting started and would like to add more features and extra animations.

I looked around and found PIXI.JS – a really fast canvas/WebGL 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.