Наша ERA: как мы обуздали WebGL для сайта о недвижимости

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

Центральный элемент сайта — интерактивная 3D-карта района на WebGL. Это первое решение такого уровня и масштаба в рунете, да и среди сайтов о жилой недвижимости во всем мире аналогов немного. Рассказываем, как мы создали самый продвинутый промо-сайт для ведущего застройщика.

Мы — Vide Infra, занимаемся дизайном и девелопментом диджитал-продуктов. Делаем бесподобные сайты, которые регулярно собирают награды, входим в топ-10 самых креативных веб-студий Рейтинга Рунета и топ-40 мирового рейтинга Awwwards. О наших проектах и новостях, читайте на videinfra.ru

Tekta group — один из крупнейших девелоперов Москвы. Для Tekta мы создали уже три проекта, и каждый завоевал награды на российских и мировых конкурсах веб-дизайна:

Флагманский проект ERA — самый амбициозный из всех, с которыми мы работали. Это квартал из 6 высоток, переосмысляющий архитектурный стиль ар-деко. Он располагается в Даниловском районе Москвы, на границе между городским центром и периферией.

Ар-деко

Отправной точкой бренда стал архитектурный стиль ERA — ар-деко. Изначально у нас был соблазн сфокусироваться на шике и гедонизме в духе “Великого Гэтсби”. Однако слишком агрессивное праздничное настроение не попадало бы в аудиторию. ERA — это качественное и доступное жилье для среднего класса. Или, как выразил это клиент: “Мы продаем не Роллс-Ройсы, а Мерседесы”. Поэтому мы сменили регистр на более спокойный, уютный и домашний, сохранив основные темы.

Ар-деко определил сдержанную благородную палитру и геометрию, объединяющую сайт. Элементы фасадов ERA: узоры, арки и линии — легли в основу патернов фона, переходов и других элементов.

Сквозная линия

Ключевой образ всего сайта — сияющий силуэт здания, который появляется на начальной заставке. Мы создали его с помощью технологии WebGL. Он символизирует эпохальность, значительность появления квартала ERA в городе. Образ подчеркивает слоган: “Начало новой эры”.

Из этих концептов вытекает визуальный лейтмотив — световая линия. Она регулярно встречается на сайте в разных формах, делает его узнаваемым. Чтобы сделать эти линии яркими, детализированными и объемными, мы также использовали WebGL.

Сайт насыщен контентом, который возвращает заинтересованного клиента. Каждый раз посетитель будет обнаруживать новые детали, валидирующие его выбор.

Расположение

Локация — одно из ключевых преимуществ любой жилой недвижимости. Клиент выбирает не просто здание, а образ жизни.

Квартал ERA строится в своеобразном районе с богатой историей и культурой, который находится между городским центром и периферией. Нам было важно рассказать о нем: какие возможности он дает, в какой атмосфере находятся жители и как ERA взаимодействует с контекстом. В результате раздел сайта о расположении квартала получился нетипично большим — значит нужно подать объемную информацию так, чтобы увлечь, а не утомить посетителя.

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

Пространство и время

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

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

Архитектурное событие

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

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

3D-карта района

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

Мы самостоятельно адаптировали и упростили реальный план района, создали 3D-модель проекта и встроили ее в сайт. Затем отметили ключевые места притяжения и добавили анимацию. В итоге получился живой, открытый к взаимодействию фрагмент города, вовлекающий пользователя. Он позволяет ощутить объемное пространство и дает такой уровень погружения, который невозможен с двумерной картой.

Дорога к дому

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

Цельный взгляд

Обычно подробный рассказ об архитектурных особенностях подается через отдельные фрагменты. Вместо этого мы использовали большой рендер проекта с хорошим разрешением, чтобы сохранить цельное впечатление. При скролле камера наводится на конкретные детали рендера, а картинка не теряет качество.

Здание на ощупь

Чтобы рассказать о материалах проекта мы создали кастомные 3D-модели. На сайте они представлены как статичные иллюстрации, но объем позволяет передать тактильное ощущение от текстур, обогащая восприятие пользователя.

Разум и чувства

Мы выстраиваем сторителлинг таким образом, чтобы он работал и на рациональном уровне, и на эмоциональном. Экспрессивный визуальный ряд и слоганы соседствуют с цифрами и фактами. Такая комплексная насыщенность развлекает пользователя и дает ему конкретное понимание преимуществ проекта.

Одной из амбициозных целей было придать сайту глубину за счет объемных элементов и интерактивных моделей. Для этого мы использовали технологию WebGL, которая позволяет рендерить 3D-объекты прямо в браузере.

Что это за технология?

WebGL позволяет рисовать трехмерные объекты, задавать им текстуру, располагать относительно камеры, устанавливать свет — все, как в привычном софте для 3D-моделирования. Только делается это с помощью кода. Без WebGL нельзя получить на сайте динамическую трехмерную графику.

WebGL исполняется как элемент HTML5 и требует работу с языком GLSL. На нем пишутся основные функции WebGL — шейдеры, которые задают координаты вершин объектов и определяют цвета пикселей. В основном, мы использовали библиотеку Three.js, которая упрощает доступ к 3D-объектам.

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

Однако удачное решение этой проблемы оправдывает усилия— достичь такой глубины, интерактивности и вовлеченности пользователей без WebGL было бы невозможно.

Что мы сделали с помощью WebGL?

Заставка

Футуристичные интерактивные силуэты зданий — лицо проекта, они задают тон всему сайту. Мы стремились создать качественный, содержательный образ, который восторгает неожиданной глубиной и эпохальностью.

Моделирование заставки

На первом этапе иллюстратор нарисовал модель зданий в графическом софте. Это позволило поставить цель — увидеть, какой результат мы хотим получить. Затем вместе с разработчиком он корректировал модель так, чтобы ее можно было построить с помощью кода. Для этого, прежде всего, требуется ее упростить: чем меньше полигонов — тем меньше вершин будет в коде, а значит быстрее будет грузиться сайт. Общую модель квартала мы разбили на пять, чтобы можно было взаимодействовать с каждой из них по отдельности и настроить разные эффекты для пяти уровней глубины.

Отрисовка моделей

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

Чтобы все здания выглядели качественно, мы изменяли шейдеры под собственные нужды: добавили параметры шума, зернистости и другие свойства, которые определяют, как объекты принимают свет. Все это позволило добиться блюра задней части модели и создать глубину резкости.

Отражение

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

Постпроцессинг

Постпроцессинг, то есть наложение визуальных эффектов на всю сцену целиком, — это самый технологичный этап работы. К нашей сцене мы добавили фишай и хроматическую аберрацию, чтобы изображение напоминало голограмму, а также сглаживание, чтобы избежать пикселизации линий.

Какой вышла заставка?

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

Карта района

Мы столкнулись с тем, что готовые решения, которые дает специальный софт для карт, недостаточно гибкие — пришлось их кастомизировать. Так мы добились нужного нам управления камерой, увеличили интерактивность и создали более реалистичные объекты, например, реку.

Нам хотелось оживить сцену за счет деталей. Мы нарисовали схему дорог района и использовали ее как информацию о путях, которые добавили на карту. По этим путям запустили частицы — объекты из Three.js. Получились автомобили, которые бесконечно ездят вокруг квартала ERA.

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

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

Подпишитесь на нас, чтобы не пропустить новые детальные разборы кейсов, обсуждения трендов индустрии и взрывных идей. Также следите за нами в Telegram-канале и на сайте Vide Infra. Следующий лонгрид мы посвятим тому, как можно использовать ИИ в банковских приложениях.

На связи!