Creddy
Дизайн и разработка сайта для современного p2p-сервиса онлайн-кредитования
кейс
Сколково Парк
Разработка сайта, технологичная 3D-модель и интеграция VR-тура для делового квартала
задача
Спроектировать запоминающийся пользовательский опыт, который подчеркнёт технологичный и прогрессивный образ делового квартала и жилого комплекса, а также раскроет концепцию LIVE.WORK.PLAY.LEARN.
клиент
Proximity
отрасль
Архитектура и недвижимость
год запуска
2020
что сделали
Frontend-разработка
Backend-разработка
3D-модели
награды
FWA
FWA of the Day, 15 декабря 2021
Awwwards
Site of the Day, 31 октября 2021
Tagline Awards
Золото, «Лучший сайт о недвижимости», 29 апреля 2021
Tagline Awards
Серебро, «Лучший 3D-проект», 29 апреля 2021
Tagline Awards
Бронза, «Совершенное исполнение (Craft)», 29 апреля 2021
Рейтинг Рунета
1 место «B2C, бизнес для потребителя», 15 октября 2021
Рейтинг Рунета
2 место «Строительство», 15 октября 2021
Awwwards
Developer Award, 31 октября 2021
CSS Design Awards
Website of the Day, 21 декабря 2021
Золотой Сайт
1 место, Сайт жилого или коммерческого объекта недвижимости, 14 декабря 2020
Основная идея
Важным требованием к проекту была максимальная фотореалистичность графики: решили, где возможно, использовать съемочный материал, где нет — комбинировать графику со съемкой, а 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 были понятны, а этапы прозрачны. Ценим такой подход, он помогает стабильно вести задачи и дает чувство уверенности в партнерстве.
смотрите также
связаться