Как стать автором
Обновить
2.35

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

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

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

Полное руководство по правильному использованию анимации в UX

Время на прочтение 9 мин
Количество просмотров 45K
Предлагаю вашему вниманию перевод очень крутой статьи по анимации интерфейса.
The ultimate guide to proper use of animation in UX автора Taras Skytskyi.



В настоящее время трудно впечатлить или даже удивить анимацией интерфейса. Она показывает взаимодействие между экранами, объясняет, как использовать приложение или просто направляет внимание пользователя. Изучая статьи об анимации, я узнал, что почти все они описывают только конкретные варианты использования или общие факты об анимации, но я не сталкивался с какой-либо статьей, где все правила, касающиеся анимации интерфейсов, были бы четко и практически описаны. Но, в этой статье я не буду писать ничего нового, я просто хочу собрать все основные принципы и правила в одном месте, так что другим дизайнерам, которые хотят запускать анимированные интерфейсы, не нужно было искать дополнительную информацию.
Читать дальше →
Всего голосов 41: ↑41 и ↓0 +41
Комментарии 31

Михаил Бессмельцев с коллегой разработал новые алгоритмы для векторизации графики

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

Слева направо: оригинал, оснащённое поле (frame field) и окончательный результат. На базе зашумлённого растрового изображение в оттенках серого вычисляется оснащённое поле, выровненное по линиям картинки. На острые углы типа X- и T-пересечений накладываются векторы по обоим направлениям. Затем из этого поля извлекается топология чертежа — и производится окончательная генерация векторных кривых

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

Первые алгоритмы векторизации изображений появились в начале 1990-х годов и
использовались в инструментах для редактирования векторной графики, таких как Adobe Illustrator (Live Trace), CorelDRAW (PowerTRACE) и Inkscape. Несмотря на их широкое внедрение в промышленности, эти алгоритмы до сих пор страдают от серьёзных недостатков и находятся в активной разработке. В нескольких индустриях, где векторизация крайне необходима, включая традиционную анимацию и инженерное проектирование, она часто выполняется вручную. Дизайнеры кропотливо обводят отсканированное изображение с помощью инструментов рисования.
Читать дальше →
Всего голосов 82: ↑80 и ↓2 +78
Комментарии 28

Создание персонажей в Blender и Unity

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

Визуально персонажи 3D-игр имитируются с помощью использования моделей, текстур и анимаций.

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

К счастью для разработчиков игр, сегодня большинство движков имеет систему, позволяющую многократно использовать анимации при условии совместимости скелетной иерархии. Такая система позволяет использовать одинаковые анимации для персонажей всех форм и размеров. В Unity эта система называется Mecanim. Она обеспечивает удобную настройку анимаций, смешивание между ними и перенос гуманоидных анимаций между моделями.

Возможность многократного применения анимаций позволяет использовать анимации из Asset store и с таких вебсайтов, как mixamo.com, для ваших собственных персонажей. Это экономит кучу времени!

В этом туториале вы узнаете, как подготовить гуманоидную модель в Blender и как перенести её в Unity. В частности, вы научитесь следующему:

  • Создавать арматуру (скелет) персонажа и выполнять её риггинг (привязку скелета к мешу)
  • Модифицировать персонаж добавлением аксессуаров и объектов
  • Экспортировать модель в FBX
  • Импортировать модели Blender
  • Создавать и настраивать гуманоидный аватар
  • Прикреплять к персонажу объекты
  • Анимировать гуманоида в Unity
Читать дальше →
Всего голосов 42: ↑41 и ↓1 +40
Комментарии 8

Оптимизация рендеринга сцены из диснеевского мультфильма «Моана». Части 4 и 5

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

У меня есть ветка pbrt, которую я использую для проверки новых идей, реализации интересных мыслей из научных статей и в целом для исследования всего того, что в результате обычно оказывается в новой редакции книги Physically Based Rendering. В отличие от pbrt-v3, который мы стремимся сохранять как можно ближе к описанной в книге системе, в этой ветке мы можем менять что угодно. Сегодня мы увидим, как более радикальные изменения системы позволят значительно снизить использование памяти в сцене с островом из диснеевского мультфильма «Моана».

