30+ raster/vector graphics parallax experiment - Is PixiJS a good choice?

[Avenra]

I'd like to make an interactive, full-window diorama (think "pop-up book") made up of dozens of raster and vector graphics (likely around 25–40). They'd animate on mouse over, unique to their depth and reposition appropriately depending on the device/window-size the app is being viewed on. I attempted this with vanilla JS and quickly hit a limit to the number of images I could use before the framerate dropped (~12 images).

PixiJS seems to be a promising option. Would it be able to handle a project like this while also hitting my cross-browser compatibility needs (IE 10 & 11, ever green)?

Thanks for the help!

[ivan.popelyshev]

Cross-browser - yep. Performance for big images on retina is the problem of every rendering lib there, its tied more to html5 and specific devices. Need more details on your case.

[Avenra]

Here's an excellent example another developer created, which is similar to what I'd like to do. It's using PixiJS (although it's doesn't hit our cross-browser requirements): https://codepen.io/Yakudoo/full/MyMGBX/

The key difference would be that we'd be be using a mix of raster and vector images and additionally including some simple interactive elements based on click/touch events.

Any recommendations on optimizing performance when using so many images? One possible direction we could take, design-wise, would be to cycle the raster images in and out (showing around a dozen at a time) while keeping the vector in.

Let me know if there's any other specific details you need. Thanks a lot, Ivan.

[ivan.popelyshev]

35-40 images is certainly not a problem for pixi, common pixi optimizations are working for 100-10000 objects. But large images is something universally slow, especially on retina, and you have to actually implement something before I can think of any improvements regarding sizes of your images.

[Avenra]

Okay, I have an image stress test I quickly put together that I can share in the next day or so. Around 20 PNGs varying in size from ~200x200 up to ~1000x1000 (72dpi). It totaled to about 5MB between all of the images. Performance was much better in Chrome and Firefox than in Safari 10. The latter saw a significant hit to the framerate.