drag

кейс

Сколково Парк

Разработка сайта, технологичная 3D-модель и интеграция VR-тура для делового квартала

skolkovoforbusiness.ru
ко всем работам
задача

Спроектировать запоминающийся пользовательский опыт, который подчеркнёт технологичный и прогрессивный образ делового квартала и жилого комплекса, а также раскроет концепцию LIVE.WORK.PLAY.LEARN.

клиент

Proximity

отрасль

Архитектура и недвижимость

год запуска

2020

что сделали

Frontend-разработка
Backend-разработка
3D-модели

награды

Основная идея

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

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

Построение 3D-модели

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

Вместо расчёта теней в режиме реального времени, мы использовали текстуры с «запечёнными» тенями: основные источники света не двигаются относительно сцены, а значит сами тени остаются статичными. Этот подход часто применяется в GameDev-индустрии, и его использование на сайте позволило значительно повысить качество картинки. При обычном подходе ни одна современная видеокарта не была бы способна выводить тени такого качества в реальном времени.

Вместо 8-часового рендеринга, выводим тени на модель за 5 миллисекунд: производительность увеличивается в 50 раз.

Интеграция

Реализовали модель с помощью технологии WebGL: она позволяет управлять трехмерной графикой на странице за счет аппаратного ускорения. 

Задали заранее определенное движение камеры: можно приблизить, расширить и взаимодействовать с моделью. Благодаря плавным изингам, камера облетает модель по приятным «киношным» ракурсам. Серый макет разбавляется приятным свечением курсора, который концентрирует внимание клиента на нужной детали и делает модель более подробной.

Видео-погружение

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

В дополненной реальности

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

Разработка

Сделали вёрстку всего сайта, включая полную оптимизацию тяжёлых элементов и анимаций, в том числе переходы между страницами, интерфейсные мини-ховеры и реакции по скроллу.

технологии

JavaScript

Webpack

SCSS

Three.js

WebGL

Bitrix

Vanilla JS

GSAP

отзыв

Дмитрий Иванов
Дмитрий Иванов
Директор отдела производства
АО «Проксимити»

Сколково считается центром инноваций в России, и сайт делового квартала «Сколково Парк» должен быть не просто на пике технологий, а даже опережать их. Поэтому мы пригласили Red Collar на всю разработку сайта, и заказали создание и внедрение объёмной 3D-модели офисного квартала. 

Совместный проект с Red Collar не первый, и помимо отличного качества кода, мы всегда уверены в том, что все будет сделано в срок. Обсуждения даже сложных интерактивов и внедрения VR были понятны, а этапы прозрачны. Ценим такой подход, он помогает стабильно вести задачи и дает чувство уверенности в партнерстве. 

смотрите также

Digital thinkers conf.

Яркий сайт для конференции Awwwards — престижного конкурса веб-дизайна

Личный кабинет для EOS

Разработка личного кабинета для компании, работающей с кредитной задолженностью

Barcelona Realty Group

Сайт с каталогом для международного агентства недвижимости

связаться

Расскажите о своей задаче

Мы Red Collar, а как зовут вас? Чтобы связаться, нам нужен ваш e-mail Ого, какой тяжелый файл! Больше 10 MБ ждем на hello@redcollar.ru Пожалуйста, проверьте, правильно ли написан e-mail

Нажимая кнопку, вы соглашаетесь с нашей политикой в отношении обработки персональных данных