Примечание по методологии: в предыдущих трёх постах вся статистика измерялась для WIP-версии (Work In Progress) сцены, с которой я работал до её выпуска. В этой статье мы перейдём на окончательную версию, которая немного сложнее.

При рендеринге последней островной сцены из «Моаны» для хранения описания сцены pbrt-v3 использовал 81 ГБ ОЗУ. На текущий момент pbrt-next использует 41 ГБ — примерно в два раза меньше. Для получения такого результата достаточно было небольших изменений, вылившихся в несколько сотен строк кода.
Читать дальше →
Всего голосов 43: ↑41 и ↓2 +39
Комментарии 1

Истории

Оптимизация рендеринга сцены из диснеевского мультфильма «Моана». Часть 3

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

Сегодня мы рассмотрим ещё два места, в которых pbrt тратит много времени при парсинге сцены из диснеевского мультфильма «Моана». Посмотрим, удастся ли и здесь улучшить производительность. На этом мы закончим с тем, что разумно делать в pbrt-v3. Ещё в одном посте я буду разбираться с тем, насколько далеко мы можем зайти, если откажемся от запрета на внесение изменений. При этом исходный код будет слишком отличаться от системы, описанной в книге Physically Based Rendering.

Оптимизация самого парсера


После улучшений производительности, внесённых в предыдущей статье, доля времени, проводимого в парсере pbrt, и так значимая с самого начала, естественным образом ещё больше увеличилась. В текущий момент на парсер при запуске тратится больше всего времени.

Я наконец-то собрался с силами и реализовал написанный вручную токенизатор и парсер для сцен pbrt. Формат файлов сцен pbrt парсить довольно просто: если не учитывать закавыченных строк, токены разделяются пробелами, а грамматика очень прямолинейна (никогда не возникает потребности заглядывать вперёд дальше, чем на один токен), но собственный парсер — это всё равно тысяча строк кода, которые нужно написать и отладить. Мне помогло то, что его можно было протестировать на множестве сцен; после исправления очевидных сбоев я продолжал работу, пока мне не удалось отрендерить в точности те же изображения, что и раньше: не должно возникать никаких различий в пикселях по причине замены парсера. На этом этапе я был абсолютно уверен, что всё сделано верно.
Читать дальше →
Всего голосов 37: ↑37 и ↓0 +37
Комментарии 0

Оптимизация рендеринга сцены из диснеевского мультфильма «Моана». Часть 2

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

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

Исследование времени выполнения я начал со встроенной статистики pbrt; в pbrt есть ручная настройка значительных выделений памяти для отслеживания использования памяти, а после завершения рендеринга выводится отчёт о выделении памяти. Вот, каким изначально был отчёт о выделении памяти для этой сцены:

Память
BVH-дерево 9,01 ГиБ
Кривые 1,44 ГиБ
MIP-текстуры 2,00 ГиБ
Меши треугольников 11,02 ГиБ


Что касается времени выполнения, то встроенная статистика оказалась краткой и выдала отчёт только о выделении памяти под известные объекты размером в 24 ГБ. top сообщил, что на самом деле использовано около 70 ГБ памяти, то есть в статистике не учтено 45 ГБ. Небольшие отклонения вполне объяснимы: распределителям динамической памяти требуется дополнительное место для регистрации использования ресурсов, часть теряется из-за фрагментации, и так далее. Но 45 ГБ? Здесь определённо скрывается что-то нехорошее.
Читать дальше →
Всего голосов 43: ↑43 и ↓0 +43
Комментарии 4

Оптимизация рендеринга сцены из диснеевского мультфильма «Моана». Часть 1

Время на прочтение 8 мин
Количество просмотров 19K
Walt Disney Animation Studios (WDAS) недавно сделала сообществу исследователей рендеринга неоценимый подарок, выпустив полное описание сцены для острова из мультфильма «Моана». Геометрия и текстуры для одного кадра занимают на диске более 70 ГБ. Это потрясающий пример той степени сложности, с которой сегодня приходится иметь дело системам рендеринга; никогда ранее исследователи и разработчики, занимающиеся рендерингом вне киностудий, не могли поработать с подобными реалистичными сценами.

