case

Skolkovo for business

The website and 3D-model for the Skolkovo Park business district

task

To demonstrate the innovativeness of the Skolkovo Park and to create a memorable user experience that would emphasize the technological and advanced image of the complex.

client

Proximity

industry

Real estate

year

2020

deliverables

Front-end development
Back-end development
3D-modeling

honors

                                                                                                                        AWWWARDS

                                            Site of the Day, October 31, 2021

                                                                                                                                                                                    FWA

                                            FWA of the Day, December 15, 2021

                                                                                                                                                                                    CSS DESIGN AWARDS

                                            Website of the Day, December 21, 2021

                                                                                                                                                                                    AWWWARDS

                                            Developer Award, October 31, 2021

Key Idea

We have developed a 3D model of the business district, embedded it into the website and optimized the speed and loading time. We have used the storyboard video to create a VR tour with a motion controlled camera flying over the buildings. We have undertaken the front-end development, including full optimization of the high-load elements and micro-animations.

The creation of a realistic 3D model

We have created a 3D model from scratch based on the development plan and a video recording of a camera flying over the district. We have chosen low polygonality to maintain a high loading speed and reduce the memory consumption.

The model baking technology also allowed to optimize the website.

Instead of calculating shadows in real time, we have used textures with «baked» shadows — the primary light sources do not move, the shadows themselves are static.

It takes 5 milliseconds to read the map data, which increases the performance by approximately 50 times.

Integrating the finished model into the website

The frontend uses WebGL technology: it allows controlling 3D graphics on the webpage using hardware acceleration. To interact with the model, we have given users the ability to fly around the district, where they could zoom and switch between floors, as well as highlight different elements with an interactive flashlight cursor.

Contrasting backlighting stands out against the monochrome buildings and illuminates interesting details.

Front-end and back-end development

In addition to the 3D modeling, we have undertaken the website development. All the animations were designed on the frontend: the webpages transitions, interface mini-hovers and scrolling reactions.