Toujours Jaune!
Celebrating the greatest race on earth with the winners (and losers) of the Tour de France
With cycling being a keen passion of mine I wanted to create a personal project to celebrate the 2018 Tour de France. Working alongside a developer and designer we were 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.
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.
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.
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.
I needed to keep things lean and mean in the 3D scene so I opted to use a MatCap texture map for the shirt which is a great way to fake lighting.
The shirt is imported into the WebGL scene, textured and ready to go!
Giving overall creative direction to the project I worked with another skilled designer who lovingly recreated portraits of past Tour winners using triangular meshes. These portraits could then be manipulated as we saw fit in our 3D environment.
Using a combination of WebGL, three.js, vue, GLSL and GSAP our developer crafted the primary mechanic of the 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.