Interactive WebGL kaleidoscope for an online store
I developed an interactive kaleidoscope for Renegades.
The experience was built with Pixi.js, which provides a canvas fallback if WebGL is not supported.
We were tasked to study and optimise an existing implementation of the kaleidoscope on canvas. While there were no performance issues in Chrome, Safari was particularly slow in rendering the experience. As a result, the interactive controls were disabled in a number of browsers — animations were triggered by pointer events instead.
The requirement was a kaleidoscope that performs smoothly in all desktop and mobile browsers (with fallback if features are not supported), and one that provides the same experience across these devices without the need to remove interactive control functionality.
After several optimisation attempts, it quickly became apparent that the best approach to meet the brief was to rewrite the experience for current browsers. We used Pixi.js to rebuild the experience.
Colourful, fun & infinite possibilities
For speedy load times, the animation initialises with one image and other images are fetched when the user requests them. Similar to the previous implementation, we provide the user with a number of options to explore the patterns produced by the kaleidoscope.
The changes resulting in tweaking just a few parameters can be quite profound, resulting in a experience that is fun to explore.
To take advantage of this, I also developed a way to scrub through the animation in the browser and see exactly what is happening at any point in time.
Runs smoothly everywhere
Unlike the previous implementation, the kaleidoscope is now rendered using WebGL, with an option for Canvas fallback depending on browser capabilities. This results in superior performance across all devices.
As always, keeping the bundle small remains a priority. The final minified production payload, including libraries, is only 400kB.