Крупнейший digital-конкурс в Европе

Сайт и 3D-модель делового квартала «Сколково парк»

Заказчик: Proximity
Исполнитель: Red Collar
Share
Сайт и 3D-модель делового квартала «Сколково парк»

Описание

Технологичный сайт для делового квартала «Сколково парк». Передовой квартал для жизни и бизнеса, прогуляться по которому можно благодаря полномасштабной интерактивной 3D-модели, детальному видео-облету и внедренному VR-туру.

A technologically advanced website for a business quarter called ‘Skolkovo Park’. It’s an advanced quarter for life and business. You can explore it by using an interactive full-scale 3D model, a highly-detailed fly-around video and an embedded VR tour.

Поставленная задача и ее решение

Задача
Предстояло выстроить пользовательский опыт, который с помощью интерактивных механик и обилия визуальных материалов раскроет концепцию LIVE.WORK.PLAY.LEARN. Немаловажным требованием была максимальная фотореалистичность графики, поэтому было принято решение, где возможно, использовать съемочный материал, где нет — комбинировать графику со съемкой, а 3D-графику использовать для дополнительного интересного интерактива.

Решение
Сайт
Сдача первых офисных зданий запланирована на 2021 год, но окружающая инфраструктура уже построена, поэтому для максимальной фотореалистичности было принято решение снимать территорию с квадрокоптера и только офисные здания интегрировать на компьютерной графике.

Разработка и внедрение 3D делилась на три этапа: моделинг, внедрение и оптимизация.
Первый этап — моделирование в Blender.
Моделировали с нуля, опираясь на визуальную 2D-карту плана застройки и видео-модель с облетом. На этом этапе важно было совместить эстетику и максимальную легкость для будущего внедрения на сайт.

Чтобы уменьшить объем потребления памяти и увеличить скорость загрузки со всех устройств, сделали минимум полигонов и придерживались геометрического стиля «лоуполи»: схематичные деревья, кубические формы, полный 3D-минимализм.

Второй этап — внедрение модели в сайт, проектирование анимации и интерактивных элементов. Реализовано на WebGL (примечание: технология позволяет отображать и манипулировать трехмерной графикой на веб-страницах, эта технология использует аппаратное ускорение для расчета тяжелых анимаций) и библиотеке three.js

- Задали заранее определенное движение камеры: можно приблизить, расширить и взаимодействовать с моделью. Плавный изинг облетает вокруг модели по приятным «киношным» ракурсам.
- Интерактивный «фонарик». Монохромный макет оттенили курсором с желтой ламповой подсветкой, это концентрирует внимание пользователя и делает модель более подробной.
- Функции приближения объектов и переключения между этажами позволяют проникнуть внутрь помещений.
- Скорости загрузки со всех устройств добились с помощью запекания модели. Этот подход обычно применяется в GameDev-индустрии, но его использование на сайте позволило повысить качество теней во много раз. Карта с запеченными тенями рендерится около 8-и часов. Имея готовую карту, мы можем выводить эти тени на модель за милисекунды, тогда как при обычном подходе ни одна современная видеокарта не была бы способна выводить тени такого качества в реальном времени.

Кроме того:
- Внедрили видео квартала с возможностью облета и перемещения как в видео-туре, но с эффектом технологичной модели. У клиента было одно пожелание — сделать на фронтенде так, чтобы быстро грузилось и на десктопе, и на мобилке, и можно было перемещаться внутри видео. Выбрали эффект контролируемого движения в плавном видео с раскадровкой для имитации перемещения.
- Интегрировали VR-тур в сайт, импортируя скрипты для отображения пространства на VR-носителях. Сделали автоматическое определение устройства пользователя и сайт включает или 3D-тур с десктопа и мобилки, или VR-версию. Добавили свой интерфейс, который меняет сцены и в зависимости от выбора сценария скрывается часть контролов для лучшего экспириенса.
- Сделали верстку всех страниц сайта, прописали все анимации: кнопки, переходы между страницами, интерфейсные микро-ховеры, реакции по скроллу и другое.

Design and implementation of the 3D model was divided into three steps: modelling, implementation and optimization.

The first step was the model design in Blender. We did it from scratch, based on a 2D visual development map and a video fly-around model. At this stage, it was crucial to make it both look aesthetically pleasing and weigh as little as possible for the future implementation onto the website.

The second stage was to implement the model on the front end, to design its animation and interactive elements. It has been done using WebGL (the technology allows to display and manipulate 3D graphics on web pages using hardware acceleration to calculate heavy animations) and three.js library.

We’ve assigned certain motions to the camera based on pleasant cinema-like angles. The model has an interactive ‘torchlight’ for additional interaction, and you can have a look inside buildings! To increase the loading times and to optimize the files, we opted for model baking which we spied in GameDev.

Apart from that, we’ve implemented a fly-over video of the quarter that has an effect of controlled movement. We’ve integrated a VR tour into the website as well, added our own interface of scene-change and many more.

Скриншоты

Видео

Достигнутые цели и KPI по итогам запуска

Сайт закрывает несколько задач. Один из инструментов продаж, в том числе при личных встречах и для узкой взыскательной аудитории. Также — создание передового имиджа квартала. Обе задачи решили технологичными решениями, VR-туром и 3D-моделингом, максимально оптимизировав объекты для быстрой загрузки со всех устройств. Цветовой и смысловой акцент оставили на самом квартале, выгодно подчеркнув его дизайном.

The website is an answer for several tasks. First of all, it is one of the sales tools, especially during personal meetings and while working with a narrow and demanding audience. Additionally, it builds the image of an innovative quarter. Both tasks were resolved by high-tech solutions, a VR tour and 3D modelling, by highly optimizing the objects used and increasing loading speeds on any device. The colour- and semantic accent was put on the quarter itself by giving it a good showing through design.
Share
Tagline
Подать работу на
Tagline Awards 2021–2022
До повышения цены:
Золото
• Лучший сайт о недвижимости
Tagline Awards 2020–2021
Серебро
• Лучший 3D-проект
Tagline Awards 2020–2021
Бронза
• Совершенное исполнение (Craft)
Tagline Awards 2020–2021

Дата запуска

16 сентября 2020 года

Авторы

Клиент
Станислав Лобанов — руководитель отдела маркетинга компании «Миллхаус»;
Артем Горохов — директор по аренде Делового квартала «Сколково Парк»;

Proximity
Стратегия, концепция, дизайн, контент и арт-дирекшен
Наталия Тен — директор отдела по работе с клиентами;
Дмитрий Иванов — директор по производству;
Андрей Ильясов — креативный директор;
Илья Куликов — Арт-директор;
Нина Шервашидзе — директор по работе с клиентами;
Екатерина Норсоян — продюсер;
Павел Борисов — продюсер;
Анна Шайдурова — младший менеджер по работе с клиентами.

Red Collar
3D, frontend и backend-разработка
Сергей Свиридов — продюсер проекта;
Антон Устинов — frontend-разработчик;
Денис Сафонов — frontend-разработчик;
Никита Лахин — 3D и frontend-разработчик;
Маргарита Галыгина — 3D-дизайнер;
Рустам Каламов — backend-разработчик.

Соавторы

Стратегия, концепция, дизайн, контент и арт-дирекшен — Proximity. 3D-моделирование для разделов «О проекте» и «Офисные пространства», а также вся frontend и backend-разработка — Red Collar.

Номинации

Сайты → Недвижимость
Совершенное исполнение (Craft) → 3D

Ссылки

skolkovoforbusiness.com