What it is
Suisse Mania is an interactive WebGL experience where collecting famous buildings, attractions and areas in Switzerland is the name of the game!Play the game
Jump into Switzerland
The beautiful landscape, rich culture and amazing history of Switzerland is just a loading screen away - come along into the Suisse Mania balloon and enjoy the ride!
Migros, one of Switzerland's larger retailers is the company behind Suisse Mania.
Suisse Mania revolves around collecting places of importance to Switzerland, for example the mountain Matterhorn, the CERN research facility and castles dating back to the 13th century.
Gotta catch 'em all
The offline collecting of items works like a Happy Meal at McDonalds. Shop for at least twenty swiss francs (CHF) in a Migros store and you’ll get a plastic model with the purchase. The more you buy - the more items you get.
Online it’s up to you to find all of the 50 objects hidden around Switzerland by playing around, exploring and learning in a custom made 3D world. Once you’ve caught them all you’ve got the chance to win some exciting prizes.
The Mania campaign is massive in Switzerland. It involves road shows, models & stickers available in all 600+ Migros stores, hot air balloon rides, a custom board game, and this groundbreaking digital experience.
Over 100 accurate models
Support for any device
High Definition, 3D
Full hardware acceleration.
High resolution textures.
Standard Definition, 3D
Full hardware acceleration.
Half resolution textures.
Low polygon count.
Keeping it simple
The world takes form...
First, we wanted the actual terrain of Switzerland as a base for us to model our world on. From an open source (measuring mountains is important stuff in Switzerland - there were a lot of open sources) we imported a real heightmap and topography and used that data to create a mesh in WebGL.
The designers then spent countless of hours researching the different aspects of the Swiss landscape; in a country covered by the Alps, large forests, wine districts and both old and new cities it was crucial to capture the unique feeling of each and every one of them.
Slowly the mesh was embroidered with a complex landscape; first out were roads, trees, glaciers and eventually rivers and lakes. The 3D masterminds over at Goo then continued to populate the world with objects; cities, bridges, vehicles and even animated animals roaming the fields of northern Switzerland. Eventually we had a picturesque, model train-style miniature Switzerland we could really be proud of.
During the final weeks we did touch ups and added effects and the map looked better than ever. The seamless experience in the 3D world and all its powerful capabilities caught everyone by surprise. It was by this time that we realized that together we had not only managed to create a solid looking campaign website, but also an amazing showcase for what WebGL holds for the future.
Goo Create & WebGL
This was our first larger project using the Goo Create engine to power the experience. We’ve previously been working mostly with Three.js, but with Goo we got a whole new workflow with easier prototyping and deployments. The guys at Goo really showed us the power of their tool with paint-it-on-terrain tools and fast optimization for mobile devices. We had a blast working together with these talented people and look forward to a lot more collaboration in the future.
Connecting with the real world
Not only was there a lot of work creating the 3D-miniature of Switzerland but the all around site itself was also something to really sink our teeth in. First of all, the contest itself required a lot of functionality. The real life collector’s items have codes printed on them that the user can enter on the site to “find” the virtual one and add it to their collection. Each user also has their own Collection page where they can view what items they’ve found and which they still have to look for. There’s also the usual info pages about the contest and more importantly the prizes.
On top of the regular campaign to find the 50 standard objects, there are also four joker objects at play. During a week at a time a special item is featured as the joker and collecting this item can only be done during that week. It had to be carefully timed to correspond to the communications out in the offline world.
Collecting all jokers is necessary to get the achievement Superstar (and who doesn’t want that?!).
All of these pages - Collection, contest info, News, etc - had to be available in all three of Switzerland’s most spoken languages and just because we speak neither German, French or Italian we also made an English version.
Accommodating for an onslaught of visitors
As per usual we turned to our trusty Google App Engine for the scalability it provides. It stood by us once again and when Migros sent out over a million newsletters to their subscribers the site performed flawlessly despite a couple of thousand simultaneous users.