Как стать автором
Поиск
Написать публикацию
Обновить
7.4

Компьютерная анимация *

Мультипликация при помощи компьютера

Сначала показывать
Период
Уровень сложности

Взлёт и падение Flash, раздражающего плагина, сформировавшего современный веб

Время на прочтение15 мин
Количество просмотров33K

До 1996 года веб был статичным и скучным. Но случайное создание технологии Flash превратило его в какофонию шума и цвета, в противоречивый продукт, предвещающий появление современного веба




9 июня 2008 года, примерно через час после начала ежегодной презентации Apple на WWDC в Калифорнии, прорыв, которого ждал Роб Смол, появился из недр торта. На сцене присутствовал Стив Джобс, довольный собой больше, чем обычно. Сам Смол смотрел за трансляцией презентации из Лондона.

Торт размером со слона, украшенный аккуратными ягодками и увенчанный единственной зажжённой свечой, светился на экране слева от директора Apple. «Приближаясь к первому дню рождения iPhone, — говорил Джобс, повышая голос, — мы смогли вывести его на следующий уровень». Торт распался, и появился логотип. Аудитория покорно разразилась приветственными криками. «Сегодня, — выкрикнул Джобс, — мы представляем вам iPhone 3G!»

Создание забавных и привлекательных анимаций простыми функциями Spine (внутри тяжёлые gif)

Время на прочтение5 мин
Количество просмотров18K


