Goal 50 is an interactive experience for Goal.com presenting stats, insights and other information on the top fifty football players across the world.
Created in collaboration with DAZN, our design and development teams worked together to build a stylised WebGL 3D globe mapping players and clubs to locations across the planet.
Designing something truly global
In order to bring the experience to life on mobile and desktop screens, we took cues from the bold, stained-glass visual style used for the player illustrations and opted to build the globe with a stylised low-polygon mesh.
The finished model gives people useful information about players, such as goal statistics, recent form and personal career achievements at both club and international level. Keeping the broad user-base front of mind, the website is available in 20 languages – including Japanese and Arabic.
WebGL for ultimate flexibility
Having used WebGL on several projects before, we knew from experience using expensive shaders and large textures wouldn’t allow us to hit our performance goals. So to achieve the stained-glass aesthetic we opted for a lighting technique called matcaps, i.e. material capture textures. These are flexible for artists and designers to modify and less expensive to compute, even on mobile devices.
Our lightweight in-house engine and custom scene exporter from Blender3D helped keep file sizes down. We also built in customisation for all the visual elements using the dat.GUI library, giving flexibility to the designers over at DAZN to make any changes on-the-fly.
Essentially a library for automatically generating sliders/dropdowns from properties in code, dat.GUI allows you to quickly expose functionality to non-programmers for tweaking things like colours and lighting. It also allowed us to cycle the interface through all the different languages and spot any errors without having to reload the page.
Another successful collaboration
Although Goal 50 has long been an annual feature on Goal.com, this was the first time an interactive component of this nature had ever been included. DAZN and Goal.com were both overjoyed with the result, praising us on our speed and efficiency for bringing the project to life.
It was another successful sporting collaboration between Parallax and DAZN, having previously worked together on streamlining Goal.com for Apple News and an infinitely scalable recording app for David Guetta and UEFA.