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

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

Когда-нибудь наводили мышку или кликали на элемент, чтобы посмотреть на его преображение ещё раз? Для достижения такого "вау-эффекта" нужна оригинальная анимация. В сети есть целые страницы, наполненные примерами анимация для кнопок.

Другой пример для полёта фантазии, появление элементов на странице. Тут нам может пригодиться каскадная анимация. Можно конечно явить миру все элементы разом, это просто и вместе с тем скучно. Появление группы элементов друг за другом, смотрится гармонично и интересно. В качестве основы для появления элемента, можно использовать изменение прозрачности от 0 до 1, увеличение или уменьшение элемента, а также линейное движение в плоскости экрана.

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

Всем привет. В последнее время я занимаюсь созданием простых анимационных роликов. Недавно столкнулся со следующей проблемой -- мой персонаж должен коснуться звонка перед входом в квартиру пальцем руки. Скелет руки представлен на Fig.1. Это трехзвенный механизм, имеющий шарнирное закрепление в точке O. Требуется, манипулируя углами α,β,γ, перевести точку A₃ (эффектор) в точку E , если такое движение возможно. Данная задача имеет традиционное решение. Известны начальные значения углов. Решаем обратную задачу манипулятора, описанную в многочисленных статьях, и находим конечные значения углов α,β,γ. Каждый из интервалов между начальным и конечным значением угла разбивается на заданное число частей N . В результате получаем набор углов, с помощью которых получаем нужную траекторию движения руки. Поскольку для решения обратной задачи придётся решать нелинейные уравнения относительно углов, такой алгоритм не очень удобен. В книге Рик Парент "Компьютерная анимация" КУДИЦ-ОБРАЗ, М.:2004 предложено другое решение. К сожалению, изложение в упомянутой книге излишне абстрактно. В данной краткой статье представлена простая реализация алгоритма из этой книги. В конце статьи дана ссылка на ролик, в котором использован описанный метод.

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

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

— Да как ты это сделал! Это же невозможно!

Давайте посмотрим, какие возможности предоставляет Houdini (софт назван в честь Гарри Гудини, да) для работы с разным количеством объектов/данных/точек. Где есть место фокусам. И как они могут помочь при работе с большими и тяжёлыми сценами. И не забываем, что наша конечная наша цель — визуальное представление этих данных.

Чем больше биологических объектов мы показываем, тем сложнее сцена. Один иммуноглобулин IgG – это 13 тысяч атомов. А если мы показываем вирус SARS-CoV-2, облепленный антителами и двигающийся по поверхности клетки, то это порядка 50 миллионов атомов. 

Расшифрованные структуры всех белков (и не только), которые учёные хотят сделать общественным достоянием, передаются в глобальную базу — PDB (Protein Data Bank).  И любой школьник/студент/аспирант/профессор/велосипедист может свободно использовать какую угодно структуру, ссылаясь на источник. Изумительный случай человеческого единства. 

Данные хранятся в формате файла PDB/CIF. Это облако точек/атомов с координатами. Информации достаточно, чтобы описать структуру объекта в пространстве. Хотя данных там больше — есть информация о химических элементах, аминокислотах и прочем. Для нас сейчас важны только атомы и их координаты.

1 VDB (воксели/кубики)  

Воксели позволяют представлять модель/точки в виде кубиков. Они могут быть больше или меньше. Воксели не используются в чистовом производстве, т.к. криволинейную поверхность (например, сферу) сложно представить кубами. Чтобы сгладить воксели их конвертируются в полигоны. Обратный процесс тоже возможен. Воксели занимают много места. При линейном увеличении размера объём вокселей увеличивается в кубической зависимости. Тогда зачем нам воксели? 

Генерация текстуры с предписанными параметрами

Описание проблемы

В компьютерной графике принято понимать под текстурой любое изображение, применяемое в реализации сцены. В теории цифровой обработки изображений текстуры это случайные поля. В данной статье рассматриваются случайные поля и способы из описания. Случайное поле есть функция F(x,y), значениями которой являются случайные величины. Если предполагается использовать значения этой функции в качестве генератора текстуры, то на значения поля накладываются дополнительные ограничения:

Все случайные величины z поля имеют одно и то же распределение.

Ковариация между F(x₀,y₀) и F(x₁,y₁) зависит только от вектора, соединяющего точки ( x₀,y₀) и (x₁,y₁) . (стационарность)

Важность выполнения указанного свойства случайного поля вытекает из следующей гипотезы.

Восприятие случайного поля человеком зависит только от значений ковариаций.

Не существует математического (статистического) доказательства справедливости данной гипотезы, но в практических исследованиях она считается выполненной.

Проблема состоит в разработке метода, с помощью которого можно получить текстуру с предписанной ковариационной функцией. Такая задача возникает, например, при отладке программ распознавания объектов, существенной характеристикой которых является случайная текстура (лес, поле, водная поверхность). Ограниченное применение эти текстуры имеют в компьютерной графике. Соответствующая ссылка приведена в конце статьи.

Мы создали атомарную 3D модель вируса SARS-CoV-2. И хотим рассказать о нашем проекте.

Привет, друзья!

Хочу поделиться с вами примерами использования GSAP.

Репозиторий

Что такое GSAP?

Если в двух словах, то GSAP (The GreenSock Animation Platform) — это набор инструментов для реализации анимации любого уровня сложности с помощью JavaScript.

• Начало работы с GSAP

