{"id":13465,"url":"\/distributions\/13465\/click?bit=1&hash=1e6228dc4e5e22730d5108e1c30ee96b3462205737e7a3fe7ce4c965aaacfe57","title":"\u041a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u044f Ozon \u2014 \u043a\u043e\u043c\u0443, \u0447\u0442\u043e \u0438 \u043a\u0430\u043a \u043f\u0440\u043e\u0434\u0430\u0432\u0430\u0442\u044c \u0432 \u043a\u0440\u0438\u0437\u0438\u0441","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"6b1e0c55-41d3-56c2-84e2-fe6f447e3825","isPaidAndBannersEnabled":false}
Дизайн
Denis Weber

Повторил рекламу «Яндекс.Gо» в Blender за 24 часа

Всем привет!

Пару месяцев назад я выложил на ютюб видео с созданием рекламы «Яндекс.Gо». Сразу оговорюсь, что этот ролик никем не проплачен, мне просто захотелось повторить то, что я когда-то не умел. Я написал текстовую версию, а если вам больше нравится смотреть на видео, я оставлю ссылку в конце статьи.

Когда-то давно я открыл программу для 3д моделирования и... закрыл через 10 минут, а потом не возвращался к ней несколько лет. Она показалась мне тогда чем-то нереально сложным и непонятным.

Спустя время я увидел на ютюбе рекламу Яндекс GO. Я тогда и понятия не имел, как это сделано. Человечки, машины, здания, плавная анимация и всё это в 3д. Я обещал себе, что когда-нибудь сделаю такую же но конечно же не думал, что вообще научусь чему-то подобному. Настолько нереально сложным это мне казалось.

Шло время и я снова вернулся к 3д. Прогресс пошёл, а уже меньше, чем через пол года я мог создавать low poly модели и не очень сложную анимацию. Именно тогда я вспомнил о рекламе Яндекс, которой так восхищался. А чтобы было интереснее, я решил повторить её за 24 часа. Получится ли у меня хоть что-то, из того, что я задумал? Об этом вы узнаете уже в конце статьи.

Сразу оговорюсь, что я не учитывал время на сон и еду, так как во сне я могу лишь только мечтать о ещё более крутых проектах. Итак, время пошло.

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

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

Я насчитал около десяти разных видов домов и быстро набросал их на плоскость. Мне нравится Blender тем, что в интернете огромное количество туториалов и примеров, на которые можно посмотреть, если появляются какие-то трудности. Трудностей при создании видео было много, поэтому я часто гуглил что-то вроде "Как быстро сделать звезду в Blender" или "Как стать про в анимации за 10 минут." Ютюб, Скорость 2x, вы знаете что делать.

Кроме обычных геометрических фигур, на сцене есть также две "спешл" фигуры. Слоёное здание с жёлтым центром и ларёк с табуретками. Со слоёным зданием проблем не возникло. А вот над ларьком нужно было подумать.

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

Чтобы всё выглядело более красочно, я решил покрасить уже созданные элементы карты. Судя по видео, у каждого дома есть сглаживание. Ещё 20 минут ушло на создание сглаживания и всё стало выглядить более-менее прилично.

Сначала я подумал, что в ролике используют несколько моделей машин. Поэтому начал с "первой" модели на скриншоте, но потом присмотрелся и понял, что моделлеры яндекс тоже не любят сильно запариваться и что они клонировали одну модель и по-разному её раскрасили. Уже после того, как я сделал финальный вариант машины, вспомнил, что можно было скачать фото, например, форда фокус и сделать модельку по нему. Но я же не ищу лёгких путей.

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

Как хорошо, что в Blender можно просто скопировать объект и поменять в нём то, что нужно. Именно так я и сделал с машинами. А судя по оригиналу, они отличаются только краской корпуса.

В этом видео есть одна моделька, которую не так просто увидеть. Она появляется в кадре всего на 3 секунды. Как вы могли угадать - это автобус. 30 минут и моделька на 3 секунды готова.

Тележка. Хм, с виду выглядит просто. Почему-же тогда на YouTube десятки видео "Как сделать тележку для продуктов в Blender?". Оказывается есть свой способ, который сильно экономит время и нервы. Я взял куб, разделил его на полигоны, удалил ненужные грани и связал с кривой в виде круга. И конечно не забыл добавить колёса и ручку. Готово, не так и сложно. Но чтобы было поменьше полигонов, всё равно пришлось переделывать тележку заново.

А тем временем прошло уже целых 4 часа. В видео 9 человечков, 3 курьера на самокате, 1 курьер на велосипеде, 1 пассажир такси, 1 курьер с коробкой, 1 человечек, который получает коробку и 1 водитель, который садится в машину. Ах, да, ещё один человечек, который стоит на другом берегу реки, но похоже он хотел топиться, поэтому в видео участвовать не будет. Ещё 15 минут работы и человечек готов. Человечки в видео различаются только по цвету одежды. И забегая вперёд скажу, что придётся красить их ещё раз. Но сейчас я продолжаю наслаждаться покраской клонов.

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

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

Самое время приступить к созданию экипировки для курьеров. На спину курьеру я закрепил квадратную желтую сумку. А под ноги поставил самокат. Когда-нибудь яндекс захватит всё и по городу будут разъезжать курьеры такого размера, но пока этого не случилось продолжаем наводить порядок на сцене.

Я как мог долго откладывал создание курьера на велосипеде. Но без этого никуда. Хоть он и появляется в видео, как и автобус всего на несколько секунд, без таких мелочей, всё будет выглядеть совсем по-другому. Вообще создавая подобные low poly модельки можно было делать всё ещё проще и не тратить столько времени на их проработку. Но я ориентировался на оригинальное видео, а в нём модельки выглядят достаточно качественно. Ещё 30 минут и велосипед готов.

В реальной жизни такое видео можно было бы снять например с дрона. Но возможности blender позволяют сделать вообще какой угодно ракурс и перемещение камеры без всяких ваших дронов. Да, в Blender также используется камера, для которой можно настроить тип, глубину резкости, размер, апертуру и много чего ещё. Я выбрал ортографическую камеру и по кадрам анимировал её перещение так же, как в оригинальном видео.

Дело в том, что для создания изометрических сцен в Blender нужно выставлять определённые настройки камеры. Но почему-то с такими настройками я никак не мог получить нужный ракурс. Потратив ещё 40 минут, я всё таки настроил ракурс и перемещение камеры по сцене.

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

Как вы уже могли заметить, в Blender есть много вещей из обычной жизни. Например своё солнце, камеры, ну а для перемещения персонажей проще всего использовать путь.

Для этого я создал кривые для каждого объекта, которые нужно перемещать не по прямой линии. Если посмотреть видео, можно заметить, что пути объектов могут пересекаться с другими, но построены они таким образом, чтобы всё выглядело гармонично и чтобы объекты не врезались друг в друга.

Для анимации большое количество моделлеров используют замечательный сервис Mixamo от Adobe. Если вкратце, то любой пользователь может загрузить в этот сервис свою 3д модельку человека, монстра или любого другого героя и анимировать её. А что ещё круче, для модельки будет автоматически создан скелет. Да-да, для движения моделек используется скелет, почти к у обычных людей.

Я загрузил уже готовую модельку курьера, выставил точки для подбородка, локтей, запястьев, паха, коленей и... из-за особенностей геометрии курьера, у него стали просвечивать бока. Я провёл ему несложную, но болезненную операцию и слегка увеличил их толщину. Ура, всё получилось.

В Mixamo огромное количество уже готовых анимаций, и мне нужно было выбрать только то, что подойдёт. Курьер передаёт коробку другой модельке, поэтому я искал анимацию по слову box - коробка. Но в mixamo была только анимация бокса. И я решил остановиться на анимации походки. Она подошла, так как в дальнейшем я её отредактировал.

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

Курьер должен вернуться обратно к машине, поэтому я добавил и это его перемещение.Вся эта небольшая анимация отняла целых три часа. Курьера с сумкой всё таки пришлось загрузить в Mixamo. И хорошо, что анимация поездки на скейте, считай на самокате, здесь уже была.

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

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

После добавления пути для велосипедиста, из-за смещённого центра он поворачивал с заносом. Это бы подошло для игры про велосипедистов дрифтеров, но не для моего видео.

Прошло уже целых 14 часов, но хорошо, что большая часть работы позади.

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

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

С водителем похожая ситуация, но здесь камера направленна точно на него, поэтому сесть в машину ему всё таки придётся. Аниматоры из яндекс решили, что человечку проше протянуть руку к рулю, чем наклонить тело вперёд. Ну ладно. Может никто и не заметил? А я просто запихнул водителя в машину.

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

На красную метку наезжает камера и она переводит на себя внимание зрителя. Здесь ничего сложного. Для неё я изменил размер, положение и поворот в соответствии с движением камеры.

Если присмотреться, при приближении камеры, меняются некоторые элементы карты. Например исчезают дороги и появляются пешеходные зебры. Я изменил тип наложения и прозрачность материалов и анимировал их. С 3д частью закончено, ура.

Да, одним блендером тут не обойтись. Титры и кадры с телефоном в конце я сделал через программу After Effects. Тут всё по старой схеме. Кинул на сцену оригинал видео и ориентировался на него.

Основа заставки - это три анимированных прямоугольника со скруглёнными углами. Когда я думал, что всё будет проще простого, появилась новая проблема. У каждого объекта есть так называемая якорная точка, от которой афтер эффектс отсчитывает изменение размера. Проблемы нет, когда нужно изменить размер прямоугольника, но у меня никак не получалось уменьшить размер прямоугольника со скруглёнными углами, чтобы сохранить правильные пропорции. Провозившись битый час в поисках решения в гугле, и перепробовав несколько вариантов, я всё таки нашёл нужное решение. А именно - скрипт, который прописал для изменения точки. В After Effects можно использовать код для создания анимации и других полезных вещей. Для этого используется специальная версия языка JavaScript, созданная компанией Adobe.

Вот такая маленькая задача может вылиться в большую проблему. И я был очень рад, когда получилось её решить. Тем более, что время поджимало.

Всё что оставалось сделать - финальную заставку. Смартфон, лого и девиз. Я создал телефон из такого же прямоугольника со скруглёнными углами, а вместо иконок добавил разноцветные квадраты. Последний штрих - анимация наезда камеры и готово.Я закончил даже слегка раньше.

Это были тяжёлые 24 часа, но я справился и очень этому рад. И по-моему получилось близко к оригинальному видео. Я получил огромное количество нового опыта и ещё больше прокачал свой скилл в 3d и моушн графике.

Я всегда знал, что чем сложнее задача, тем больше прогресс. Лишний раз убеждаюсь, что если чего-то действительно захотеть, то всё обязательно получится.

Пишите комментарии, если эта статья и видео были вам интересны. И до встречи.

Оригинальное видео:

0
35 комментариев
Написать комментарий...
Alexandr

Ну круто. За сутки сделать такое... И даже потерявшегося самокатчика с едой повторил)

