Japan is a world apart. Because of that, it was always on the very top of my wish list. It’s a cultural island where a unique civilisation blossomed in isolation, and where now a fascinating contrast of tradition and modernity consists. After some failed attempts I finally had the chance to visit the country of the rising sun.

I landed at Narita Airport and hopped on the Keisei Skyliner wich took me into the heart of Tokyo. During the train ride my shoulder was used as a pillow by a snoozing women – What a great start!

After depositing my luggage in the hotel I headed to the Coin Bar in Shibuya to meet my holiday mates Jonas, Raphael and Marco. They visited the country several times before, wich was great to get around and digg deeper into Tokyo.

Tokyo

Just mention it and images rush fast and furious in my mind: Neon-lit streetscapes, perfect timing of the subway, millions of commuters swarming like ants, the precision of a sushi chef… The world’s largest metropolis has definitely left some unique impressions on me.

Shibuya

Tokyo’s most busy districts. Swarms of people rush here through every day. We stayed at a hotel wich was just a short walk away from the famous Shibuya Crossing, in a yet surprisingly quiet neighbourhood.

Halloween

It was a happy coincidence, that it just happened to be the craziest event in Tokyo: Halloween. Years ago I experienced it once in California, but that is like comparing apples and oranges. It starts on Thursday and it builds up to Saturday where millions of people go nuts in Shibuya. We also got infected and dressed up as the Droogies from A Clockwork Orange. Check this YouTube-Video to get a glimpse of that night.

Akihabara

A city within a city. The crowded, loud and bright epicentre of entertainment, anime and video games. If you are into gaming, this is your heaven. Just visit Super Poteto or Mandarake, both are giant multi-floor buildings stacked with retro games and arcades. But its also nice to randomly step in to smaller, a bit more hidden stores. I promise it’s going to be exciting, but you’ll also stumble upon some really disturbing stuff wich will paralyse you for some moments.

Shinkansen

For the last two days, I wanted to spontaneously visit Kyoto. The best way to get there is by bullet train and with 500km in just two hours also the fastest. When i first saw the Shinkansen it felt like a endlessly private jet without wings, but what impressed me the most was not the aerodynamic design or top speed, but how tight the schedule was. During rush hours, a train is hitting the road every 10 minutes and I had to be careful not to pick the wrong one. During the ride I started to realise how huge Tokyo really is, even at 300km/h it took forever to get outsite the city.

Kyoto

Considering that I’ve been in the largest megacity in the world for two weeks, Kyoto was a pleasant contrast for the completion of my journey. History and tradition rather than futurism and modernity. The city was compact, clear and one can easily move around by bus or even by foot. Since I only spent one night there I had to try one of the Capsule Hotels. I stayed at the very well located Rumor Plaza inside the Gion district. Kyoto is incredibly charming and the people are much more communicative and cheerful as in Tokyo.

Temples

There are thousands of shrines and buddhist temples in Kyoto, hard to catch all of them in two days, or even get an idea where to start. Fortunatly, I met the lovely Sara a few days before in Tokyo. She lived there since seven years and is a big fan of Kyoto. She encouraged me to visit the former capital, and thanks to her I could put together a Foursquare-List of must-see places. I couldn’t get enough how these breathtaking landscapes merged with amazing architecture. In Japanese architecture, nature plays an important role, not only in temples, but in every traditional home.

Zen Garden

What I liked the most is probably the garden of Ōbai-in (黄梅院), wich is open for only a few weeks in November. It is part of the larger Daitoku-ji (大徳寺) complex in northern Kyoto. I stayed there for hours, just watching the garden breathe and the dry landscape freeze – A very relaxing and refuelling experience.

Location

Tokyo, Kyoto

Camera

All photos and videos are taken with an iPhone 6S

Editing

VSCO, SKRWT, After Effects

Case study of Suisse Mania, the cutting edge WebGL-Experience for Migros. You’ll find detailed background information and insights in how we worked and built Switzerland in 3D.

Background

Migros is Switzerland’s largest largest employer and retail company. More importantly, the brand is deeply rooted into the DNA of the Swiss people, everything they do gets a lot of attention. During a year, Migros publishes several campaigns and for the 8th time their flagship “Mania” launched. It’s massive and involves road shows, plastic models and stickers available in all 600+ Migros stores all over the country.

Just like the name says, a Mania is all about collecting and this time the theme was of course Switzerland. Everyone could collect 54 plastic models and stickers of famous buildings, attractions and areas. If you shop for at least CHF 20.- (swiss francs) in an Migros store, you’ll get a plastic model and a matching sticker with the purchase. The more you buy – the more you get.

Concept

We wanted to create an online experience, where users can seek after those same objects in a playful way. It was clear to us from the very beginning, it had to be a cutting edge 3D-Experience of Switzerland – The question was how?

Probably the biggest decision which affected how the whole project would be structured was how we would build Switzerland and integrate the collectibles. We had two concepts:

1. One solution was to create separate scenes for every single collectible, and a general low poly map from which you could navigate into those 54 scenes. This concept would allow us to control loading behaviour and time, but moreover we would have almost no performance issues. Proof of Concept: Scene 1 / Scene 2).
2. The other option was to combine everything into one massive scene.

