drag

we craft award-winning digital experiences that reach both minds and hearts of people

7
45
11
3
35
5

case

Skolkovo for business

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

skolkovoforbusiness.ru
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

type

Real estate

year

2020

worklog

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

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.

testimonials

JavaScript

webpack

SCSS

Three.js

webGL

bitrix

vanilla JS

GSAP

see also

Save Whales

A website supporting endangered marine animals

GUS-Trans

A website designed to tell about the company’s expertise on transporting cargos

Eurovet

An innovative website for Eurovet, a veterinary products distributor

let us know

Have an idea in mind?

We’re Red Collar. And what’s your name? We actually need your e-mail to get in touch Wow, this load is way too heavy for us. Files larger than 10 MB can be sent to hello@redcollar.ru You made a mistake, but it’s fine. We all do. Enter a valid e-mail, please

By submitting this form you agree to our privacy policy.