Ответить
Развернуть ветку
Denis Weber
Автор

Спасибо!)

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Герман Манвелов

За 24 часа неплохо

Ответить
Развернуть ветку
Игорь Мыслинский

23:58 Здравствуйте, это из головного офиса. Мы тут принесли пару правочек

Ответить
Развернуть ветку
Eugene Vasin

Разумеется, дьявол в мелочах, и оригинал выглядит дошлифованнее. Разумеется, воссоздать проще, нежели сделать с нуля по сториборду.
Но 24 часа это по-прежнему 24 часа!
Отлично!

P.S. Я сам лет 17 назад открыл 3D Max, и закрыл (правда, через пару месяцев). Похоже, продолжать имеет смысл как раз с Blender.

Ответить
Развернуть ветку
Denis Weber
Автор

Да, 3ds Max почему-то часто отпугивает своим интерфейсом и отбивает всё желание заниматься 3d)

Ответить
Развернуть ветку
Eugene Vasin

На тот момент на самом деле не в сложности интерфейса была загвоздка. Сама навороченность софтины в сочетании с малым по сравнению с сегодняшним днём количеством источников знаний (я фактически изучал по документации к 3D Studio Max) + соотношение время/результат не добавляли мотивации.

В те далёкие годы переключился на Adobe Flash, Photoshop и прочие радости 2D графики.