Вот, как выглядит результат рендеринга сцены с помощью современного pbrt:


Остров из «Моаны», отрендеренный pbrt-v3 в разрешении 2048x858 с 256 сэмплами на пиксель. Общее время рендеринга на 12-ядерном/24-поточном инстансе Google Compute Engine с частотой 2 ГГц с последней версией pbrt-v3 составило 1 ч 44 мин 45 с.

Со стороны компании Disney это был огромный труд, ей пришлось извлечь сцену из собственного внутреннего формата и преобразовать в обычный; особое спасибо ей за время, потраченное на упаковку и подготовку этих данных для широкого использования. Я уверен, что их работа будет хорошо вознаграждена в будущем, потому что исследователи используют эту сцену, чтобы изучить проблемы эффективного рендеринга сцен такого уровня сложности.
Читать дальше →
Всего голосов 44: ↑44 и ↓0 +44
Комментарии 31

Дисней представила собственную систему анимации волос HairControl

Время на прочтение 3 мин
Количество просмотров 21K
Одна из самых сложных проблем современной 3D-анимации до сих пор заключается в такой, на первый взгляд, простой вещи, как отрисовка волос. На самом деле создание прически — это одна из наиболее сложных и трудоемких операций, которую можно себе вообразить. Анимационные и игровые студии уже достаточно давно научились использовать реальных актеров для снятия их движений и придания реалистичности действиям персонажей. То же касается и животного мира, когда речь идет о «звериных» анимационных фильмах, даже если персонажей делают антропоморфными (как, например, в «Зверополисе»). Но если анимация шерсти или коротких «полубокс» стрижек еще кое-как дается художникам, то с длинными женскими прическами все крайне и крайне неоднозначно. По этой причине многим студиям и проектам приходится отказываться от реализма в своих работах и использовать более простую, «мультяшную» рисовку.


Фото: Disney Research

Компания Дисней (с учетом ее имперских амбиций на рынке) с таким подходом мириться не хотела, поэтому несколько дней назад публике был представлен новый метод трекинга и управления поведением волос анимационных персонажей. При этом разработка применима как и для рынка анимационных фильмов, так и для рынка геймдева. Основное отличие новой системы от устоявшихся практик: отказ от создания сетки «локонов» и переход к динамической системе с «якорями». В своем релизе специалисты Дисней рассказывают о новой системе генерации волос, которая базируется на принципе взаимодействия с центром масс и опорных точек внутри локонов.
Всего голосов 49: ↑46 и ↓3 +43
Комментарии 43

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

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

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

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

Однако нехватка рабочих рук в нашем секторе является частой ситуацией, поэтому я расскажу, как мне удалось не сойти с ума, работая в одиночку всё это время (конечно же, если я ещё не умер и это всё не иллюзия).
Всего голосов 27: ↑26 и ↓1 +25
Комментарии 31

Применение правил тригонометрии для создания качественной анимации

Время на прочтение 12 мин
Количество просмотров 23K
Автор материала, перевод которого мы сегодня публикуем, Нэш Вэйл, говорит, что недавно он занимался исследованием лендинг-страниц. В ходе работы он наткнулся на один сайт. Это был отличный, полезный ресурс. Однако, в ходе работы с ним, Нэш заметил, нечто неприятное.

Неестественная анимация
Читать дальше →
Всего голосов 31: ↑24 и ↓7 +17
Комментарии 23

Как работает JS: анимация средствами CSS и JavaScript

