Я большой поклонник фильмов Дж. Дж. Абрамса. Мне нравятся их напряженные сюжеты, остроумные диалоги и, конечно же, анаморфные блики линз (lens flares). Такие режиссеры, как Абрамс, используют lens flares, чтобы добавить в свои фильмы немного "доморощенного" реализма. Эту технику мы можем легко воссоздать в таких инструментах, как Photoshop, а затем добавить на наши сайты в виде растровых изображений.
Привет!
Сегодня с вами Максим Козлов, руководитель Sber AR/VR Lab.
Устраивайтесь поудобнее, зовите кота, включайте лампу — это будет длинная история. О цифровых двойниках, volumetric-съёмке и о том, чем это всё обернётся для нас уже в скором будущем.
Анимация — это переход элемента от одного состояния к другому. Пользователям нравится, когда на сайте что-то вращается, появляются новые элементы или происходит что-то неожиданное. Если на сайте много таких «вау-эффектов», он может стать вирусным или получить какую-нибудь премию, например, Awwwards.
Чаще всего дизайнер отрисовывает анимацию в специальной программе, например, After Effects, и присылает верстальщику видео, по которому нужно повторить анимацию. А вот как реализовать эту идею — решать разработчику. Он может использовать три вида анимаций: CSS-анимации, SVG-анимации или JavaScript-анимации.
Давайте разберёмся, что представляет собой каждый из видов, а ещё как создать и оптимизировать простую анимацию своими руками. И осторожно, под катом много гифок и видео.
Анимация на КПДВ: Дилан Баунманн, codepen.
Услышав слово “Аватар” многие до сих пор вспоминают фильм Джеймса Кэмерона 2009 года, популяризовавший технологию переноса человеческой мимики и движений на цифровую копию. Как получить полноценную виртуальную копию человека сегодня? Мы собрали 6 основных технологий виртуальных людей по степени реализма от мультяшек до гипер-реалистичного человека, который может смеяться, плакать, говорить и даже танцевать.
Разновидностей алгоритмов генерации "плазм" столько же, сколько, наверное, звезд на небе. Но связывает их вместе принцип плавного формирования перехода цветов.
Для бесшовного формирования цвета очень часто используются тригонометрические функции. Во-первых, потому что они периодические, т.е. через определенный промежуток значения функции повторяются, а во-вторых, они возвращают непрерывные значения, т.е. бесконечно малому приращению аргумента соответствует бесконечно малое приращение функции. Благодаря этому можно используя простые комбинации функций получать плавное возрастание и убывание цветов.
Я попробую рассмотреть один из вариантов, который использует функции синуса и косинуса.
Алгоритм, который рассмотрим сегодня, не имеет нормального названия. Иногда его называют "Shade Bobs", а вообще это один из многочисленных алгоритмов генерации "плазмы". Когда что-то на экране видоизменяется и переливается.
Из множества алгоритмов "плазм", представленный экземпляр самый элементарный.
Еще немного в копилку красивых эффектов и алгоритмов.
Вы в своей жизни наверняка видели салют, когда в ночном небе взрывает огненный шар и от него во все стороны медленно разлетаются огни.
Давайте попробуем проанализировать то, что мы с вами видим с точки зрения физики и программирования.
Рассмотрим алгоритм рисования простейшего пламени. Придуман он довольно давно и использовался в огромном количестве демо и игр.
В 1993 году на демопати Assembly, которая проходит в Финляндии, команда Future Crew презентовала свою новую работу «Second Reality».
(хороший разбор исходников этой демо можно найти здесь же на Хабре, по этой ссылке «Анализ кода демо Second Reality»)
Графические эффекты использованные в демо, в то время производили неизгладимое впечатление. Да и сегодня эту работу можно пересматривать с большим удовольствием. Под DosBox она запускается без каких-либо проблем. Именно это демо многие кодеры называли в качестве источника вдохновения для своих работ и толчком для них самих, чтобы начать заниматься компьютерной графикой.
Сегодня мы попробуем воспроизвести один из эффектов демонстрируемых в этом демо, а именно эффект плавающего туннеля.
В этой статье я покажу простой способ генерации видео программами на Python и C/C++ без использования стороннего API. Вам так же потребуется ffmpeg, без него вы не сможете конвертировать файлы в читаемые форматы!
Этой небольшой заметкой я хочу начать цикл статей посвященных алгоритмам компьютерной графики. Причем, не аппаратным тонкостям реализации этой самой графики, а именно алгоритмической составляющей.
Действовать буду по следующему принципу: беру какой-либо графический эффект (из демо, программы, игры – не важно) и пытаюсь реализовать этот же эффект максимально простым и понятным способом, разъясняя что, как и почему сделано именно так.
В качестве основы для вывода графики будет использован язык Python и библиотека PyGame. Этим набором можно очень просто что-то выдать на экран, сделать анимацию и т.п. не отвлекаясь на технические детали реализации.
Необычная анимация делает сайт интересным для изучения и наблюдения за ним. Пользователям нравятся стильные, гармоничные решения. Анимация позволяет разнообразить контент, оживить его.
Когда-нибудь наводили мышку или кликали на элемент, чтобы посмотреть на его преображение ещё раз? Для достижения такого "вау-эффекта" нужна оригинальная анимация. В сети есть целые страницы, наполненные примерами анимация для кнопок.
Другой пример для полёта фантазии, появление элементов на странице. Тут нам может пригодиться каскадная анимация. Можно конечно явить миру все элементы разом, это просто и вместе с тем скучно. Появление группы элементов друг за другом, смотрится гармонично и интересно. В качестве основы для появления элемента, можно использовать изменение прозрачности от 0 до 1, увеличение или уменьшение элемента, а также линейное движение в плоскости экрана.
В настоящее время существуют программы,позволяющие анимировать статические фотографии. Прежде всего, речь идёт об анимации лица и создании определённой мимики. Теоретически задача решается достаточно просто. Берём 3Д модель черепа и добавляем к ней основные лицевые мускулы. Фотография рассматривается как текстура, помещаем текстуру на 3Д модель и и проводим эксперименты с сокращениями определённых групп мышц. При реализации данной схемы возникает большое количество проблем. Одна из основных -- изменение текстуры при сокращении заданных мышц. Известны и удачные решения этой задачи, реализованные, в приложениях, ссылки на которые можно найти в Интернете. При этом существенно используются нейронные сети либо анимация осуществляется по определенным шаблонам. В данной статье рассматривается простейший случай, когда надо открыть рот на фотографии, сделанной анфас. Оказывается, что в этой ситуации достаточно обычной квадратичной интерполяции. Ссылка на ролик, где реализована данная схема помещена в конец статьи.
Всем привет. В последнее время я занимаюсь созданием простых анимационных роликов. Недавно столкнулся со следующей проблемой -- мой персонаж должен коснуться звонка перед входом в квартиру пальцем руки. Скелет руки представлен на Fig.1. Это трехзвенный механизм, имеющий шарнирное закрепление в точке O. Требуется, манипулируя углами α,β,γ, перевести точку A3 (эффектор) в точку E , если такое движение возможно. Данная задача имеет традиционное решение. Известны начальные значения углов. Решаем обратную задачу манипулятора, описанную в многочисленных статьях, и находим конечные значения углов α,β,γ. Каждый из интервалов между начальным и конечным значением угла разбивается на заданное число частей N . В результате получаем набор углов, с помощью которых получаем нужную траекторию движения руки. Поскольку для решения обратной задачи придётся решать нелинейные уравнения относительно углов, такой алгоритм не очень удобен. В книге Рик Парент "Компьютерная анимация" КУДИЦ-ОБРАЗ, М.:2004 предложено другое решение. К сожалению, изложение в упомянутой книге излишне абстрактно. В данной краткой статье представлена простая реализация алгоритма из этой книги. В конце статьи дана ссылка на ролик, в котором использован описанный метод.
Драфт этой статьи был написан почти два месяца назад. Затем я заболел ковидом, а потом долго восстанавливал свои когнитивные способности, изгоняя из себя древесину.
Предполагаю, что многие из нас видели фокусы. Волшебство. Когда хочется воскликнуть:
— Да как ты это сделал! Это же невозможно!
Давайте посмотрим, какие возможности предоставляет Houdini (софт назван в честь Гарри Гудини, да) для работы с разным количеством объектов/данных/точек. Где есть место фокусам. И как они могут помочь при работе с большими и тяжёлыми сценами. И не забываем, что наша конечная наша цель — визуальное представление этих данных.
Чем больше биологических объектов мы показываем, тем сложнее сцена. Один иммуноглобулин IgG – это 13 тысяч атомов. А если мы показываем вирус SARS-CoV-2, облепленный антителами и двигающийся по поверхности клетки, то это порядка 50 миллионов атомов.
Расшифрованные структуры всех белков (и не только), которые учёные хотят сделать общественным достоянием, передаются в глобальную базу — PDB (Protein Data Bank). И любой школьник/студент/аспирант/профессор/велосипедист может свободно использовать какую угодно структуру, ссылаясь на источник. Изумительный случай человеческого единства.
Данные хранятся в формате файла PDB/CIF. Это облако точек/атомов с координатами. Информации достаточно, чтобы описать структуру объекта в пространстве. Хотя данных там больше — есть информация о химических элементах, аминокислотах и прочем. Для нас сейчас важны только атомы и их координаты.
1 VDB (воксели/кубики)
Воксели позволяют представлять модель/точки в виде кубиков. Они могут быть больше или меньше. Воксели не используются в чистовом производстве, т.к. криволинейную поверхность (например, сферу) сложно представить кубами. Чтобы сгладить воксели их конвертируются в полигоны. Обратный процесс тоже возможен. Воксели занимают много места. При линейном увеличении размера объём вокселей увеличивается в кубической зависимости. Тогда зачем нам воксели?
Генерация текстуры с предписанными параметрами
Описание проблемы
В компьютерной графике принято понимать под текстурой любое изображение, применяемое в реализации сцены. В теории цифровой обработки изображений текстуры это случайные поля. В данной статье рассматриваются случайные поля и способы из описания. Случайное поле есть функция F(x,y), значениями которой являются случайные величины. Если предполагается использовать значения этой функции в качестве генератора текстуры, то на значения поля накладываются дополнительные ограничения:
Все случайные величины z поля имеют одно и то же распределение.
Ковариация между F(x0,y0) и F(x1,y1) зависит только от вектора, соединяющего точки ( x0,y0) и (x1,y1) . (стационарность)
Важность выполнения указанного свойства случайного поля вытекает из следующей гипотезы.
Восприятие случайного поля человеком зависит только от значений ковариаций.
Не существует математического (статистического) доказательства справедливости данной гипотезы, но в практических исследованиях она считается выполненной.
Проблема состоит в разработке метода, с помощью которого можно получить текстуру с предписанной ковариационной функцией. Такая задача возникает, например, при отладке программ распознавания объектов, существенной характеристикой которых является случайная текстура (лес, поле, водная поверхность). Ограниченное применение эти текстуры имеют в компьютерной графике. Соответствующая ссылка приведена в конце статьи.
Привет, друзья!
Хочу поделиться с вами примерами использования GSAP.
Что такое GSAP?
Если в двух словах, то GSAP (The GreenSock Animation Platform) — это набор инструментов для реализации анимации любого уровня сложности с помощью JavaScript.
Не припомню, чтобы в детстве я боялся клоунов. За все детство я побывал в цирке-шапито, может быть, два раза. Зато я определенно испытывал отвращение и настороженную злость к деду Морозу, поскольку примерно в семь лет прочел сказку Евгения Шварца «Два брата», а также был впечатлен завязкой фильма «Сказка странствий» (примерно 4.30 – 8.00). Много позже я стал понимать, что ощущение жуткой фальшивости деда Мороза было настоящим проявлением эффекта «зловещей долины». Этот эффект, получивший широкую известность в трактовке Масахиро Мори (род. 1927) в 1970 году, в дальнейшем стал предметом серьезных исследований и моделирования. В сегодняшней статье будет рассмотрено, как был обнаружен и как изучался этот феномен. Постараемся поговорить о нем с точки зрения психологии, распознавания образов и соотношения гармонии и уродства.
Статья написана в соавторстве с Екатериной Черских @MarkOcean, аспиранткой Санкт-Петербургского ФИЦ РАН.
История о том, как голливудские звезды помогли нам освоить западный рынок и выйти на него со своим стартапом.
