Skolkovo Park
Вернуться к списку-
Тип проекта:Информационный сайт
-
Тематика сайта:Недвижимость, риэлтерские компании
-
Редакция продукта:Старт
-
Сайт:
-
Партнер:
Разработка сайта, технологичная 3D-модель и интеграция VR-тура для делового квартала.
Задача: спроектировать запоминающийся пользовательский опыт, который подчеркнёт технологичный и прогрессивный образ делового квартала и жилого комплекса, а также раскроет концепцию LIVE.WORK.PLAY.LEARN.
Клиент: Proximity
Отрасль: архитектура и недвижимость
Год запуска: 2020
Что сделали: frontend-разработка, backend-разработка, 3D-модели
Основная идея: важным требованием к проекту была максимальная фотореалистичность графики: решили, где возможно, использовать съемочный материал, где нет — комбинировать графику со съемкой, а 3D-графику использовать для дополнительного интересного интерактива.
Сдача первых офисных зданий была запланирована на 2021 год, но на момент начала работы над задачей окружающая инфраструктура уже была построена, поэтому для максимальной фотореалистичности решили снимать территорию с квадрокоптера и на компьютерной графике интегрировать только офисные здания.
Построение 3D-модели: разработали полномасштабную интерактивную 3D-модель комплекса с нуля, опираясь на 2D-план застройки квартала и видео-модель с облётом. Важно было совместить эстетику и максимальную лёгкость: сделали выбор в пользу низкой полигональности, тем самым сохранив высокую скорость загрузки и уменьшив потребление памяти. Всё в геометрическом стиле «лоуполи»: схематичные деревья, кубические формы, полный 3D-минимализм.
Вместо расчёта теней в режиме реального времени, мы использовали текстуры с «запечёнными» тенями: основные источники света не двигаются относительно сцены, а значит сами тени остаются статичными. Этот подход часто применяется в GameDev-индустрии, и его использование на сайте позволило значительно повысить качество картинки. При обычном подходе ни одна современная видеокарта не была бы способна выводить тени такого качества в реальном времени.
Вместо 8-часового рендеринга, выводим тени на модель за 5 миллисекунд: производительность увеличивается в 50 раз.
Интеграция: реализовали модель с помощью технологии WebGL: она позволяет управлять трехмерной графикой на странице за счет аппаратного ускорения.
Задали заранее определенное движение камеры: можно приблизить, расширить и взаимодействовать с моделью. Благодаря плавным изингам, камера облетает модель по приятным «киношным» ракурсам. Серый макет разбавляется приятным свечением курсора, который концентрирует внимание клиента на нужной детали и делает модель более подробной.
Видео-погружение: внедрили видео квартала с возможностью облета и перемещения как в видео-туре, но с эффектом технологичной модели. У клиента было одно пожелание — сделать на фронтенде так, чтобы быстро грузилось и на десктопе, и на мобилке, и можно было перемещаться внутри видео. Выбрали эффект контролируемого движения в плавном видео с раскадровкой для имитации перемещения.
В дополненной реальности: интегрировали VR-тур в сайт, импортируя скрипты для отображения пространства на VR-носителях. Сделали автоматическое определение устройства пользователя и сайт включает или 3D-тур с десктопа и мобилки, или VR-версию. Добавили свой интерфейс, который меняет сцены и в зависимости от выбора сценария скрывается часть контролов для лучшего опыта.
Разработка: сделали вёрстку всего сайта, включая полную оптимизацию тяжёлых элементов и анимаций, в том числе переходы между страницами, интерфейсные мини-ховеры и реакции по скроллу.
Отзыв клиента (Дмитрий Иванов, Директор отдела производства): Сколково считается центром инноваций в России, и сайт делового квартала «Сколково Парк» должен быть не просто на пике технологий, а даже опережать их. Поэтому мы пригласили Red Collar на всю разработку сайта, и заказали создание и внедрение объёмной 3D-модели офисного квартала.
Совместный проект с Red Collar не первый, и помимо отличного качества кода, мы всегда уверены в том, что все будет сделано в срок. Обсуждения даже сложных интерактивов и внедрения VR были понятны, а этапы прозрачны. Ценим такой подход, он помогает стабильно вести задачи и дает чувство уверенности в партнерстве.
Задача: спроектировать запоминающийся пользовательский опыт, который подчеркнёт технологичный и прогрессивный образ делового квартала и жилого комплекса, а также раскроет концепцию LIVE.WORK.PLAY.LEARN.
Клиент: Proximity
Отрасль: архитектура и недвижимость
Год запуска: 2020
Что сделали: frontend-разработка, backend-разработка, 3D-модели
Основная идея: важным требованием к проекту была максимальная фотореалистичность графики: решили, где возможно, использовать съемочный материал, где нет — комбинировать графику со съемкой, а 3D-графику использовать для дополнительного интересного интерактива.
Сдача первых офисных зданий была запланирована на 2021 год, но на момент начала работы над задачей окружающая инфраструктура уже была построена, поэтому для максимальной фотореалистичности решили снимать территорию с квадрокоптера и на компьютерной графике интегрировать только офисные здания.
Построение 3D-модели: разработали полномасштабную интерактивную 3D-модель комплекса с нуля, опираясь на 2D-план застройки квартала и видео-модель с облётом. Важно было совместить эстетику и максимальную лёгкость: сделали выбор в пользу низкой полигональности, тем самым сохранив высокую скорость загрузки и уменьшив потребление памяти. Всё в геометрическом стиле «лоуполи»: схематичные деревья, кубические формы, полный 3D-минимализм.
Вместо расчёта теней в режиме реального времени, мы использовали текстуры с «запечёнными» тенями: основные источники света не двигаются относительно сцены, а значит сами тени остаются статичными. Этот подход часто применяется в GameDev-индустрии, и его использование на сайте позволило значительно повысить качество картинки. При обычном подходе ни одна современная видеокарта не была бы способна выводить тени такого качества в реальном времени.
Вместо 8-часового рендеринга, выводим тени на модель за 5 миллисекунд: производительность увеличивается в 50 раз.
Интеграция: реализовали модель с помощью технологии WebGL: она позволяет управлять трехмерной графикой на странице за счет аппаратного ускорения.
Задали заранее определенное движение камеры: можно приблизить, расширить и взаимодействовать с моделью. Благодаря плавным изингам, камера облетает модель по приятным «киношным» ракурсам. Серый макет разбавляется приятным свечением курсора, который концентрирует внимание клиента на нужной детали и делает модель более подробной.
Видео-погружение: внедрили видео квартала с возможностью облета и перемещения как в видео-туре, но с эффектом технологичной модели. У клиента было одно пожелание — сделать на фронтенде так, чтобы быстро грузилось и на десктопе, и на мобилке, и можно было перемещаться внутри видео. Выбрали эффект контролируемого движения в плавном видео с раскадровкой для имитации перемещения.
В дополненной реальности: интегрировали VR-тур в сайт, импортируя скрипты для отображения пространства на VR-носителях. Сделали автоматическое определение устройства пользователя и сайт включает или 3D-тур с десктопа и мобилки, или VR-версию. Добавили свой интерфейс, который меняет сцены и в зависимости от выбора сценария скрывается часть контролов для лучшего опыта.
Разработка: сделали вёрстку всего сайта, включая полную оптимизацию тяжёлых элементов и анимаций, в том числе переходы между страницами, интерфейсные мини-ховеры и реакции по скроллу.
Отзыв клиента (Дмитрий Иванов, Директор отдела производства): Сколково считается центром инноваций в России, и сайт делового квартала «Сколково Парк» должен быть не просто на пике технологий, а даже опережать их. Поэтому мы пригласили Red Collar на всю разработку сайта, и заказали создание и внедрение объёмной 3D-модели офисного квартала.
Совместный проект с Red Collar не первый, и помимо отличного качества кода, мы всегда уверены в том, что все будет сделано в срок. Обсуждения даже сложных интерактивов и внедрения VR были понятны, а этапы прозрачны. Ценим такой подход, он помогает стабильно вести задачи и дает чувство уверенности в партнерстве.
