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

"Goal 50":https://www.goal.com/story/goal502018en/ 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.,20190125164239_datGUI.jpg?alt=goal%2050%20globe,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":https://www.goal.com/story/goal502018jp/ and "Arabic":https://www.goal.com/story/goal502018ar/. ,Starting off with a hi-res 2D version of the map, we used Blender's decimator tool to reduce polygon count. Once cleaned up, we deployed the warp modifier to convert the mesh into a spherical projection, onto which we mapped the footballer portraits. Finding the shortest distance to rotate the globe when switching between players required some super-complex quaternion mathematics!, WebGL for ultimate flexibilityHaving 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.,20190125164332_goal50_blog_wide 2.jpg?alt=variations%20of%20goal%2050%20players%20on%20stained%20glass,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.,Parallax carried out the underlying foundation work on the WebGL header to allow the XD team to see what was possible creatively. This let us play with the parameters to ‘select’ key creative choices in the environment build without having to commit any designs.,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 collaborationAlthough 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":https://parall.ax/blog/view/3260/parallax-streamlines-goal-com-for-apple-news and "an infinitely scalable recording app for David Guetta and UEFA":https://parall.ax/blog/view/3188/this-one-s-for-uefa-an-infinitely-scaleable-recording-campaign.