As you might have noticed, we chose the massive scene. It sounded more like a challenge to us and felt more like a game. We imagined how amazing it would be to fly freely through the clouds over that huge landscape without any loading interruptions. The vision was there, so we had to dive into the Wireframing and Design part where we structured the content, thought about gamification-elements and the navigation.

Suisse Mania is all about the journey through Switzerland. In a workshop with Migros we decided that the balloon should be the campaign’s main carrier. Everyone love balloons, right? So it was clear that we would implement it somehow in the experience. One idea was to navigate the balloon itself around Switzerland and that the user had to land on specific areas to explore them. For better usability and to make things simpler we fixed it on a defined spline which guides the user through the most important areas.

We dismissed several great ideas like for example “Live Lighting”, which would emulate day/night with a Sky Shader according to the user’s local time. At the end we realised that it was too expensive, so we baked light and shadows instead. There were lots of compromises like this and we made some very good but also some wrong decisions. After all, the whole project was a big journey and most importantly: We learned a lot!

Art Direction & UX

It’s a game for kids and that’s why we wanted to create this perfect fairy tale of Switzerland with shining white mountains, blue lakes and Tele-Tubbie-like flatlands with cornfields, tractors and animals. By using icons and large buttons we made it accessible and easy to use on both computers and mobile devices. Since “Suisse Mania” is a 3D-game it was very important how you experience and navigate it. Intentionally we avoided creative interactions and tried to focus on common behaviour like dragging and zooming. But on top you can also use the arrow keys to fly or double-click to jump to a location, which feels quite nice.

Modelling

We had multiple people working simultaneously on different fields of the 3D world like Modelling the terrain, the main objects and environmental objects. If you count everything together we got an unbelievable amount of over 500k faces in the final scene, which is incredible if you consider that the app also runs on mobile devices.

Map

Before going into the modelling part we first defined which lakes, mountains and roads should be highlighted, where bridges should cross rivers and also on what levels the main lakes have to be. You can see that in the Topographic Guide we’ve created. To start with the map model, we first thought of using real heightmap data of Switzerland, import it into Maya and then modify the mesh to our needs. Unfortunately that attempt failed, it was just too detailed and we couldn’t soften and simplify the mesh like we imagined, we always got an undefined dough mesh. Especially in the most important alpine parts. So we had to do a lot more manual work than we thought. It was a long and tough process getting that mesh done, but at the end we could achieve that playful version of Switzerland we all wanted.

View 3D-Model

Objects

The scene includes 54 main and a lot of environmental objects. In total there are over 100 different models such as trees, cars, fields and animals scattered throughout the map. The main objects had to stand out of the environment and be visually more appealing so the user can recognise it as a game element. Keeping the polycount deep was key, after some objects were place i.e. trees, we merged all of them together and tried to combine and simplify as much as possible. But we recognised that optimising textures had a bigger impact on download time and performance. On a project like this, you can literally work forever and always create new objects and optimize it.

View Objects

Texturing

Splatmap

Another very cool thing is the Splatmap shader for the terrain. It uses 6 different channels in a “Splatmap” texture to blend other textures in a layered manner. The result is higher quality texturing. The alternative is rendering a very high-res texture for the whole terrain, but that would not work on all devices.

By using a special shader for the terrain mesh, we could get higher quality textures. The shader takes the big “splat map” texture and a number of smaller textures as an input. The splat map’s red, green and blue channel define how much of texture1, texture2 and texture3 to use at the current pixel, respectively.

Aerial Sound

A very important part of the project is sound. All landmarks have their very own ambient sound which is looped in the background while the off-speaker is telling insights and stories about it. These recordings were made in German, French, Italian and English. Next to the Suisse Mania Alphorn-Theme which you can hear while flying with the balloon we implemented environmental sounds if the user zooms closer into the world. You can hear birds singing, splashing water, wind and city noises. And all of this in a real 3D sound environment, that means the volume changes according to the user’s position on the map and also the direction he is viewing.

On top of that we produced Click-Sounds for a variety of environmental objects like buildings and animals. So if you clicked on a pig it would grunt and a doorbell of a houses would ring. Unfortunately, we had to accept that it is not possible because of some technical limitations. There would’ve been just too much clickable hotspots which made the experience laggy and unusable.

Versions & Fallback

We made three different experiences to reach as many people as possible with a broad range of devices. There are two grades of the WebGL-App, an HD-Version with high quality textures and effects and a SD-Versions with smaller resolution. In addition to that we created an 2D-Version that we used as a fallback for devices and browser which don’t support WebGL. The HD version was always the main one that we’ve worked on, and the SD scene was created automatically from it.

Next to a Whitelist which decided whether you launch HD or SD in the first place, the app is monitoring the framerate all the time. If you’re in HD and the framerate drops below 30fps, we used a trick and rendered the WebGL canvas 50% of the size and zoomed in again with CSS so the GPU has to render less pixels. If that still doesn’t help, a notification pops up where you can switch to SD for a smoother experience. In that way we could prevent to place a switch-page with 3 buttons before the pre-loader. So you can directly jump into the experience.

