Before jumping into the flying experience, the user scrolls through a sequence of branding sections depicted in the sky. It’s a long distance to scroll, and the clouds are arranged in multiple background layers. Given this challenge of rendering the parallax motion at a smooth frame rate, I experimented with Pixi.js WebGL renderer, and that drew a good number of transparent clouds effortlessly at 60 FPS. It also enabled adding some cool effects from the shader level, e.g., the motion blur during fast scrolling and text distortion when they’re shown through the plastic bottle.

To make the brand story memorable, the user enters the flying experience of infinite space using only the mouse to navigate. The pop-up menu triggered by the right mouse button leads to some fun interactions with clouds: to nudge, paint, stretch, or spin them.

Back then, WebGL was not fully supported or optimized for tablet devices — and not at all for the iPad series. The simulation on tablets has been specifically tailored, as the client wanted it to be as seamless as the desktop experience. To prove the feasibility of good visual performance on iPad, I took a different approach to WebGL; that is, draw cloud sprites on the HTML canvas and plot them with different sizes and positions calculated by Three.js camera projections.

Three.js already owned a canvas renderer, but it did a whole lot more for other purposes and caused some significant overhead on mobile before drawing the clouds. I wanted something controllable to fine-tune the performance, so I wrote a dedicated, compact rendering loop for clouds with Pixi.js. And that won the client’s heart: a convincing look at 1,000 moving cloud sprites on an iPad 2! With the CSS 3D-created skybox, the tablet experience was nearly identical to the original version.