А сейчас 3D в тренде. Да и 3D Max для macOS, на котором сижу последние 12 лет, не существует, в отличии от кроссплатформенного Blender'а.

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
bloger

Кто-то сейчас нервничает, что потеряет работу из-за конкуренции на рынке труда )))

Ответить
Развернуть ветку
Ленин-гриб

Такие работы это всегда форс, в постоянном режиме так не поработаешь. 

Ответить
Развернуть ветку
Михаил Гурьев

Крутой челлендж! Классно описал все мелкие боли при проектировании и как их решал

Кстати, я сам пытался повторить стилистику Яндекса х ONY, но с вертолетным такси

Это запись из Instagram*. По требованиям Роскомнадзора, мы не можем её показать
*Meta, владеющая Instagram, признана экстремистской организацией на территории Российской Федерации
Ответить
Развернуть ветку
Павел Сутырин

Спасибо за подробности!

Непрерывно 24 часа или в совокупности?

Ответить
Развернуть ветку
Denis Weber
Автор

Как и говорил в видео - в совокупности. Делал перерывы на сон и еду) 24 часа здесь как мотивация скорее)

Ответить
Развернуть ветку
Исмаилов Кенжебек

Круто, отличная работа

Ответить
Развернуть ветку
Denis Weber
Автор