HD-Version

This is the best experience with all the juicy features for high-end devices like Depth of field, moving clouds, camera drifting, animations and of course higher texture-size.

SD-Version

Reduced experience where we shut down expensive features and shrank texture size and count. As mentioned the SD Version is based on the HD, the flow for creating it was:

1. Export the HD scene from Goo Create.
2. Batch resize all images using command line tools.
3. Import the scene in Goo Create again.

2D-Fallback

This version ensured that also users with older devices and browsers supporting everything down to IE9. Instead of using WebGL, we generated a huge flat image (60Mio pixels) which was then processed further to over 4000 tiles. The user can pan and zoom seamlessly through those tiles, and everything else stayed the same. Try it out yourself: 2D-Fallback

Technology

Server Structure

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.

Goo Create

This was our first larger project using Goo Create to power the experience. With their engine we got a very easy workflow of prototyping and deployments. The guys at Goo really showed us the power of their tool and we had a blast working together with these talented people.

Image Optimisation

In general, we used JPG for textures and visuals that didn’t need transparency and PNG for the rest. Both these image formats are supported on all our target platforms. To reduce size of the images, we processed them using TinyPNG.

Issues

During the project we had a period of time where the app was very unstable because of the lack of optimisations. It had many megabytes of textures and mesh that easily could be stripped off or combined – it wasn’t just done yet.

What we learnt here is that all sorts of strange glitches happen when phones run out of memory. Some Android phones showed black instead of textures. CSS animations glitched. None of these things were really a blocker, with the exception of iOS Safari. When it runs out of memory it just crashes. This prevented us from testing the app in iOS for a period of time, which was bad.

Donec ullamcorper nulla non Andalusia auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Curabitur blandit tempus porttitor.

Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Sevilla

The first stop of our trip is Seville. We immediately picked up the rental car at the airport in Málaga and drove to the Andalusian capital. We arrived at our apartment at «Calle Arfe», it was just a stones through away from the Cathedral and the river. I didn’t knew that Seville’s Old Town is one of the three largest and also oldest in Europe.

Arcos

On our way to Cádiz we made a short detour to «The White City». The wonderful, historic town of Arcos de la Frontera is located at a hilltop position and reminded me of old arabic and greek cities.

Cádiz

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Bodega Sandeman

On our last day in Cádiz, we decided to make a day-trip to Jerez de la Frontera. This region is known for vineyards that produce the famous Sherry. So we visited one of those dozens Bodegas and took part of a guided tour.

Gibraltar

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

La Casita

At a beautiful and curvy road towards to Istán our hosts girlfriend Anna waited for us at a corner to an unpaved track, she then lead us to the small Lakeside Cottage downhill. The Casita is quite isolated from the outside world. Later the day our host Giles came home from work, and he showed us how to use the generator and how we could get warm water.

—

More To Discover

Andalusia is wonderful. Great food, best weather and nice people (especially the Sevillanas). But there is so much more to see, e.g. Ronda, Alhambra or Cordoba. I will definitely return, next time probably in september when all the big spanish «Feria’s» are. Olé!

—

Locations

Sevilla, Arcos, Cádiz, Jerez, Gibraltar, Istán

Camera

Apple iPhone 5S, Nikon D600

Editing

VSCO, Lightroom, After Effects CC

Links

Roadmap, Places

With the new Spring/Summer collection Navyboot is releasing eight different Original models, six for men and, for the first time, two models for women. Starting in the 90’s with the first model «The Original» survived all trends. Year after year the collection remained in the stores cause it was a success in both the business and the creative world.

On behalf of their digital agency, Florence and I attended the shoot, and we brought a glimpse behind the scenes.

This is the typical design of a Navyboot Original:

—

Client

Navyboot

Photography

Lorenz Cugini

Models

Lisa Mettier, Meret Aeschbach, Thierry Tardent

Link

Navyboot’s Journal Entry

Iceland has always been one of my favorite travel destinations. I travelled around the island in April 2014.

Driving Iceland’s ring road during spring is a remarkable experience. With a population of 325.671 and a total area of 103.000 km2, it’s the most sparsely populated country in Europe. On some eastern parts of the Island you see more reindeer’s than people. Lots of roads are still icy or even closed.

During my road trip, I had the full range of weather: Rain, snow, sun and even sandstorms accompanied my journey.

Location

Iceland’s Ring Road

Camera

All photos and videos are taken with an iPhone 5S

Editing

VSCO

The «photo» is the largest exhibition of Swiss photography. Every year 120 national and international photographers showcase their recent work. I was one of them.

Thomas Bestvina, a friend of mine gave me the idea to exhibit, and he also moved me to apply myself. I’ve selected two images of my «Zurich By Night» series and hoped for a confirmation.

I was pretty excited when I received the invitation via email. They said also that there were over a thousand applications.

Exhibition

Photo Schweiz

Location

Zurich

Camera

Nikon D600

DJ’s

Animal Trainer, Round Table Knights, Kellerkind, Benja & Reto Ardour

Music

Animal Trainer on Soundcloud