Время на прочтение 12 мин
Количество просмотров 86K
[Советуем почитать] Другие 19 частей цикла
Часть 1: Обзор движка, механизмов времени выполнения, стека вызовов
Часть 2: О внутреннем устройстве V8 и оптимизации кода
Часть 3: Управление памятью, четыре вида утечек памяти и борьба с ними
Часть 4: Цикл событий, асинхронность и пять способов улучшения кода с помощью async / await
Часть 5: WebSocket и HTTP/2+SSE. Что выбрать?
Часть 6: Особенности и сфера применения WebAssembly
Часть 7: Веб-воркеры и пять сценариев их использования
Часть 8: Сервис-воркеры
Часть 9: Веб push-уведомления
Часть 10: Отслеживание изменений в DOM с помощью MutationObserver
Часть 11: Движки рендеринга веб-страниц и советы по оптимизации их производительности
Часть 12: Сетевая подсистема браузеров, оптимизация её производительности и безопасности
Часть 12: Сетевая подсистема браузеров, оптимизация её производительности и безопасности
Часть 13: Анимация средствами CSS и JavaScript
Часть 14: Как работает JS: абстрактные синтаксические деревья, парсинг и его оптимизация
Часть 15: Как работает JS: классы и наследование, транспиляция в Babel и TypeScript
Часть 16: Как работает JS: системы хранения данных
Часть 17: Как работает JS: технология Shadow DOM и веб-компоненты
Часть 18: Как работает JS: WebRTC и механизмы P2P-коммуникаций
Часть 19: Как работает JS: пользовательские элементы

Анимация — неотъемлемая часть современных веб-интерфейсов. От того, насколько она уместна, привлекательна и производительна, зависит немалая доля впечатлений пользователя от работы с сайтом или веб-приложением. Сегодня, в переводе тринадцатой части серии материалов, посвящённых особенностям JavaScript и связанных с ним технологий, мы поговорим об анимации, выполняемой средствами CSS и JS, а также обсудим подходы к её оптимизации.

Читать дальше →
Всего голосов 20: ↑20 и ↓0 +20
Комментарии 9

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

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

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

Dragon Bones: создание 2D персонажа и скелетная, mesh-анимация

Время на прочтение 5 мин
Количество просмотров 71K
Добрый день, читатель! В этой статье рассмотрим процесс разработки типичного персонажа нашей дебютной игры Kidarian Adventures. Я продемонстрирую свою привычную структуру работы, однако, заострю внимание на создании анимации в Dragon Bones, приложу пояснения и самописные видео-туториалы.

Всего голосов 19: ↑19 и ↓0 +19
Комментарии 12

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

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн
PG Bootcamp 2024
Дата 16 апреля
Время 09:30 – 21:00
Место
Минск Онлайн
EvaConf 2024
Дата 16 апреля
Время 11:00 – 16:00
Место
Москва Онлайн

Пользователь Reddit под ником DeepFakes научил нейросети создавать интимные ролики со звездами

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

Правило 34


Пользователь Reddit под ником DeepFakes научил нейросети создавать интимные ролики со звездами. Его жертвами уже стали: Эмма Уотсон, Мейси Уильямс, Скарлетт Йоханссон, Галь Гадот.

Для создавая подобных видео были использованы алгоритмы машинного обучения такие как TensorFlow, которые Google бесплатно предоставляет исследователям, аспирантам и всем, кто интересуется машинным обучением, а также материалы из открытого доступа.

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

image

Большой брат


Как инструменты Adobe, которые могут заставить людей говорить что-либо, и алгоритм Face2Face, который может подменять лица в режиме реального времени, этот новый тип поддельного видео показывает, что человечество находимся на грани, где легко создать правдоподобные видеоролики о том чего мы никогда не делали.

Читать дальше →
Всего голосов 56: ↑32 и ↓24 +8
Комментарии 63

Лекция Яндекса: Advanced UI, часть вторая

Время на прочтение 26 мин
Количество просмотров 11K
Это вторая часть лекции Дмитрия Свирихина — разработчика из команды мобильной Яндекс.Почты.

— Мы с вами продолжаем рассматривать типичные проблемы Android-разработчика и способы их решения. Мы уже рассмотрели, как решить проблему неконсистентности UI у нас в приложении, проблемы, которые могут возникнуть при взаимодействии с клавиатурой, и проблемы потери state, а также узнали, как мы можем эффективно применять кастомные view. Всю вторую часть мы посвятим ещё одной проблеме — она называется «недостаточная интерактивность». Посмотрим, как мы можем сделать наше приложение более интерактивным и понятным для пользователя.


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