Спасибо!

Ответить
Развернуть ветку
Covid 19

24 часа на анимацию, очень не дурственно!

Ответить
Развернуть ветку
boyk1p Gaming

Класс👍

Ответить
Развернуть ветку
Александр Калинин

Достойно!

Ответить
Развернуть ветку
Роман Василенко

Какой шрифт использовали на скриншотах?) вроде везде одинаковый, но запал на слово «Человечки» со скриншотами всех действующий лиц.

Ответить
Развернуть ветку
Denis Weber
Автор

По-моему там Roboto Bold)

Ответить
Развернуть ветку
Anatoly Ivanov

Yandex Sans вроде как в открытом доступе. Для такого тайминга тем не менее отличная работа! 

Ответить
Развернуть ветку
Специфический щит

Лайк за фон Firewatch ))

Только пожалуйста перестать неправильно склонять слово «вес».

Разбираться в весах - в измерительных приборах
Разбираться в весе - в массе объекта

Вот ещё из твоей прошлой статьи: «связаны с весами костей». Пиши «с весом костей», «привязаны к весу костей»…

Ответить
Развернуть ветку
Denis Weber
Автор

А разве во множественном числе им. падеже не весА?) 

Ответить
Развернуть ветку
Специфический щит

Понятия не имею, но звучит максимально отстойно. Примерно также как «клапана́» вместо «клапаны».
не обращай внимания

Ответить
Развернуть ветку
Denis Weber
Автор

Ок))

Ответить
Развернуть ветку
Кека Пека

не читал, не понял, наверное круто, красавчик

Ответить
Развернуть ветку
Denis Weber
Автор

Хороший подход :D

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Дмитрий Гетько

Красавчик. Подписался. Всегда интересно посмотреть как решать те или иные задачи

Ответить
Развернуть ветку
Artemie LaRusse

3D сцена, конечно, ещё сыровата, НО... За 24 часа это очень даже хорошо! Я думаю, если ты продолжишь дальше развивать свои навыки, будешь учиться чему-то новому в других программах, то вполне вероятно, что такие проекты ты сможешь делать даже меньше, чем 24 часа. Поэтому, удачи тебе!

Ответить
Развернуть ветку
George Romas

Используя Cinema 4D сделал бы за 8 часов, а не за 24

Ответить
Развернуть ветку
Denis Weber
Автор

Я в Cinema не шарю)

Ответить
Развернуть ветку
George Romas

дык. проще мешалки раза в три

Ответить
Развернуть ветку
Oleg

пиздешь

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Андрей Дьяков

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

Ответить
Развернуть ветку
Denis Weber
Автор

Спасибо! С тех пор понабрался опыта и сейчас сделал бы многие вещи по-другому)

Ответить
Развернуть ветку
Читать все 35 комментариев
null