Today the competition in the global marketplace is fiercer than ever. Companies face a plethora of challenges in establishing brand recognition, reaching new audiences, and fostering customer loyalty. While traditional methods like websites, commercial advertising, and product demonstrations remain essential, they are no longer enough to stand out in a saturated landscape. What sets businesses apart in this hyper-competitive environment? How can they create truly unique and engaging customer experiences that foster brand loyalty and drive sales?
At Agiliway, we believe that the answer lies in unlocking the potential of a powerful collaboration. The experience working with a prominent German digital marketing agency on a project for a sportswear chain provided valuable insights into these critical questions. This collaboration allowed us to explore innovative approaches to customer engagement, pushing the boundaries of what’s possible in the realm of digital marketing.
Table of Contents
Client’s Challenge
The client approached Agiliway with a clear objective — to create a distinctive and captivating homepage experience through 2D animation, interactive graphics, and visually stunning effects. The desired scene revolved around an artistic depiction of a majestic mountain standing tall above its surroundings. By employing scrolling commands, users would navigate a group of people across the model – from the land, up the mountain, all the way to the peak where they triumphantly raised a flag. The client also sought to provide informative descriptions at different scroll positions, offering insights and suggesting equipment suitable for various stages of the adventure.
Recognizing the growing fascination with virtual reality and users’ desire for immersive experiences, the client understood that crafting a remarkable homepage requires more than just design, text, and a call-to-action button.
For the client, designing a game-changing homepage meant:
- Infusing interactivity and surprise into its components.
- Creating professional-grade real-time 2D animation with interactive graphics.
Provided Solution
From the start, the project began with studying 2D illustration techniques to achieve a visual similarity with 3D animation. However, attempts to imitate a deep perspective or seamlessly combine graphic design did not produce the realistic effect the client expected. At this stage, the team decided to take a fresh approach, shifting the focus from shadows, angles, and perspectives.
Given the powerful graphics processors (GPUs) integrated into modern computers and smartphones, along with the ability to render and interact with 3D scenes directly in all major desktop browsers, we made a strategic decision to leverage more advanced technology and elevate the interactive real-time animation to an entirely new level. This involved creating a 3D environment and transforming the scene from 2D to 3D.
To achieve a visually captivating and engaging web experience with a 3D feel, engineers unanimously agreed on the following 3D design solutions:
- Leveraging the lightweight 3D library, Three.js, to construct a virtual reality environment, enabling the utilization of 3D scenes and other functionalities.
- Utilizing the WebGL API in JavaScript to render 3D objects within the browser.
- Implementing visualization in the browser using the Canvas element.
- Creating the model in the OBJ file format and seamlessly integrating it into the animation.
- Utilizing the Request Animation Frame functionality to render graphic elements with meticulous detail and realistic lighting effects.
- Applying animation position translation techniques to achieve smooth movement of sprites in various directions.
- Employing 2D animation to display descriptions at fixed scroll positions.
Humans are inherently visual creatures, with 80% of information being perceived visually and the brains processing images faster than text, following a subconscious algorithm based on relevance, coherence, and participation. Interactive 3D graphics have an instant impact on users. By optimizing resources and prioritizing an engaging and visually pleasing animation, we achieved the following:
- Rendered objects such as mountains and people that could be viewed from different angles and illuminated from various directions.
- Created an interactive experience that allowed users to move around the model, providing a first-person view through the camera.
- Demonstrated the dynamic nature of objects by showcasing changes in their positions relative to other elements (e.g., the mountain drawing closer and the sun rising as users navigate the model).
- Reproduced lifelike reflections and shadows, incorporating atmospheric glow effects to visualize a sunrise.
- Displayed descriptions at specific scroll positions, enhancing user understanding and engagement.
- Seamlessly integrated the 3D scene with existing 2D web page elements.
Conclusion
The potential applications of 3D technology span across diverse industries and markets, ranging from education and engineering to entertainment and advertising. The Agiliway project for the German marketing agency served as an inspiration, prompting us to explore further opportunities in interactive technologies. This led to the development of games and maps utilizing CocoonJS Launcher for mobile app execution and Three.js for 3D functionalities.
From a user’s perspective, interacting with immersive 3D environments, vibrant images, and captivating visual effects on the web guarantees a truly engaging experience. However, for businesses, it serves an even greater purpose — it sets apart key information, products, and services from the competition, leaving a lasting impression on potential customers.