Case Study: A Triple Site of the Day Winner Powered by WebGL

Concept

Art Deco influence

Art Deco, the architectural style of ERA, served as the foundation for the brand. While we were tempted to highlight the glitz and glamour reminiscent of The Great Gatsby, we understood that such an extravagantly festive mood wouldn’t resonate with our audience. ERA aims to provide quality and affordable housing for the middle class. As a Tekta representative stated, “We’re selling not Rolls-Royces, but Mercedes.” With this in mind, we shifted to a calmer, cosier, and more homely tone while maintaining the project's core themes.

Art Deco inspired the selection of colours and geometric patterns throughout the site. Elements of ERA’s facades — ornament, arches, and lines — were the foundation for background, transitions, and other design elements.

Throughline

The glowing silhouette of a building on the splash page is the site's key visual element, created using WebGL technology. It symbolises the monumental significance of the ERA complex for the city and highlights the tagline “The Dawn of a New Era.” This concept gave rise to the site's motif: a light line that appears in various forms, enhanced with vibrant and detailed WebGL effects.

Content

The website engages visitors with diverse content that encourages repeat visits. Each interaction reveals new details that reinforce their decision.

Location

Location is one of the key advantages of any residential property. The client selects not just a building but a lifestyle.

ERA is being constructed in a district rich in history and culture, situated between the city centre and the outskirts. We aimed to showcase the unique context – highlighting the atmosphere, opportunities, and how ERA integrates with its surroundings. Consequently, the location section of the website is notably extensive. We wanted to present comprehensive information that captivates rather than overwhelms the visitor.

Emotional storytelling guides users effortlessly through the website. The presentation is enhanced with unconventional transitions and smooth animations to capture attention and spark intrigue.

Space and time

We emphasised key infrastructure for the audience, including transport hubs, childcare facilities, and entertainment options. It was also essential to convey the atmosphere surrounding ERA. We dedicated sections to exploring the district's cultural attractions and architectural styles. The vibrant visuals and inviting tone of voice create an engaging experience that draws users in.

An in-depth context showcases the developer's thoughtful approach to the surroundings, emphasising ERA's seamless integration with its environment. This enhances the project's symbolic value, boosting its prestige and appeal to potential clients.

Architectural event

A brief exploration of the history of the Art Deco style roots ERA in tradition. It becomes more than just a residential area; it transforms into a significant architectural milestone. This connection engages clients seeking apartments in the complex. We interviewed the architects to create a video that reinforces this sentiment.

Design details

Our background in developing websites for real estate projects allows us to leverage proven UI solutions. While some striking, innovative elements draw the most attention, we meticulously considered every detail, even on the standard pages.

3D map of the area

The website's centrepiece is the interactive 3D map of the area, built with WebGL. Creating it was a challenging and extensive task rarely attempted in real estate promotional sites. We are very pleased with the final result.

We adapted and simplified the area's layout, constructed a 3D model, and integrated it into the website. Key points of interest were marked and animated, resulting in a vibrant, interactive city fragment that engages users. This feature allows them to experience the space in a way that wouldn't be possible with a traditional two-dimensional map.

Road to home

We employed an immersive infographic to illustrate the distance to key urban infrastructure. Users are on a journey toward ERA as the camera follows a path. This flyover is enhanced with three-dimensional effects, including a glowing light path and a parallax effect against a starry background, creating a virtual space that feels both deep and uncluttered.

Comprehensive view

Typically, promotional websites present detailed descriptions of architectural features in isolated sections. We utilised a high-resolution render of the project to create a cohesive impression. The camera zooms in on specific render details as users scroll, ensuring that image quality remains high.

Tactile sensations

We created custom 3D models to represent the project's materials. Although these models are static, they enable users to appreciate textures, enriching their overall experience.

Mind and feelings

We structured the storytelling to engage users intellectually and emotionally. By combining expressive visuals and slogans with numbers and facts, we entertain visitors while providing a clear understanding of the project's benefits.

• The detailed plan of the ERA’s territory offers a vivid picture of residents’ everyday life.
• The apartment layouts reflect the site’s visual style, with interior details in the background aligning abstract impressions from the plans with the feeling of home.
• The parametric selector allows customers to filter apartment searches with animated floor selection using interactive building models.
• Large vertical images showcase high ceilings, enabling users to appreciate the spaciousness.
• While developers often feature summer views in their renders, our slider with seasonal changes offers insight into the complex's vibrant life, even during winter.