Не припомню, чтобы в детстве я боялся клоунов. За все детство я побывал в цирке-шапито, может быть, два раза. Зато я определенно испытывал отвращение и настороженную злость к деду Морозу,  поскольку примерно в семь лет прочел сказку Евгения Шварца «Два брата», а также был впечатлен завязкой фильма «Сказка странствий» (примерно 4.30 – 8.00). Много позже я стал понимать, что ощущение жуткой фальшивости деда Мороза было настоящим проявлением эффекта «зловещей долины». Этот эффект, получивший широкую известность в трактовке Масахиро Мори (род. 1927) в 1970 году, в дальнейшем стал предметом серьезных исследований и моделирования. В сегодняшней статье будет рассмотрено, как был обнаружен и как изучался этот феномен. Постараемся поговорить о нем с точки зрения психологии, распознавания образов и соотношения гармонии и уродства.

Статья написана в соавторстве с Екатериной Черских @MarkOcean, аспиранткой Санкт-Петербургского ФИЦ РАН.

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

Об эволюционистской концепции Ивана Ефремова я писал ранее. Удивительно, что идеи учёного и писателя о красоте как наивысшей целесообразности не сыскали должного внимания со стороны изобразительного искусства, где, казалось бы, самое место их воплощению. Отдельные попытки советского кинематографа отразить творчество Ивана Ефремова не выдерживают конкуренции с реализациями фантастических сюжетов, выполненных на Западе на современном технологическом уровне («Звёздные войны», анимационный сериал «Любовь, смерть и роботы», и т.д.). Целые молодёжные субкультуры возникают вокруг японских творений в стиле аниме. Тем досаднее на этом фоне выглядит соответствующий провал в сфере отечественной мультипликации и научной фантастики. Да и космос ныне – совсем не в моде… Однако, люди, мечтающие исправить положение, существуют, и вниманию читателя предлагается интервью как раз с таким коллективом единомышленников. Вячеслав и Александра Ильяевы работают над анимационным проектом по мотивам произведений Ивана Ефремова «Туманность Андромеды» и «Сердце Змеи». Изображение танцующей девушки, приведённое выше – созданный ими образ Тайны Дан, биохимика звездолёта Тантра.

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

Кадры из фильма-долгостроя, большие змеи и красивые девушки в комплекте. Крутая кондовая графика, пояснения, советы и хитрости рендера. Жуткая красота и красивая жуть. Ковёр! Кормим змей от фотографии до смонтированного результата.

Появилась возможность рассказать о том как мы создавали жидкость для TReload. Нам всего лишь нужно было залить уровни кислотой. Кислоты должно быть много, площади затопления огромные :) Один из финальных результатов:

Одним из неотъемлемых элементов игровых приложений, обеспечивающих красочный пользовательский опыт, является анимация. Основным компонентом Unity для анимации является "Mecanim", имеющий более привычное название "Аниматор". Это очень мощный инструмент, позволяющий управлять сложнейшими системами объектов, совместимый со скелетными анимациями, экспортируемыми из 3D-пакетов, с инструментами для работы с IK, смешивания анимаций или частичного их проигрывания. И как только ты уверишься в том, что пробовал в аниматоре все, будь уверен - на следующий день ты найдешь новую функцию, с которой не сталкивался ранее. И это будет та самая функция, которой тебе так не хватало. Но не всегда...

Пригодна ли Java (Scala) и ее библиотеки для задач вывода 3D и анимации? Я попробовал это выяснить на примере библиотеки org.fxyz3d и хотел бы поделиться самой программой и выводам по итогам ее запуска.

Привет читателям Хабра! 

Меня зовут Сергей Кузнецов, я руковожу отделом frontend-разработки в компании AGIMA. Сегодня мне бы хотелось поговорить про оптимизацию сайта в разрезе показателей Google PageSpeed.

Как мы пришли к SVGator.com

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

Наш путь начался с lottie, как с более популярного сервиса. Ключевой недостаток: встроенная api. Нам хотелось найти более прагматичное решение без интеграции, поэтому выбор пал на SVGator. В наши цели попадало закрытие микроанимаций элементов интерфейса, оформительские детали и т.п.

Что за зверь и какие задачи решает

SVGator.com — это web-платформа для создания svg-анимаций, то есть svg-файлов со встроенными анимациями, которые без каких-либо проблем интегрируются в html. Можно задать последовательную обработку таких анимаций. Возможен экспорт как js, так и чистым CSS. Возможности js немного шире, но разница не существенная.

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

•  Небольшие функциональные элементы интерфейса. Например, интерактивные состояния компонентов и вытекающая микроанимация

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

• Элементы дизайна. Например, иллюстрации

Ссылка на наш ролик

Это мой второй текст на Хабре. Он плавно вырос из первой статьи «Молекулярная биология и Houdini летом двадцатого».

Мы закончили наш новый (второй) ролик 12 апреля 2021 года, в День космонавтики. Дата получилась случайной — я очень хотел закончить работу в понедельник. Но это оказалось идеальное совпадение.  

Поехали!

Вот приблизительный диалог, который состоялся у нас с Валерией (молекулярный биолог) на старте проекта:

— А давайте сделаем английскую озвучку к нашему ролику про иммуноглобулин?

— А давайте.

— И заменим ротавирус на коронавирус. Они же очень похожи. 

— Да.

— Часть сцен нам даже не нужно будет переделывать. 

— Да.

— И перейдём с CPU-рендера на GPU. Откажемся от Blender в пользу DaVinchi Resolve. Тайминг у нас останется тот же — одна минута. Звук и вирус. Думаю, за пару месяцев мы всё закончим.

— Ага, наверное.