(Прим. пер.: 1. Spine — это проприетарный кроссплатформенный пакет для создания двухмерных скелетных анимаций с поддержкой различных игровых тулкитов.
2. Осторожно, в посте есть около 38 МБ gif'ок, все они спрятаны под кат.)


Как создать плавное переключение или поворот спрайтов?


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

Я обычно использую следующий подход: маскирую момент поворота или переключения с помощью деформаций, например, добавляю эффект упругости к анимации в течение ключевых кадров (увеличивая и уменьшая масштаб спрайта), когда выполняется поворот ассета или переключается спрайт.
Читать дальше →

Как Уилл Смит помог нам выйти на рынок США и запустить стартап в Америке

Время на прочтение8 мин
Количество просмотров5.7K

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

Читать далее

Программа для physics-based анимации персонажей Cascadeur вышла в ранний доступ

Время на прочтение1 мин
Количество просмотров8.2K


Спустя 10 лет разработки и 2 года бета-тестирования Cascadeur, программа для создания физически корректной персонажной анимации, вышел в ранний доступ! Пользователям доступны 4 варианта подписки, один из которых — совершенно бесплатный.

Топ-5 бесплатных нейросетей для анимации картинок

Уровень сложностиПростой
Время на прочтение16 мин
Количество просмотров53K

Технологии развиваются настолько быстро, что не успеваешь моргнуть глазом, и вот уже глазами моргают статичные фотографии прошлого века. Да‑да, мы говорим об анимации изображений. Если ещё пару лет назад это казалось чем‑то «на грани фантасмагории», то сегодня это настолько въелось в нашу жизнь, что обычный пост с анимированным изображением уже не вызывает эффекта «ВАУ, как это сделали?». Картинки не только шевелятся, моргают и улыбаются — они живут своей жизнью и даже коллабятся с другими!

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

А чтобы сделать эксперимент интереснее, мы выбрали для испытаний культовых персонажей мировой истории. Что скажете, если Юлий Цезарь улыбнётся вам с экрана? Всё увидите сами — не переключайтесь!

Приятного Вам прочтения!

Читать далее

Как создать модель миньона с нуля: бесплатные уроки Blender для детей

Уровень сложностиПростой
Время на прочтение8 мин
Количество просмотров25K

Давайте прокачаем навыки в направлении трехмерного моделирования и вместе попробуем создать миньона в программе «Блендер», предназначенной для работы с 3D‑графикой. Сразу отметим, что без базовых представлений о Blender подготовленная нами инструкция покажется трудной. Но попробовать точно стоит. Ниже оставим подборку уроков для совсем новичков, можно начать с нее, а затем вернуться к этому туториалу. Уроки предназначены для подростков 13–14 лет и старше.

Создание 3Д‑моделей — распространенное направление: оно используется в киноиндустрии, рекламе, маркетинге и дизайне, а также в разработке игр и промышленности. Профессиональные моделлеры часто применяют инструменты среды Blender — бесплатного программного обеспечения, созданного специально для 3D‑моделирования. Это обусловлено расширенными возможностями платформы.

Если вы уже имеете опыт работы в моделировании или просто хочется попробовать свои силы и сделать первые шаги в создании 3D‑моделей в Blender, вам пригодится представленная инструкция. В ней мы собрали 10 уроков в виде текстовых гайдов, а также предусмотрели видеоролики на случай, если не получится разобраться без визуала. Мы создадим модель миньона, сделаем базовое текстурирование и добавим анимацию.

Читать далее

Красивая и познавательная анимация: случаи кругового движения и колебаний

Время на прочтение4 мин
Количество просмотров14K
Здравствуйте.

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



Для отрисовки я использовал javascript и canvas. Для каждого примера дана ссылка, где вы можете всё внимательно посмотреть. Можно заглядывать в исходный код, можно копировать себе — я не буду возражать. Материал вполне может пригодиться на занятиях и факультативах по физике, математике или информатике.

Итак, поехали.
Читать дальше →

Dead Cells: использование 3D-конвейера для 2D-анимации

Время на прочтение6 мин
Количество просмотров30K
image

Можно сказать, что девиз почти всех инди-разработчиков — это «Большие мечты при ограниченных ресурсах». Когда я начал работать над первой игрой Motion Twin для Steam Dead Cells, эта фраза стала и моим девизом.

Меня зовут Тома Вассёр, в течение целого года я был единственным художником Dead Cells. Я занимался дизайном и анимациями каждого аспекта игры. В одиночку мне пришлось создавать графический стиль, персонажей, монстров, анимации, спецэффекты (FX) и большинство фонов Dead Cells… Пока, к счастью, мне на помощь не пришёл мой злой брат-близнец Генель Массе. Количество художников Dead Cells удвоилось.

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

Анимационный граф состояний

Время на прочтение5 мин
Количество просмотров12K
Привет! Мы тут в Playrix решили сделать свой Unity3D. А там есть Animator. В этой статье я  расскажу, как мы сделали его у себя и как он работает.

Читать дальше →

Как сделать хорошую UI-анимацию отличной

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

Анимации, о которых пойдёт речь, демонстрируют связь различных состояний интерфейса, указывают на взаимодействие между общими элементами, присутствующими в разных состояниях, ненавязчиво привлекают внимание пользователей к тому, что они должны обязательно заметить. В ходе работы автор статьи следовал идеям из руководств Material Motion, Animation Principles и The UX in Motion Manifesto. Примеры были созданы с использованием InVision Studio. Загрузить файлы с исходным кодом этих примеров можно здесь.
Читать дальше →

Программирование SDF-анимаций Рика и Морти

Уровень сложностиСредний
Время на прочтение23 мин
Количество просмотров2K

Как насчёт того, чтобы сделать анимацию Рика из «Рика и Морти» в 240 строк кода? Никаких библиотек, никаких изображений.

Читать далее

Игра в танграм и её алгоритмический потенциал

Время на прочтение9 мин
Количество просмотров4.1K

Некоторое время назад я задумывался о том, возможно ли мышление без языка, только на уровне визуальных образов. В отличие от естественного языка, пиктографическая или геометрическая знаковая система в гораздо меньшей степени подвержена полисемии и ошибкам, связанным с неверной интерпретацией последовательности или контекста. Может ли быть, что визуальный язык окажется для некоторых машин/роботов более понятным, чем лингвистический? Размышляя об этом, я нашёл на Хабре статью уважаемого @FirstJohn в блоге компании FirstVDS «Семь дощечек мастерства на службе ML» от февраля 2023 года, рассказывающую об алгоритмическом применении танграма. Ниже я подробнее расскажу об этой игре, а также о том, как её сегодня пытаются применять в распознавании образов и при решении других задач, связанных с комбинаторикой. 

Читать далее

Улучшенная эвристика при квантовании цветовой палитры

Время на прочтение11 мин
Количество просмотров1.8K

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

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

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

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

Читать далее

Ближайшие события

Новая технология, позволившая CD Projekt Red создать реалистичную речь персонажей Cyberpunk 2077

Время на прочтение8 мин
Количество просмотров12K

Пиф Эдвардс: Меня зовут Пиф Эдвардс (Pif Edwards), я докторант Торонтского университета и сооснователь JALI Research. В этой презентации мы расскажем о том, как применили в Cyberpunk 2077 результаты своей статьи, опубликованной в 2016 году.

Крис Ландрет: Привет, меня зовут Крис Ландрет (Chris Landreth), я аниматор и разработчик ПО, а также один из основателей JALI Research Inc.

Матош Поплавски: Привет, меня зовут Матош Поплавски (Matosh Popławski), я ведущий технический директор по работе с персонажами в CD Project Red, приветствую вас в нашей презентации с SIGGraph.

После завершения работы над Witcher 3 у нас уже была довольно неплохая система синхронизации движения губ (lipsync). Мы задались вопросом: как можно сделать её лучше, как повысить качество, не тратя сотни часов на создание анимаций? Было решено, что липсинк Cyberpunk 2077 должен быть лучше, чем в Witcher 3; также мы хотели добавить управляемую мышцами систему эмоций. Эта система должна использоваться во всём открытом мире игры и в каждом персонаже. Кроме того, нам требовалась поддержка нескольких языков, а конкретно десяти.

Как создать билборд-текстуру растительности в Unreal Engine 4

Время на прочтение6 мин
Количество просмотров12K
В этой статье мы поговорим о том, как создать билборд-текстуру растительности в Unreal Engine 4. Такая растительность – это простой многократно размноженный четырехугольник, все копии которого всегда повернуты к камере. Я постараюсь привести доводы в пользу такого подхода, расскажу о потенциальных недостатках и отдельно затрону вопрос производительности.


Читать дальше →

От ASCII к ASIC: портируем donut.c на крошечный кремниевый срез

Время на прочтение10 мин
Количество просмотров1.9K

Прошло много лет с тех пор, как я написал donut.c, и всё это время я не раз задумывался, можно ли как-то упростить этот проект. Например, может быть, нашёлся бы способ очертить пончик лучами, дописав для этого немного кода. В октябре 2023 года я написал твит о совершенно внезапном просветлении, позволившем мне найти новый подход к этой проблеме — без привлечения памяти, без каких-либо синусов, косинусов, без квадратных корней, деления, строго говоря, даже без умножения. Всё нужное можно отобразить с помощью одних только сдвигов и сложений. Вот обновлённая версия на C.


Читать дальше →

Как делать простые анимированные онбординги в Lottie без After Effects

Уровень сложностиПростой
Время на прочтение6 мин
Количество просмотров8.5K

Привет! Меня зовут Михаил Мурзак, я продуктовый дизайнер в Ozon Seller (сайт и приложение продавца).

Время от времени мы делаем анимированные онбординги крупных фич в мобильном приложении и долгое время использовали для этих целей Adobe After Effects с плагином Bodymovin (для экспорта в Lottie), но каждый раз для меня это было мучением, поэтому я решил пересесть на официальный клиент Lottie и написал этот гайд для коллег.

Теперь, когда Adobe не продлевает лицензии, этот гайд стал ещё более актуальным, и я решил опубликовать его тут.

Читать далее

Как использовать прерывания в Unity Animator на полную

Время на прочтение5 мин
Количество просмотров26K


Вау-эффекта в играх можно достигнуть не только неожиданными механиками или плоттвистом, но и анимацией — в мобильных проектах на последнем часто делается особый акцент. Поэтому решил поделиться интересным переводом материала по Unity Animator. Внутри — про приоритетность переходов анимации и грамотное переключение между состояниями.
Читать дальше →

Разбираем алгоритмы компьютерной графики. Часть 2 — «Туннель из демо «Second Reality»»

Время на прочтение5 мин
Количество просмотров7.4K

В 1993 году на демопати Assembly, которая проходит в Финляндии, команда Future Crew презентовала свою новую работу «Second Reality».

(хороший разбор исходников этой демо можно найти здесь же на Хабре, по этой ссылке «Анализ кода демо Second Reality»)

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

Сегодня мы попробуем воспроизвести один из эффектов демонстрируемых в этом демо, а именно эффект плавающего туннеля.

Читать далее

Ротоскопирование унижает нейросети, или как технология древности поможет улучшить арт для вашей игры

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров4.1K

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

Читать далее