Zulu key visual

A new online service configurator named ZULU was launched by Kaiserwetter, and just like its other brand Aristoteles, ZULU also needed a new key visual graphic, along with an interactive web-GL version. Several different concepts have been developed in collaboration with Apollo7 in the initial design phase. After a fitting design has been found and agreed upon, our job was to bring that design into a 3d scene suitable for both rendering and web.

The 3d rendered scene was only needed to generate one static image in high resolution. This step was purposely done before the web version, to serve as a visual guideline for the web version and to finalize the key visuals look and feel more easily. Since animations and optimizations were not needed for the rendered version, adapting and changing the scene could be done very quickly.

The main challenge when developing for web-GL is always memory optimization, as the entire scene and the components needed to run it must be downloaded by the user when visiting the page. The application needed to be small enough for fast downloading, while also staying close to the rendered versions visual quality. A lot of our memory savings were achieved by optimizations of the 3d files, i.e. cutting away parts of the model that are never seen and optimizing the file export. A carefully laid out UV map allowed for high fidelity shadows and ambient occlusion baked from the render software, within a single 116KB texture.

Apart from optimization, the ZULU app features animated objects and character, particle wave animations and interactive mouse or device tilt controls. It also includes several controllable variables to allow easy customization for web integration. The entire application takes up less than 900KB and works on all web-GL supported devices.

See the app live at: https://kaiserwetter.energy/produkte/zulu

Client: Kaiserwetter Energy Asset Management
Agency: Apollo7