Save Whales
Сайт в поддержку морских животных, находящихся на грани вымирания
Разработка сайта, технологичная 3D-модель и интеграция VR-тура для делового квартала
Спроектировать запоминающийся пользовательский опыт, который подчеркнёт технологичный и прогрессивный образ делового квартала и жилого комплекса, а также раскроет концепцию LIVE.WORK.PLAY.LEARN.
Proximity
Архитектура и недвижимость
2020
Frontend-разработка
Backend-разработка
3D-модели
Важным требованием к проекту была максимальная фотореалистичность графики: решили, где возможно, использовать съемочный материал, где нет — комбинировать графику со съемкой, а 3D-графику использовать для дополнительного интересного интерактива.
Сдача первых офисных зданий была запланирована на 2021 год, но на момент начала работы над задачей окружающая инфраструктура уже была построена, поэтому для максимальной фотореалистичности решили снимать территорию с квадрокоптера и на компьютерной графике интегрировать только офисные здания.
Разработали полномасштабную интерактивную 3D-модель комплекса с нуля, опираясь на 2D-план застройки квартала и видео-модель с облётом. Важно было совместить эстетику и максимальную лёгкость: сделали выбор в пользу низкой полигональности, тем самым сохранив высокую скорость загрузки и уменьшив потребление памяти. Всё в геометрическом стиле «лоуполи»: схематичные деревья, кубические формы, полный 3D-минимализм.
Вместо расчёта теней в режиме реального времени, мы использовали текстуры с «запечёнными» тенями: основные источники света не двигаются относительно сцены, а значит сами тени остаются статичными. Этот подход часто применяется в GameDev-индустрии, и его использование на сайте позволило значительно повысить качество картинки. При обычном подходе ни одна современная видеокарта не была бы способна выводить тени такого качества в реальном времени.
Реализовали модель с помощью технологии WebGL: она позволяет управлять трехмерной графикой на странице за счет аппаратного ускорения.
Задали заранее определенное движение камеры: можно приблизить, расширить и взаимодействовать с моделью. Благодаря плавным изингам, камера облетает модель по приятным «киношным» ракурсам. Серый макет разбавляется приятным свечением курсора, который концентрирует внимание клиента на нужной детали и делает модель более подробной.
Внедрили видео квартала с возможностью облета и перемещения как в видео-туре, но с эффектом технологичной модели. У клиента было одно пожелание — сделать на фронтенде так, чтобы быстро грузилось и на десктопе, и на мобилке, и можно было перемещаться внутри видео. Выбрали эффект контролируемого движения в плавном видео с раскадровкой для имитации перемещения.
Интегрировали VR-тур в сайт, импортируя скрипты для отображения пространства на VR-носителях. Сделали автоматическое определение устройства пользователя и сайт включает или 3D-тур с десктопа и мобилки, или VR-версию. Добавили свой интерфейс, который меняет сцены и в зависимости от выбора сценария скрывается часть контролов для лучшего опыта.
Сделали вёрстку всего сайта, включая полную оптимизацию тяжёлых элементов и анимаций, в том числе переходы между страницами, интерфейсные мини-ховеры и реакции по скроллу.
Мы используем куки и с помощью анонимной статистики делаем сайт ещё лучше