Приручить погоду: как мы создали анимированные заставки для Яндекс Станции Дуо Макс

Всем привет! Я Леша Пьянков, дизайн-директор Pragmatica. В статье расскажу, как мы анимировали заставки с погодой для устройств с Алисой, от концепта до технической начинки.

Что внутри:

Заставки для счастья

Команда Яндекс Станции Дуо Макс создала интерьерный девайс, в котором все сценарии Алисы должны были получить впервые свой UI. В один из сценариев с погодой ребята решили добавить новую фичу – фотореалистичные анимированные заставки, которые подстраиваются под погоду за окном в разное время суток и сезон. До этого заставки были плоскими и статичными.

Это был масштабный и довольно ответственный проект – принести погоду в каждый дом, где есть устройства Алисы с умными экранами. Мы создали залипательные CG анимации, плюсом они стали довольно адаптивными, иммерсивными, будто это не просто заставка, а целый микромир у тебя дома!

Предлагаю посмотреть, что у нас получилось.

Из чего состоит заставка

Ландшафт, который объединяет

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

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

Решили, что придумаем свой пейзаж и взяли за основу ландшафт центральной части России: он универсален и прост, а еще понятен пользователям Алисы.

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

<p>Первые драфты пейзажей генерили в нейросети</p>

Первые драфты пейзажей генерили в нейросети

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

Поиск «того самого» серого

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

Методом коллажа собирали варианты сцены

Согласовали цвета, примерную композицию и пошли делать 3D-сцены. Вот тут началось самое интересное.

Реалистичные облака

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

Мы отказались от каких-либо футажей сразу – они не давали нужного объема, эффекта пушистости и не подстраивались под разные состояния. Поэтому мы начали генерировать облака в Houdini.

Генерация облаков в Houdini

Чтобы облака не были мрачными в пасмурную погоду, мы играли с просветами, так сказать, добавили немного надежды и тепла, потому что, как мы знаем…

«Счастье можно найти даже в темные времена, если не забывать обращаться к свету» (с) Альбус Дамблдор

Просветы в CGI облаках – почти как настоящие

А дальше решили вдохнуть в картинку еще больше жизни.

Капелька уюта

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

Ночью в окнах домика горит свет
Ночью в окнах домика горит свет

Теперь о технических шоколадках, которые помогли нам выстроить систему в работе над проектом.

А что за красивой картинкой

Матрица состояний. Нам нужно было отрисовать 9 заставок с осадками разной интенсивности. Заглядывая в матрицу, мы понимали, что у нас уже есть и что нужно добавить. А еще она помогла правильно наложить слои, о которых я расскажу ниже.

Из матрицы состояний мы понимали, какие заставки нужно отрисовать
Из матрицы состояний мы понимали, какие заставки нужно отрисовать

Конструктор. Чтобы не рисовать каждое состояние отдельно, мы собирали экраны по слоям. Сначала небо, затем накладывается интерфейс, далее – анимация осадков (снег, дождь, снегодождь).

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

Осадки, больше осадков! Для каждого времени суток мы отрисовали снег и дождь разной интенсивности. А потом смешали их и получили снегодождь. Вуаля, все просто!

Дождь + снег = снегодождь. Все просто

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

Заморочились и зациклили даже самые мелкие детали

Мы сделали так, чтобы облака возвращались на прежнюю точку, а травинка вставала на место. Это была настоящая проверка на усидчивость.

Давид Нельдушкин
дизайн-лид

«Мы не создавали каждое состояние экрана с нуля, а брали базовую сцену и, с помощью цветокоррекции и добавления осадков, адаптировали, создавая нужный эффект. Это позволило нам не менять само наполнение: травинка, дерево, куст, домик – все остается на своих местах».

Давайте вместе просто позалипаем.

И наступила зима…

Позже в матрице появились новые зимние состояния. Мы взяли за основу наш конструктор и добавили в него нужные детали – елку, украшенный домик и снегопад.

Посмотрите, какой новогодний спешл у нас получился!

В итоге с помощью конструктора мы собрали больше 40 заставок под разные состояния погоды. Это был наш первый большой проект с 3D-графикой и CGI. И знаете, ощущение, будто мы воссоздали частичку мира Алисы, прикоснулись к прекрасному (или даже создали его!), и теперь каждый пользователь может проникнуться погодой за окном через заставку.

Чаще, чем на VC, мы рассказываем о своих проектах в телеграме Senior Designer. Заглядывайте в гости.

7272
11
15 комментариев

ландшафт конечно красивый,но сказочный🤣Вот ландшафт похожий на все и сразу🤣

7
1
Ответить

Очень, очень круто и кейс интересный!

3
Ответить

Это невероятно…!

2
Ответить

Кайф!

2
Ответить

Это очень круто, ребята!

2
Ответить

Кайфы, Лёш! Крутая работа

2
Ответить

Нормас

2
Ответить