EC Fanhansa [redPlant Realtime Studio]

EM Fanhansa

  • WebGL
  • Node.js
  • Competition

The Lufthansa AG is one of the world's largest airlines and since 2005 has been an official partner of the Deutsche Fußballbund (German Soccer Association). For the 2016 European Cup, the Fanhansa plane was launched with around 350 fan names. Fans were able to get their names on the plane by participating in a contest. In cooperation with the Soliddd GmbH and the Kolle Rebbe GmbH, a digital 3D plane was created that had room for all participants, even before the winners were published.

texture layout mapping on digital webgl lufthansa airplane

Dynamic Layouts

In order to be able to display all the names on the limited space of the plane, the layouts are generated server-based. A PhantomJS pool controlled by Node.js allows for real time texturing.

Artboard 1

All Names All the time

All participants can find their names on the digital plane any time. Adaptive camera flights based on procedural curves enable precise animation to each name. In addition, the generated curves are used to compute the minimum and maximum zoom. For instance, it is not possible to zoom to the interior of the plane or move completely away from it.

Features

icon webgl

WebGL

The 3D plane is displayed in WebGL, so it is available on as many devices as possible.

icon contest

Contest

The project included participant registration, blacklists, and the presentation of the winners.

icon uv mapping

Custom Mapping

To make sure all names of fans would fit on the 3D plane, special UV and texture UV Mapping methods were used.

icon dynamic layout

Dynamic Layout

The texture of the fan names was laid out in real time on a Node.js server.

icon animation of camera paths

Adaptive Path Animation

Generation of automatic camera flights to the fan names on the plane.

icon uv environment

Custom Environment Mapping

Use of special UV Mapping techniques for realistic presentation of surroundings.