Celebrating the greatest race on earth with the winners (and losers) of the Tour de France
With cycling being a keen passion for many in the studio it was only fitting that it became the subject of our latest internal project, especially as the 2018 Tour de France was looming. How could we resist? Keen to further explore the use of interactive WebGL and a play on the game ‘Always Yellow’, Tourjours Jaune was born as our little homage to the winners (and more infamous losers) of le Tour.
The premise was simple. An interactive 3D yellow shirt (the symbolic masthead of the Tour de France) that, when clicked, morphed into over 20 uniquely 3D crafted portraits of some of the greatest riders in the last 70 years. Throw in some little known stats, a few insightful notes then see how far you could stay in yellow until you hit a ‘Sacré Bleu’ - or in our case, a disqualified rider from the user of banned substances. Tsk!
Creating The Maillot Jaune
The Maillot Jaune (yellow shirt) is the symbolic heart of the Tour de France and in our execution acts as the primary way for users to interact with our content so it was important we got the details just right!
We hand selected some of the most iconic (and infamous) winners of the Tour de France from the last 70 years and set about creating realistic portraits using triangular meshes. These portraits could then be manipulated as we saw fit in our 3D environment.
Mighty Morphin’ Maillot Jaune!
Using a combination of WebGL, three.js, vue, GLSL and GSAP we crafted the primary mechanic of our site that would allow us to morph between our yellow shirt and a randomly selected riders portrait. Through a dynamic animation pass we interpolate the vertex positions of the shirt to the vertex positions of the riders portrait. Easy!