Case Study: SGS’s 3D WebGL Experience

R&D

FX Digital and 106 Comms created an internal WebGL experience for global conglomerate SGS

The Brief: Bring SGS’s Services to Life

106 Comms is an internal communications agency that has collaborated closely with FX Digital for a number of years. In 2019, they approached FX Digital with a project that piqued the interest of our Research & Development team. The brief was to provide SGS – the world’s leading inspection, verification, testing and certification company – with a creative and engaging virtual experience for their employees that would showcase the varied services offered by SGS.

Laboratory picture

The Challenge: Creating Three Worlds

SGS provides an extensive range of services across supply chains for an array of industries, from agriculture to construction and energy to manufacturing. The initial challenge was for the FX Digital team to consider how to visualise, organise and arrange this extensive set of services.

FX Digital and 106 Comms made the decision to create three interactive, animated 3D model landscapes. Each environment would encompass a number of services offered by SGS. The models would feature clickable buttons that users could interact with, opening information bubbles featuring a brief paragraph of text correlating to the particular service.

The first model to be designed was of a City – this would broadly capture SGS’s urban operations, from drugs & medicines to fuels and construction. The second model would represent SGS’s industrial enterprises – such as shipping and farming. The final model would conceptualise the work that SGS does for the benefit of their employees and society – from water testing to training and health and wellbeing initiatives.

After researching SGS’s brand look-and-feel and drawing up early sketch designs, the team created a number of 3D Assets which would be used to create the interactive models. The designs also took inspiration from low poly, old-school video games, with our designers using an isometric style to create the assets. Using 3D computer graphics application Autodesk Maya, we were able to add new elements and textures to customise these assets in the style of SGS’s brand. Further, we were able to create custom animations to create a moving environment to capture the imagination of the user.

SGS City 3D Model

After each model was meticulously designed and built, they were compressed into the lightweight glTF format – a file format for 3D scenes and models – to ensure that they would function when accessed via multiple browser types. However, we hit a snag when we discovered that SGS’s intranet used Internet Explorer. When trying to upload the models to Internet Explorer they were too large for the browser to process, even as glTF files. To make the files even more lightweight we used a Google Plugin for glTF called Draco which made them lighter and therefore compatible with Internet Explorer. Using the WebGL javascript framework we were able to render the 3D assets into the browser, bringing our interactive 3D experience to life.

The Results: An Immersive 3D Experience

FX Digital & 106 Comms created three impressively designed and crafted isometric 3D models with a variety of features, as demonstrated in the video below:

As the video shows, the floating animated worlds contain a number of immersive features including interactive hotspots with information available in three languages (English, Spanish & French) and controls that allow the user to rotate the model and zoom in.

The simplicity of the designs do not reveal the complexity of the process behind the creation of this project. However, the resulting experience was one that the FX Digital and 106 Comms teams were proud of. Our developers and designers put their skills to the test and created a unique, animated 3D landscape for SGS that greatly helped the organisation communicate their core beliefs, values and services to their employees, while encapsulating SGS’s innovative ethos.