Як створити просту 3д анімовану гіфку / gif з нуля на прозорому фоні ))

Почалося з того що була ідея для посту в якій присутня 3д анімований текст, а точніше символ. Вирішив написати статтю поки не забув як то робити)

Вступ

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

Ось приклад того що у мене вийшло :D

Ось така була ідея, з музикою краще ) я робив раніше з рухомою плиткою фон і це , на мій погляд, виглядає дуже цікаво.

Ну і звісно кому потрібен якісний одяг для ваших лисих котиків та кішечок сюди ;)

Підготовка

Для створення потрібно буде Блендер ( у моєму випадку) і те що я використововував ( бо у мене не було фотошопу, або я просто забув і пішов по складному шляху) Image magick і GIMP. Достатньо буде однієї з них. Ну або фотошоп ;) я там робив трохи, як виявилося, трохи всрату гіфку монобанку ) бо хотів видалити фон з неї ( то окрема мабуть історія та нічого цікавого, якщо хоче подивитися на закинутий проект з цією гіфкою- dream-donat.glitch.me або хто хоче задонатити на мою мрію про 3д принтер бамбулаб ))

Створення

Спробую нічого не забути як то все було і детально розказати.
спочатку вам потрібна сама ідея і 3д модель )
особисто я створював з тексту. Наступного разу я б робив з фігур бо полігони там дивні вийшли після конвертації і модифікувати їх не зручно.

Встановлюємо та відркиваємо Блендер, видаляємо стандартний куб.

Shift + A > Text обираємо текст.

Тисните Таб та редагує текст (стираєте як звичайний)

Знову повертаєтеся через Таб

Правою кнопокю по тексту “конверт ту меш” щоб перевести з кривих в полігони ( всраті трикутні полігони )

Знову Таб

Обираєте анг Е (екструд) і робите обєм для тексту. Якщо треба по певним осям( у мене Z то тиснете цю клавішу і тягнете, то воно вертикально витягується)

Створюєте матеріал якщо потрібно ( нижній червоний кружечок з квадратами в моїй версії 2.83) , там Нью і створюєте колір і властивості. Все це про матріали освітлення мелечезні теми тому краще подивіться десь окремо ) для нашого випадку я ставив металік на середину і обрав колір.

Перетягнув світло обравши лампочку на сцені ( на сцені три об”єкти, камера, світло і ваш текст чи об”єкт)

Обираємо тест, зазвичай оріджн ( жовта точка) знаходиться на початку тексту, а при обертанні буде обиртатися навколо оріджена, мені потрібно щоб встало в центрі я обераю з меню Обджект > Сет оріджн > Оріджен ту Джеометрі. і У вас “центр” буде в центрі вашого обраного тесту чи обєкту що ви обрали, для інших випадків гугліть , це можна зробити переміщуючи 3д курсор (шифт + права кнопка миші) і так і раніше тільки Обджект > Сет оріджн > Сет ту 3д курсор

Знизу у вас має бути шкала часу в 3д вікні( в самом низу там плей і перемотки в різні боки) Витягуєте її вгору щоб бачити таймлайн

Натискаєте англ І щоб створити першу точку ( важливо щоб ви обирали те що ви будете робити , наприклад для обертання я обирав Ротейшн.

Якщо у вас немає бічної панелі тисніть N на клавіатурі і там оберіть вкладку Ітем (верхня, принаймі, у мене)

В цій панелі побачите кординати і положення обєкта в просторі

Налаштування

При рендері все буде робитися з камери і в її межах, можна переміщати як обєкт її а можно як мені було зручно наблизитися мишкою як мені зручно і натиснути контрл + альт + 0 на цифровій клавіатурі.

В самій бічній панелі справа обираємо іконку принтера з картинкою
там обираємо який буде розмір зображення на виході, а також кількість кадрів у мене 200 (фрейстепс 1 , енд 200 ) та то багато, експерементуйте.

Якщо треба прозорий фон то треба перейти в бічній панелі на іконці фотоаппарата (над принтером) та в вкладці Film та відмітити чекбокс “трансперент”

Далі робимо анімацію

Обираємо кадр на таймлайні , змінюємо положення моделі чи що там у вас, “І” , ротейт чи що там у вас і так далі

Можете періодично програвати і бачити результат натискаючи на “плей” над таймалйном де будете встановлювати кадри

Також можете переключатися між в”юпортами(це всамій горі іконки кульок різної заповненості) щоб бачити тіні і таке інше а також обрати рендер іконці фотоапарату іві для швидкого, сайклс для більш точного.

Ще треба буде в іконці принтера обрати в вкладці Аутпут папку куди буде збережені кадри( бо просто гіфку створити неможливо в моєму блендері 2.83 бо у мене 7 вінда або в принцпі поки що це не можливо в блендер) Обираємо формат пнг щоб була прозорість та RGBA

Рендер Контрл + Ф12

Відразу зявиться вікно і почне показувати покадрово вашу модель чи що там у вас і зберігатися в ту папку що ви обрали.

чекаємо і маємо що маємо )

Далі робимо анімацію. Можна було обрати якісь онлайн варіанти та там обмеження по кількості кадрів) можливо воно і не потрібно стільки тих кадрів та тут тільки хардкор ))

хз чесно що простіше коли вмієш, та мабуть візулаьно простіше GIMP бо це графічинй інтерфейс, якщо є фотошоп то все це не потрібно, мабуть )) ціль була в створенні гіфки. може і в олнлайн фотошопі це можна зробити та о другій ночі до мене ця ідея не прийшла.
Другий варіант Image magick це створення гіфки через консоль . він р, cmd, і він перед вами.
кому що зручніше. простій людині краще і зручніше GIMP ну або фотошоп )

Варіант GIMP відкрваємо программу , файл, відкрити як шари Контрл + Альт + англ О , відкриваємо ту папку і не пам”ятаю чи треба обводити чи просто папку і мають завантажитися всі кадри (нижній внизу , останній вгорі) .
Експортувати як…
Обираєте назву наприклад animation.gif тиснемо експортувати
Далі буде ще одне вікно там вказуемо що це анімація ( чекбокс) , затримка , у мене 50 мілісекунд, усунення кадру якщо не зазначено обираємо “один кадр на шар(заміна)”, чекбокс виконана раніше затримка для всіх кадрів і тиснемо Експорт. після деякого часу ви отримуєте гіфку )

Варіант Image magick.

Після встановлення відкриваємо термінал , переходимо в потрібну дерикторію командою , у мене це

cd /d E:\процент

через велику кількість кадрів у мене не створювалася гіф і довелося просити чат гпт створити тхт файл з назвами “кадрів” по типу 0001.png

0002.png

0003.png

0004.png

0005.png

0006.png

0007.png

…

0200.png

потім запускаємо командою все це діло

magick  -dispose previous -delay 5 -loop 0 @filelist.txt output.gif

• magick: Використовується для запуску програми ImageMagick.

• -dispose previous: Вказує, що попередній кадр повинен бути видалений перед відображенням наступного кадру, щоб уникнути накладання кадрів.

• -delay 5: Встановлює затримку в 5 сотих секунди (50 мілісекунд) між кадрами.

• -loop 0: Вказує, що анімація повинна повторюватися нескінченно.

• @filelist.txt: Вказує на файл, який містить список усіх зображень, які будуть використані для створення GIF.

• output.gif: Ім'я вихідного файлу GIF, який буде створено.

Перший варіант зручний одроразово, для потоку мабуть краще другий ) та вирішувати Вам що чи воно потрібно і чи це було для вас корисно. Як казав Дід Панас “Ось такі справи малята “))