3D Animation Solution For A German Client

Introduction

Currently, any company heavily relies on a global network of resources to build its credibility. The need for a website, commercial advertising, product demonstration, customer participation is a matter of course. Yet is their potential tapped to the full? Who holds the key to unique customer experiences? And what’s the key? Working on a sportswear chain project for a major German digital marketing agency, Agiliway team came close to answering these literally billion-dollar questions.

Client’s Challenge

The client came to us with an intention to make their homepage a unique user experience, stunningly produced with 2D animation, interactive graphics, and visual effects. The scene had to feature an artistic rendering of a mountain stretching above the surrounding land. Navigating with the scrolling commands, a user would move a group of people on the model: on land, up the mountain, right up to the peak where they raise a flag. Short descriptions had to accompany user’s scroll positions giving prompts and suggesting equipment travelers, mountaineer or outdoor enthusiasts might need at different stages of their adventure.

In view of a growing excitement over virtual reality and users’ hunger for experiences, the client realized that crafting a unique home page takes more than hammering away at design, text and a call-to-action button.

For our client designing a competition-crushing home page meant:

• Adding a touch of interactivity and surprise to its components
• Creating 2D animation with professional interactive real-time graphics

Solution

As planned, we started with the idea of 2D illustration, trying to make it visually as close as possible to 3D. Yet neither a depth perspective nor a soft blended look of an obtained graphic design and animation created a lifelike effect our client had in mind. At that point, Agiliway team decided to change a tack and stepped aside from playing with shadows, changing angles, creating perspective and other.

Since nearly all modern computers and smartphones are equipped with powerful graphics processors (GPU), while 3D scenes can be rendered and interacted directly in every major desktop browser, the decision was made to use more complex technology and add a new dimension to the interactive real-time animation. To bring our animation to an entirely new level we set our sights on creating a 3D environment and converting the scene from 2D to 3D.

To give 2D images a 3D feel and create unique interactive web experiences, our team agreed on following 3D design solutions:

• Lightweight 3D library Three.js was chosen to create a virtual reality environment, using a 3D scene and other capabilities;
• Javascript WebGL API would render 3D objects in the browser;
• Visualisation in the browser was implemented with the Canvas;
• Model was drawn in OBJ file format and then integrated into the animation;
• Request Animation Frame would render graphic elements in minute detail with realistic lighting;
• Animation position translation applied for moving the sprite in a certain direction;
• 2D animation was used for displaying descriptions at fixed scroll positions.

Just because humans are visual creatures, who perceive 80% of information visually, whose brain processes images much faster than text and makes choices following a subconscious algorithm of three constants (relevance, coherence, participation), a user is affected by interactive 3D graphics instantly. By utilizing the most optimized resources to make the animation highly engaging and pleasing to the eye, we succeeded in:

• Rendering objects (mountain, people) that can be viewed from different angles and lit from different directions;
• Creating interactive experience featuring movement on the model with a camera showing a first-person view;
• Demonstrating how objects change their position relative to other objects ( e.g. a mountain draws closer and sun rises as we move along the model);
• Recreating life-like reflections and shadows (e.g. sunrise is visualized with atmospheric glow effects);
• Displaying descriptions for all fixed user’s scroll positions;
• Integrating the scene with 2D web page elements.

Conclusion

It’s easy to see the potential of 3D technology for a variety of uses in a wide range of industries and markets, from education, engineering to entertainment and advertising. The project for the German marketing agency has inspired us to develop a game and map by using Cocoon Js Launcher for executing HTML5 apps on mobile devices and Three.js for implementing 3D functionality.

From a user’s perspective, manipulating interactive 3D environments, vivid images and visual effects on the web is a surefire way to enjoy a more engaging experience. For businesses it does even more, it makes key information, products and services stand out.

READ ALSO: Developing Magento Web Store for Renewable Virtual Products