{"id":3919,"url":"\/distributions\/3919\/click?bit=1&hash=25d0bfb8ab9076258f985f082384c9bc6a34b4e3afb3e71df41ca22ffff3a5f4","title":"\u0427\u0435\u043c\u043f\u0438\u043e\u043d\u0430\u0442 \u0434\u043b\u044f \u0438\u043d\u0432\u0435\u0441\u0442\u043e\u0440\u043e\u0432: \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0438\u0433\u0440\u0430\u0442\u044c \u0434\u043e 100 \u043c\u043b\u043d \u0440\u0443\u0431\u043b\u0435\u0439","buttonText":"\u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e!","imageUuid":"8c1166aa-ed4d-5964-8fea-818410a466e6","isPaidAndBannersEnabled":false}
3D
Дарт Соус

Анимация циферок и счётчика в Blender

Софтом от Абобы я не пользуюсь, а в Davinci этот вопрос решать не очень удобно. Поэтому для этих целей использую Блендер

Будем делать только движение цифр, остальное сами :)

В чём суть задачи: часто мне по работе для видеокреативов требуется заанимировать простой счётчик в UI (ну или цифры прямиком в 3D пространстве).

Если это 2D, то можно сделать анимацию в AfterEffects. Однако софтом Абобы я не пользуюсь, а в Davinci это делается не очень удобно. Поэтому я юзаю Блендер. В нём понадобятся — Geometry Nodes и несколько минут времени.

Время работы — 5—10 минут. Сложность работы — лёгкая

Поехали

Содержание скрыто
Показать

Этап № 1. База

Первым делом базированные вещи — удалить куб, создать куб.

Default Cube

Этап № 2. Создаем цифры и анимируем

Здесь нужно создать новое древо нодов для нашего куба (в целом вообще не важно, какой будет объект) и открепить ноду "Group Input"

Открываем редактор нод и создаем новое древо

Далее мы вызываем (Shift + A) ноду String to Curves

Нода String to Curves

Если подключить эту ноду в Group Input и в строке String написать что–либо, то можно увидеть результат

Мой выбор

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

Дальше нам нужно вызвать ноду Value to String

Нода выделена красным

Вписывая в эту ноду значения мы и будем получать необходимую нам цифру. Значения можно анимировать, следовательно — получать анимацию цифр.

Ключи анимации ставятся нажатием кнопки "i" на клавиатуре и когда курсор наведён на строку Value в ноде Value to String.

Или ПКМ и Insert KeyFrames

Этап № 3. Делаем объём

Мы получили простую связку и теперь цифры представлены в программе в виде кривых. Нам надо, чтобы выглядело "как 3D" и чтобы на это можно было наложить цвет

Для этого нам нужно вызвать ноду Fill Curve, которая "зальёт" наши кривые.

Нода показана стрелочкой

Далее нам захочется задать цвет для текста (а может и не захочется, но делать надо). Для этого переходим в предпросмотр материала (сверху справа), после создаём материал (можно его назвать Text для удобства) и задаём ему цвет (любой)

Создание материала и выбор цвета

Сейчас цифрам не особо интересно, какой цвет мы там выбрали, пока они серые. Для того, чтобы им стало поинтересней, в нашу связку геонод нужно вызвать ноду Set Material. В этой ноде будет пустая строка и там уже можно выбрать материал, который мы только что создали

Нода которая скажет какой материал юзать

В материале Text в любой момент можно что–то изменить и это, соответственно, отразится на наших цифрах

Далее, если мы хотим "сделать как 3D чтобы", то нужно добавить ноду Extrude Mesh и в ней ползунок Offset Scale отвечает за "глубину текста"

Нода Exrude Mesh, которая придает объём

Теперь цифры объёмные и можно наслаждаться; но есть нюанс — с другой стороны цифры не залиты и получается некрасиво (для статик рендеров будет не видно, конечно, но для анимации лучше сделать норм)

Чтобы пофиксить пустоту — вызываем ноду Join Geometry и вставляем в неё нашу связку нод без Extrude Mesh (это плоская часть без объёма) и пропущенную геометрию через Extrude Mesh (это цифры которые как 3D). И теперь получается, что мы соединили обе части и с обратной стороны всё нормально (если не понятно, то картинка в помощь)

Объединяем

Если при создании материала вместо Principled BSDF взять Emission поверхность (так лучше всегда делать для текста и цифр), то текст будет выглядеть нормально сразу, без Join Geometry. Но я парень не очень умный, поэтому тратим время на фикс мелочей

