Andrew Mason Creative Technologist

Tour de France WebGL

I was commissioned to create a data-visualisation that showcased the history of the Tour de France’s most famous hill climbs, Alpe D’Huez. To bring the data to life I combined satellite photograph with accurate elevation data to create a 3D WebGL reconstruction of the mountain course.

Careful attention was given to the mobile UX with the inclusion of both tap and swipe navigation. An image based non-WebGL alternative was included as a fall-back for older browsers.

I wrote a detailed making-of for Source that breaks down the development process and how the 3D model was generated.

The data-visualisation combined 3D animation with linear navigation to guide the user from one stage to the next.
Screen captures of the mobile website version
The mobile version was tailored for touch interaction and screen constraints while maintaining smooth 3D animations on supported devices, falling back to image fade transitions if needed.

Screen capture of Blender
A key aspect of developing the 3D assets for the projects was optimisation. Blender was used to reduce the polygon count and therefore file size, ensuring fast load times.

Screen capture of the in-browser editor
I created a GUI editor interface that allowed me visually tweak animation values that were tweened between generating the animated transitions.