WebGL

Our goal was to provide the website with exceptional depth through interactive 3D models, achieved with WebGL technology, which enables 3D rendering directly in a browser.

What is WebGL?

WebGL allows for drawing three-dimensional objects, applying textures, positioning the camera, and setting up lighting — much like familiar 3D modelling software. The key difference is that all of this is accomplished through code. Without WebGL, creating dynamic three-dimensional graphics on a website is impossible.

The technology relies on the HTML5 canvas element and uses the GLSL language to write shaders, which are the core programs of WebGL. They define the coordinates of the objects' vertices and determine the colours of pixels. We primarily utilised the Three.js library, which simplifies access to 3D objects.

This technology is used for infographics, maps, virtual tours, and product design demonstrations. While 3D requires significant resources, the website must remain lightweight, fast, and user-friendly to retain visitors. Balancing these elements is challenging, so promotional websites rarely leverage WebGL to the extent we have.

However, successfully addressing this challenge is well worth the effort. Without WebGL, achieving such depth, interactivity, and user engagement would have been impossible.

What do we use WebGL for?

• The splash page immediately captivates visitors.
• The interactive map of the area serves as the site's distinctive centrepiece.
• Dynamic light lines create a recurring visual theme.
• Decorative elements, including volumetric galleries and a parallax starry sky, animate the site.

Splash Page

Futuristic interactive building silhouettes set the tone for the entire website. Our goal was to craft a high-quality, substantive image that astonishes with unexpected depth and grandeur.

Modelling

In the initial stage, an illustrator creates a model of the buildings using graphic software to visualise the desired outcome. Next, they collaborate with a developer to refine the model for implementation via code. The main objective is simplification; fewer polygons translate to fewer vertices in the code, resulting in faster website loading times.

The complex's original model was divided into five parts for easier manipulation, allowing us to apply various effects at different depth levels.

Rendering

The next step involved devising a rendering method, which was the most challenging part. We initially planned to create a solid model and manually trace the outlines, but this approach was too heavy and didn't yield the desired effect. We aimed for a spectacular glowing silhouette. To achieve this, we created custom files that contained only vertex coordinates, significantly reducing the model’s weight. We constructed paths between vertices and then drew lines along them using Three.js.

We customised shaders to add noise, granularity, and other properties that define how objects interact with light. This technique allowed us to create a blurred background and achieve depth of field.

Reflection

We placed a reflective plane beneath the model to further enliven the scene. We assigned it a texture that diffuses light and softens shadows, mimicking the appearance of an old, worn mirror. As a result, the buildings appear to be reflected in wet asphalt.

Post-Processing

Post-processing allows us to apply effects to the entire image, making this the most technologically advanced stage of the project. We added fisheye and chromatic aberration to the scene to create a holographic appearance and anti-aliasing to prevent pixelation of the lines.

Outcome

The result is a breathtaking 3D experience! The camera reacts to the cursor's movement, giving the user dynamic views of the model from various angles. This interactive feature immediately adds depth and immersiveness to the website, creating a cutting-edge visual experience that is sure to impress.

Map

The off-the-shelf solutions provided by conventional map software didn’t offer the necessary flexibility. So, we customised the map to improve camera control, enhance interactivity, and include more realistic elements, such as a flowing river.

To further energise the scene, we integrated a map of the area's roads, providing paths for particle objects that simulate a swarm of cars endlessly moving through ERA. This lively touch added to the site's realism and engagement.

What did we achieve?

Initially, we weren’t sure if WebGL could fully realise our vision: an interactive 3D experience combining entertaining visuals with aesthetic integrity. This was uncharted territory for real estate promotional websites. However, the final result exceeded expectations—an immersive, large-scale experience that captivates users and reflects the essence of the ERA project as a groundbreaking, game-changing development.

Conclusion

Our collaboration with Tekta brought together a shared vision and creative synergy that redefined the possibilities of web design. In the end, a website's true measure of success lies in its ability to captivate and engage its audience. We went above and beyond to ensure ERA leaves a lasting impression — and recognition from three prestigious design festivals is a testament to that success.