Всего голосов 40: ↑37 и ↓3 +34
Комментарии 3

Театр и ИТ: Шекспиру и не снилось

Время на прочтение 9 мин
Количество просмотров 11K
Привычно читать о проникновении информационных технологий на производство, в финансы, логистику, ритейл и другие сферы. А что если соединить театр и ИТ?

Мне повезло участвовать в таком проекте и следовать не привычному ТЗ, а режиссерскому замыслу, который окончательно формировался на моих глазах. В Московском драматическом театре имени М. Н. Ермоловой мы устанавливали аудиовизуальное оборудование, и пару месяцев я был полноправным участником репетиций – следил за процессом из-за кулис и с балкона, где располагалось рабочее место инженера видеомонтажа, настраивал технику и вносил коррективы.



О наших экспериментах в области театрального искусства, о сложностях и победах я и расскажу. В этом посте также будет много фотографий: театр ведь зрелищное искусство. А для самых нетерпеливых сразу под катом выкладываю видеоспойлер. В этом видеоролике нет технических деталей (в отличие от поста), зато всего за три минуты вы узнаете о совместных проектах ЛАНИТ и Ермоловского театра.
Всего голосов 50: ↑46 и ↓4 +42
Комментарии 10

Иллюзия движения

Время на прочтение 17 мин
Количество просмотров 68K
История о чувстве зрения, восприятии кадров и частоты обновления, размытости движущегося объекта и телевизионных экранах.
(также см. перевод статьи того же автора «Иллюзия скорости» — прим. пер.)

Введение


Вы могли слышать термин кадры в секунду (FPS), и что 60 FPS — действительно хороший ориентир для любой анимации. Но большинство консольных игр идут на 30 FPS, а кинофильмы обычно записывают на 24 FPS, так зачем же нам стремиться к 60 FPS?

Кадры… в секунду?


Ранние времена кинопроизводства



Съёмки голливудского фильма 1950 года «Юлий Цезарь» с Чарлтоном Хестоном

Когда первые кинематографисты начали снимать кино, многие открытия делались не научным методом, а путём проб и ошибок. Первые камеры и проекторы управлялись вручную, а плёнка была очень дорогой — настолько дорогой, что при съёмке старались использовать наименьшую возможную частоту кадров, лишь бы сэкономить плёнку. Этот порог обычно находился между 16 и 24 FPS.
Читать дальше →
Всего голосов 89: ↑89 и ↓0 +89
Комментарии 51

Юзабилити карточки товара. Сценарий выгодный для бизнеса

Время на прочтение 4 мин
Количество просмотров 13K
Карточка товара

О чём пойдёт разговор?


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

Каков план действий?


Внешний вид компонентов не меняем, т.е. остаемся в рамках текущего UI. Но можно воздействовать на типографику: размер и плотность текста менять разрешается. Будем использовать Axure для создания максимально реальной картины. То есть в арсенале будут все доступные приемы интерактивного прототипирования: интерфейсная анимация, смена состояний, смена текста внутри меток, динамическое сокрытие/показ объектов и т.п. Каждый прием будет рассмотрен отдельно ниже. Разрешается немного манипулировать, чтобы призвать пользователя к нужным нам действиям, которые требуются бизнесу.
Читать дальше →
Всего голосов 16: ↑13 и ↓3 +10
Комментарии 9

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

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


Читать дальше →
Всего голосов 23: ↑23 и ↓0 +23
Комментарии 0

Преимущества интерактивного прототипирования

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


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

Так было раньше и это работало. Я сам прибегал к таким хитростям неоднократно. Однако, мир вокруг стремительно меняется. Современный продукт настолько сложен, что одна картинка не даст понимания и ответов на вопрос “Как это работает?”. Схематичное или wireframe прототипирование тоже постепенно угасает в закате, так как черно-белые линии и прямоугольники не дают клиенту полного понимания. Всё больше желающих сегодня видеть живой прототип, а не серию картинок…
Читать дальше →
Всего голосов 18: ↑17 и ↓1 +16
Комментарии 15

Вклад авторов