Article

Parallax Launches Goal 50: Celebrating the World's Top Footballers

30 Jan 2019

Posted by Lawrence Dudley

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.

Lawrence Dudley
Posted by Lawrence Dudley

View profile
SHARE
Read next

Keep your finger on the pulse

Join our mailing list to be the first to hear about cool opportunities, hot events and more.

Password Reset

Please let us know your email address and we'll send a new password straight to your inbox.