Toujours Jaune

Celebrating the greatest race on earth with the winners (and losers) of the Tour de France

Internal Project

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!

Toujours Jaune!

Tour de France winners dynamically morphed in from the triangular mesh of the yellow shirt to reveal their winning year, stats and a few choice quotes as you wrack up another day in yellow. Nice!

Sacré Bleu!

But a run in yellow can easily be cut short! If you’re unlucky enough to land on a rider that was disqualified from the Tour then for you mon amie, your journey in the maillot jaune is over.

Don’t worry, you can always try again. The Tour loves persistence!

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!

A base mesh of the shirt was created in 3D and exported as an OBJ for use in our WebGL environment

We needed to keep things lean and mean in our scene so we opted to use a MatCap texture map for our shirt which is a great way to fake lighting.

Our shirt is imported into our WebGL scene, textured and ready to go!

The Riders

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!

Take Home The Heroes of The Tour de France

Anquetil, Merckx, Hinault, Indurain and Froome. All these multiple champions are illustrated in geometric style and are accompanied with a choice quote and tour statistics. All are available from our online shop, get yours today!

Shop now