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

Главное о кейсе

Сайт закрывает несколько задач. Один из инструментов продаж, в том числе при личных встречах и для узкой взыскательной аудитории. Также — создание передового имиджа квартала. Обе задачи решили технологичными решениями, 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.

Бизнес-задача и ее решение

Задача
Предстояло выстроить пользовательский опыт, который с помощью интерактивных механик и обилия визуальных материалов раскроет концепцию 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.

Прочая информация о кейсе

Технологичный сайт для делового квартала «Сколково парк». Передовой квартал для жизни и бизнеса, прогуляться по которому можно благодаря полномасштабной интерактивной 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.

Скриншоты

Видео