Собственно про 3D часть всё. Теперь можно делать анимацию любого количества и добавлять еще какие–нибудь элементы

Далее небольшой нюанс про 2D составляющую: часто надо, чтобы цифры оставались плоскими. В таком случае порой неплохо добавлять под них тень (как на превьюхе поста зеленая тень и на картинке ниже синяя тень)

Для этого нужно создать новый материал (пускай будет синий), открепить ноду Extrude Mesh и на её место вызвать ноду Transform; после неё вызвать ноду Set Material и там воткнуть материал нашей тени:

Нода Transform и Материала

После этого на небольшjе значение подвинуть тень в ноде Transform в графе по Z и X, чтобы её стало видно:

Делаю тень

Как можно понять, это не натуральная тень, просто дубликат нашего текста в нодах. Для этих целей в других программах (AE, PS и тд.) существует эффект Shadow. Здесь мы Shadow сделали сами, поздравляю.

На этом с нодами и в целом с тутором всё

Необязательный этап рендера

Можете зарендерить, а можете и нет, дело ваше. Я лишь покажу, как это сделать правильно (весь процесс ниже текста на видео)

Рендерить будем в EEVEE. Переходим в Viewport Shading и после переводим наши оба материала в Emission поверхность, чтобы был тупа текст и нам не приходилось выставлять свет.

Потом идём во вкладку Render Properties и там во вкладке Film ставим галочку в поле Transparent, чтобы можно было вывести анимацию с прозрачным фоном (Альфа каналом).

Далее добавляем камеру и по комбинации Ctr+Alt+0 (нумпад) выставляем её там же, где и наш предпросмотр во вьюпорте. Потом камеру немного двигаем, чтобы было нормально всё видно.

Далее в настройках Output Properties во вкладке Output выставляем RGBA, что значит рендер с Альфа каналом. Компрессию можно установить на 25% и больше, ибо это текст и особо не будет разницы.

Выводим обязательно в PNG секвенцию (набор PNG картинков). Вообще, любую анимацию из 3D софта лучше выводить в PNG секвенцию, а не сразу в MP4/H.264. Почему и как — тема для отдельного поста (инфа по теме легко ищется в Яндексе).

Потом указываем в папку, куда зарендерится наша секвенция.

Далее с PNG секвенцией можно поиграться (добавить Glow, навалить цвета там и тд.) и отрендерить в MP4. Я обычно закидываю секвенцию в Davinci, но сейчас сделаем в Блендере (видео с выводом в MP4 снизу)

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

0
17 комментариев
Написать комментарий...
Денис Морозов

1488

Ответить
Развернуть ветку
Дарт Соус
Автор

Случайно вышло, я думаю

Ответить
Развернуть ветку
Ренат Валиди
Ответить
Развернуть ветку
Денис Кораблев

не ты чтоли делал?

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

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

Ответить
Развернуть ветку
Дарт Соус
Автор

Вместо того, чтобы просто пройти мимо, ты потратил время на комментирование хуйни

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

Тебя забыл спросить, на что мне тратить свое время.

Ответить
Развернуть ветку
Дарт Соус
Автор

"Блендертим" тебя забыла спросить, чем заниматься

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

На гифке зациклены 3 числа.

Ладно, я могу понять первые цифры:
1917 - Революция
1703 - название клуба, где проводились ВЕРСУС БАТЛЫ, а также татуировка у ОКСИМИРОНА

это же явно не случайно?

Но что же скажешь тогда про 1488?

Звонить товарищу майору?

Ответить
Развернуть ветку
Дарт Соус
Автор

1703 — год основания СПБ. а 1488 это номер автобуса, на котором я до магаза езжу. Остальное не знаю

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

Пётр 1 выбрал дату после того, как Оксимирон тату набил.

Ответить
Развернуть ветку
Евгений Серегин

Так а где сама анимация? Я вижу просто мгновенную подмену циферок.

Ответить
Развернуть ветку
Дарт Соус
Автор

А как–то по–другому цифры можно сделать?

Ответить
Развернуть ветку
Евгений Серегин

Ну да, как в часах-будильниках. Переворотом, сдвигом, как в ручных часах, прокруткой. Да как угодно еще.

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

Ну, че, Хайль Гитлер пацаны

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

Это, конечно, всё очень круто, но для анимации цифр давно придумали специальный плагин-аддон для Blender 3D и он бесплатный, и в этом аддоне вся эта анимация создания занимает пару секунд

Ответить
Развернуть ветку
Дарт Соус
Автор

ок

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