моушен блюр что это
Особенности моделирования света: Эффект «размытия» в движении (Motion Blur)
Что такое Motion blur?
Motion Blur в переводе с английского означает «эффект размытости изображения при воспроизведении сцен движения». Этот эффект вы можете наблюдать на фотографиях, на которых запечатлены движущиеся объекты. Этот эффект наиболее заметен, если фотография производилась с большой выдержкой или у фотографируемых объектов была большая скорость движения.
Почему это происходит?
Принцип работы фотоаппарата заключается в выдерживании светочувствительной пленки перед поступающим светом в течение очень короткого промежутка времени. Поступающий от сцены свет изменяет химический состав фотопленки таким образом, что на ней образуется точный «отпечаток» внешнего вида сцены. Процесс выдерживания называется экспозицией. Если во время экспозиции сцена меняется, то четкость «отпечатка» нарушается и появляется размытость.
Почему мы должны это учитывать?
За редкими исключениями вы можете найти примеры motion blur в любом фильме или телепрограмме. Однако очень вероятно, что вы даже не обратите внимания на этот эффект. Как и в случае со многими другими побочными эффектами фотографии, вы быстро заметите отсутствие привычных эффектов, в то время как их наличие просто дает вам ощущение реализма, хотя на сам эффект вы даже и не обращаете внимания.
Например, ставший столь популярным в последнее время эффект засвечивания линз (lens flare). В практике обычного фотографирования оператор всегда стремился уменьшить проявление этого побочного эффекта на фотоизображении, но с тех пор, как мы привыкли считать его атрибутом реализма, многие программисты стали имитировать его в своих программах. Подобная ситуация повторяется и с другими побочными эффектами — зернистость пленки, дрожание камеры, установленной на вертолете, эффекты фокусировки и многие др.
Взгляните на некоторые компьютерные анимации, в которых не применен эффект программный или аппаратный motion blur — движение в этом случае выглядит дерганным и очень нереалистичным. Вы также можете заметить этот эффект в случае с телевизионным обозрением спортивных событий. Обычная камера фиксирует 25 кадров в секунду. Специализированная, спортивная камера способна фиксировать до 1000 кадров в секунду. Тем не менее при телевещании в телесигнал вставляется только малая часть из этой последовательности, эффект motion blur заметно уменьшается, и при просмотре подобных роликов быстро движущийся объект мерцает.
Мы так привыкли к размазыванию изображения скоростных объектов на экране телевизора или в кино, что просмотр анимаций без этого эффекта вызывает чувство нереалистичности.
Четко отрисовываемое изображение в каждом кадре компьютерной анимации ведет к полному отсутствию эффекта motion blur, что, в свою очередь, приводит к потере реалистичности сцены. Поэтому без принятия специальных мер по имитации motion blur мы не сможем отобразить максимально правдоподобную сцену с движением объектов.
Более того, изображение с эффектом motion blur несет в себе несколько больше нужной для нашего мозга информации. Сравните два рисунка:
Это две совершенно одинаковых сцены, только одна отрендерена для случая, когда камера двигается вперед, а вторая — для движения камеры влево. Наверное, вы сразу поймете, где какой рисунок. 🙂 При просмотре анимации ваш мозг получает эту дополнительную информацию о размытости, смена кадров представляется плавной, и, как результат, мы получаем значительно более реалистичную имитацию движения.
Поподробнее…
Хорошо, тогда давайте для начала рассмотрим, как работает кинокамера.
На рисунке справа мы видим схематический рисунок процесса снятия на кинопленку неподвижного красного шарика. Кинокамера изображена в виде её основных частей: линз, затвора и самой пленки.
Затвор на рисунке изображен открытым, давая возможность свету от шарика свободно достигать поверхности пленки. Мы также видим, что на пленке уже имеются два отснятых кадра с одинаковой яркостью. Текущий кадр находится в процессе экспозиции, и к моменту закрытия затвора изображение на пленке достигнет яркости предыдущих кадров.
Как только затвор закроется, пленка продвинется немного вниз, готовя следующий участок поверхности к формированию очередного кадра. Этот процесс повторяется многократно в процессе всей киносъемки.
А теперь произведем съемку того же шарика, только теперь он будет быстро двигаться в направлении стрелки.
Затвор открывается, и пленка начинает регистрировать свет от движущегося шарика. Процесс очень напоминает предыдущий, но теперь изображение шарика на пленке будет терять четкость и выглядеть размытым. Это размытость движения, или motion blur.
Можно поспорить, что если вы рассмотрите один любой из сформированных кадров, вы с точностью определите, что шарик двигается горизонтально. И все потому, что изображение с эффектом motion blur несет больше информации, чем изображение без него.
Имитация эффекта Motion Blur на изображениях
1. Пространственный (spatial) anti-aliasing
В общем смысле аnti-aliasing — это специальная технология по снижению видимости побочных эффектов дискретного (цифрового) преобразования. Вариантов проявления этих побочных эффектов (aliasing) много, например: проявление ступенчатости на прямых, расположенных под углами, отличными от 90 градусов, появление паразитных муаров на изображениях формата JPEG и т.д. Все эти проявления возникают в местах резкой смены информационного наполнения потока данных (например, резкие цветовые и яркостные переходы) и объясняются недостаточной частотой дискретизации.
Вероятно, вы уже знакомы с одним их вариантов реализации anti-alising на изображениях — это super sampling. Super sampling подразумевает собой рендеринг изображения в несколько раз большего, чем нам необходимо, а затем уменьшения его до нужного нам размера при усреднении цветности групп близлежащих пикселей в один.
Мы рассмотрим процесс создания изображения с super sampling anti-aliasing, потому что процедура создания motion blur очень его напоминает.
Для примера создадим изображение кольца размерностью 50х50 пикселей.
Для начала нам необходимо изображение с бОльшим количеством пикселей
Создадим изображение размерностью 200 х 200 пикселей, что в 4 раза больше того, что мы хотим получить.
Поделим изображение
Теперь представим, что мы разрезаем изображение на мелкие кусочки. Так как это изображение в 4 раза больше, то размер маленького кусочка выберем 4 х 4 пикселя
Усреднение
Теперь для каждого маленького кусочка возьмем усредненное значение цветности находящихся в нем пикселей и заполним каждый кусочек соответствующим усредненным значением.
Уменьшение размера (Resize)
А теперь уменьшим полученное изображение до нужных нам размеров в 50 х 50 пикселей.
На полученном изображении (визуально) все переходы плавные, и мы едва ли сможем заметить ступенчатость изображения.
Motion blur или Temporal anti-aliasing (Переходное сглаживание)
Для получения motion blur нужно проделать операции, подобные описанным выше. Метод для сглаживания готовых изображений называется spatial anti-aliasing, что означает сглаживание всего изображения. А метод, применяемый для motion blur, называется temporal anti-aliasing, означающий сглаживание переходных процессов во времени.
Суть производимых операций остается одинаковой.
a. Создаем избыточное количество кадров
Подобно тому, как мы раньше делали более крупное изображение, здесь мы произведем большее количество кадров. Например, для финальной анимации длительностью в 4 секунды нам нужно 100 кадров. Поэтому мы первоначально создадим в 4 раза больше кадров для тех же 4 секунд анимации, т.е. 400. (просто произведем съемку с повышенной частотой 100 кадров в секунду)
б. Поделим анимацию
Просто разделим последовательную анимацию на группы по 4 кадра.
Внутри каждой группы кадров произведем смешивание кадров в один.
г. Составим новую анимацию из этих кадров
Все сделано. У нас останется ровно 100 кадров для 4 секунд просмотра. Как раз то, что нам нужно, но теперь на каждом кадре будет иметь место переходное сглаживание (motion blur).
Особенности программирования motion blur
Итак, вы готовы использовать motion blur в своем проекте. Насколько точно его моделировать? Ответ — все зависит от поставленных задач.
Осуществление полномасштабного motion blur в реальном времени — это очень трудная задача. Вы должны суметь в несколько раз увеличить скорость вывода на экран (framerate), и для подавляющего большинства приложений единственный способ достичь этого — это существенное снижение детализации. Во многих случаях это просто неприемлемо.
В некоторых компьютерных играх motion blur реализуется путем соединения текущего кадра с предыдущими таким образом, чтобы предыдущие кадры оставались видимыми в течение некоторого, короткого промежутка времени. Это не является motion blur в принципе, выглядит очень неуклюже и просто отнимает драгоценное процессорное время.
 |  |
| Корректная реализация motion blur | Неправильная реализация motion blur |
|---|
Если же вы подготавливаете анимацию заранее, и она не будет просчитываться в реальном игровом времени, тогда вам определенно стоит потратить некоторое время на реализацию motion blur в своем проекте. Это особенно важно, если вы визуализируете быстро перемещающиеся объекты. Однако, опять же, все зависит от тех целей, которых вы хотите достигнуть. Например, если вам жизненно необходимо иметь возможность делать четкие стоп- кадры из анимации, то вам, наверное, следует оказаться от применения motion blur; но в этом случае вы должны представлять, что сама анимация будет выглядеть несколько дергано, и у зрителя создастся впечатление мерцания.
Motion blur Demo
Вы можете загрузить себе на компьютер и просмотреть программу демонстрации эффекта motion blur отсюда: motion.zip.
Пример анимации с применением motion blur
Каждый кадр этой анимации был изготовлен при помощи Terragen
Spatial и Temporal anti-aliasing (motion blur) наложены с помощью Bitty
Окончательная анимация и объединение кадров в последовательность были произведены при помощи Bink!
Эффект Motion Blur с помощью SVG
Сегодня мы рассмотрим, как создать эффект motion blur и применить его к анимациям CSS с помощью SVG.
Посмотреть на GitHub
Демо (рус.)
Motion blur — это широко используемая технология в анимационном дизайне и анимации вообще, чтобы придать движению более мягкий и естественный вид.
Motion blur (произносится: моушн блёр) — размытие изображения при воспроизведении сцен движения или быстро движущихся объектов.
В этой статье мы рассмотрим, как можно воссоздать этот эффект для горизонтальных и вертикальных перемещений.
Внимание: Пожалуйста, имейте ввиду, что этот проект несет чрезвычайно экспериментальный характер и поддерживается лишь некоторыми современными браузерами. На данный момент Chrome показывает наилучшие результаты…
Чтобы применить эффект motion blur, нужно нанести размытие по горизонтали на объект в соответствии с его скоростью и направлением, для каждого кадра в отдельности.
Устанавливаем размытие
Так как стандартный фильтр размытия CSS не поддерживает размытие в определенном направлении, мы будем использовать фильтры SVG.
Для желаемого результата, мы будем использовать лишь фильтр feGaussianBlur.
Параметр stdDeviation используется для установки интенсивности размытия и может принимать два значение, одно для горизонтального, другое для вертикального размытия.
Применить фильтр к нужному элементу довольно просто:
Однако, нам необходимо изменять значение параметра для каждого кадра. Сделать это можно с помощью JS.
Для начала нам нужно выбрать и затем поместить фильтр в переменную, чтобы мы могли обратиться к нему позже. Так как jQuery не особо дружит с элементами SVG, мы будем использовать стандартные функции JS:
Изменять интенсивность нужно с помощью корректировки значений параметра stdDeviation. Например, размытие по горизонтали в 12px:
Так как данный фильтр поддерживает только размытия в двух направлениях, по оси X и по оси Y, то нужно планировать анимацию заранее.
Заметьте, что изменение значение фильтра касается всех объектов, с которыми он связан. Поэтому нам нужно создать новый элемент для каждого нового объекта, к которому мы хотим применить фильтр. Вот простой способ, как можно динамически создать эти фильтры:
Измеряем скорость
Теперь нам нужно рассчитать, как далеко объект переместился по сравнению с последним его положением. Это нужно сделать для каждого кадра. Способ реализации напрямую зависит от того, как все настроено, как выполнена анимация и т.д. В нашем уроке мы используем наиболее общий подход, который будет работать с большинством анимаций CSS.
Чтобы получить положение объекта, мы будем использовать функцию jQuery offset. Она возвращает координаты объекта относительно всего документа.
Чтобы проверять изменения для каждого кадра, будем использовать requestAnimationFrame.
И вот наш результат:
Это базовый подход для применения эффекта лишь к одному элементу. Под каждый случай нужно оптимизировать код в отдельности.
Ну вот и все! Примите во внимание, что данный эффект требует довольно-таки много памяти, поэтому не стоит применять его для больших объектов.
От переводчика. Со всеми пожеланиями и замечаниями по поводу перевода прошу обращаться ко мне в личку. Спасибо!
Что такое уменьшение размытости при движении? (ULMB, LightBoost, BenQ Blur Reduction, Ultra Low Motion Blur)
Некоторые игровые мониторы предлагают технологию уменьшения размытости изображения, которая может повысить четкость движения за счет стробирования задней подсветки.
Вы можете включить эту функцию в экранном меню монитора; вы найдете его под разными именами в зависимости от модели монитора, наиболее распространенными из них являются ULMB, ELMB, 1ms MPRT, DyAc, LightBoost и т.д.
Итак, у вас есть быстрый процессор, мощный графический процессор и игровой монитор с высокой частотой обновления, но вы не удовлетворены производительностью игрового процесса из-за заметных ореолов или слежения за быстро движущимися объектами на экране.
Что такое уменьшение размытости при движении?
Вы можете включить / выключить уменьшение размытости при движении в экранном меню игрового монитора. Различные модели мониторов имеют разные торговые марки этой технологии, в том числе:
Технология NVIDIA LightBoost устарела и доступна только на старых мониторах, тогда как ULMB присутствует только в некоторых игровых мониторах G-SYNC.
Когда следует использовать уменьшение размытости при движении?
Качество уменьшения размытости при движении будет зависеть от многих факторов, в том числе от вашей системы, монитора, видеоигры и настроек изображения/драйвера.
По правде говоря, включение стробирования подсветки не всегда делает игровой процесс более плавным.
Игры будут выглядеть лучше всего, когда ваша частота обновления больше или равна частоте кадров, чего может быть сложно достичь, поскольку большинство технологий уменьшения размытости движения не могут работать одновременно с FreeSync или G-SYNC.
Однако на большинстве мониторов технология не настроена должным образом, поскольку вы получаете много перекрестных помех (или двойных изображений) и/или выбросов пикселей, как в случае с ASUS VG259QM.
Следовательно, если вам нужна наилучшая четкость движения, вам нужно будет использовать только MBR, а если вы хотите устранить заикание и разрывы экрана с минимальным штрафом за задержку ввода, вам придется использовать FreeSync/G-SYNC.
Многие геймеры предпочитают использовать V-Sync для синхронизации частоты вертикального обновления монитора с частотой кадров графического процессора для достижения наилучших результатов при использовании стробирования подсветки, но это приводит к задержке ввода.
Чтобы уменьшить добавленную задержку ввода V-Sync, вы должны ограничить частоту кадров до максимальной частоты обновления, за вычетом 0,01 с использованием RTSS (Rivatuner Statistics Server).
Во-первых, вам нужно знать точную частичную частоту обновления вашего монитора.
Вы можете использовать этот веб-сайт, чтобы проверить вашу точную частоту обновления.
Обратите внимание, что этот метод работает, только если ваш графический процессор может поддерживать стабильную частоту кадров в секунду, близкую к вашей частоте обновления. Итак, если вы не можете поддерживать 144 кадра в секунду, уменьшите частоту обновления до 120 Гц.
Фактически, стробирование подсветки будет лучше всего работать при более низкой частоте обновления, чем максимальная частота обновления вашего монитора (стробирование 120 Гц на мониторе 144 Гц, стробирование 144 Гц на мониторе 240 Гц и т.д.).
Для некоторых методов стробирования подсветки будут доступны дополнительные настройки, такие как ULMB «Ширина импульса», которые позволяют вручную регулировать частоту стробирования подсветки.
Таким образом, вы можете найти наилучшее соотношение между тем, насколько яркость изображения принесена в жертву для повышения четкости движения.
Некоторые игровые мониторы могут оставаться довольно яркими даже при включенной MBR, в то время как другие становятся слишком тусклыми для комфортного игрового процесса.
К сожалению, производители мониторов обычно не указывают максимальную яркость дисплея при включенной MBR, поэтому вам придется полагаться на обзоры мониторов.
Наконец, обратите внимание, что при включении стробирования подсветки появляется мерцание экрана, невидимое для человеческого глаза. Тем не менее, очень чувствительные к нему люди могут испытывать головные боли после длительного использования.
Скорость отклика
Панели VA обычно имеют самую медленную скорость перехода пикселей от темных к ярким пикселям, поэтому даже если игровой монитор VA имеет высокую частоту обновления и уменьшение размытости движения, динамичные игры могут иметь заметное размытие движения в темных сценах.
Панели TN, с другой стороны, имеют быстрое время отклика, обычно около 1 мс ГТГ, поэтому они являются наиболее популярным выбором для конкурентоспособных геймеров.
Панели IPS находятся где-то посередине, когда дело доходит до времени перехода пикселей, хотя некоторые новые мониторы IPS и VA имеют такое же быстрое время отклика, как и некоторые модели TN!
Наконец, OLED-панели имеют даже более быстрое время отклика, чем TN-панели, поскольку они не используют подсветку для создания изображения; отдельные пиксели меняются мгновенно, что обеспечивает очень плавное движение.
К сожалению, игровые OLED-мониторы сейчас довольно редки и очень дороги.
Теперь производители мониторов могут иногда вводить в заблуждение только время отклика стробирования подсветки дисплея, то есть «1 мс MPRT» (время отклика движущегося изображения), не указывая время отклика пикселя GtG этого монитора, которое может составлять до
Так что не забудьте проверить время отклика MPRT и GtG в обзорах!
Сертификация, утвержденная Blur Busters
Игровые мониторы, имеющие сертификат Blur Busters Approved, тестируются и настраиваются Blur Busters и, таким образом, обеспечивают высокое качество работы технологии стробирования подсветки монитора. Сертификация указывает на следующее:
Многие люди сравнивают четкость движения ViewSonic XG270 со старыми (но золотыми) ЭЛТ-дисплеями, такими как Sony FW900, когда дисплей настроен на стробирование на частоте 120 Гц (а частота кадров в секунду ограничена и поддерживается на уровне 120 кадров в секунду).
Анимация и Motion blur в 3ds Max
Motion blur – это эффект размытия объекта, находящегося в движении. Размываться может как центральный объект, так и его окружение. В 3ds Max такой эффект создается достаточно просто. Для этого понадобится создать несложную анимацию и настроить камеру или рендер. В данной статье будет использоваться 3ds Max 2017 и Corona Renderer. Это важно знать, так как для других систем рендеринга или старый версий 3ds Max действия могут быть иными.
1. Анимация сцены
Простейшую анимацию можно сделать, используя стандартные настройки интерфейса. Для начала необходимо создать сцену, в которой будут происходит действия. В данном случае это машина, выезжающая из города.
В сцене заранее установлен источник света (CoronaSun) и камера (Phisical Camera) в месте съемки. Также машина установлена в начале дороги, по которой она поедет. Перед началом анимации, нужно подготовить объекты сцены.
1) Нужно создать связь между всеми частями машины. Для этого нужно выбрать инструмент Select and Link и с его помощью привязать колеса и фары к корпусу машины. Это необходимо для того, чтобы при движении машины все ее детали двигались вместе.
2) Создать путь движения с помощью Line. В статье сплайн объемный, но включать такое отображение не обязательно.
3) Выбрать объект (машина) и воспользоваться Animation – Constraints – Path Constraint. Протянуть образовавшуюся линию к сплайну (Line) и отпустить. После отжатия ЛКМ справа откроется меню Motion, в котором нужно будет начать галочку Follow. Если объект неправильно встал на линию, то его положение можно изменить в разделе Axis. Также можно попробовать изменить положение опорной точки (Pivot) в разделе Hierarchy. На этом подготовка данной сцены окончена.
Теперь можно переходить к самой анимации. Благодаря подготовке, объект будет двигать исключительно вдоль линии. Передвигая его инструментом Select and Move по любой из осей, он будет следовать по сплайну.
Все описанные выше действия нужны только для данного случая. В другой анимации они могут не пригодиться.
Анимация состоит из кадров, на которых находятся ключи. Ключи несут в себе информацию о положении объекта в конкретный момент времени. Для того, чтобы включить режим установки ключей, нужно нажать Auto Key или Set Key. Auto Key может автоматически устанавливать ключ на кадре, если объект изменит положение. Затем обязательно нужно выбрать объект, который анимируется. Здесь это машина. Далее необходимо:
1) Нажать кнопку «+», создав ключ с начальным положением объекта.
2) Переместить желтый ползунок на желаемый кадр.
3) Переместить объект в новую точку (конец линии) с помощью Select and Move.
4) Если включен Auto Key, ключ создастся автоматически. Если Set Key, то снова нажать «+».
Анимация готова. Ключи содержат информацию о перемещение объекта, его вращении, масштабировании и некоторых других параметрах. Чтобы просмотреть анимацию, можно двигать ползунок или нажимать кнопки проигрывателя.
2. Настройка камеры и рендера
Следующий важный момент – включения и настройка эффекта Motion Blur. Сделать это можно либо в настройках камеры, либо в настройках рендера. При этом использование одного способа исключает другой.
1) Настройка камеры.
Эффект Motion Blur можно настраивать в физической камере. Сначала нужно установить объект Physical Camera в точке съемки и выделить ее. Затем перейдите в раздел Modify – Physical Camera – Shutter. Параметр Type стоит установить 1/seconds. Также нужно установить галочку Enable Motion Blur. Чем ниже значение Duration, тем сильнее будет размытие. Настроив эти параметры, можно запускать рендеринг.
2) Настройка рендера
Для такого способа понадобится установить Standard Camera. Перед началом рендеринга зайдите в меню Render Setup – Camera – Motion Blur. Теперь нужно включить галочку Enable Geometry и, возможно, поменять Frame offset. После этих настроек можно начинать рендеринг. Но у этого способа есть недостаток. Чтобы усилить размытие, придется ускорять анимацию (уменьшать число кадров между ключами). В предыдущем способе внести изменение проще.
3) Размытие окружения
В предыдущих пунктах было объяснение, как сделать размытие одного конкретного движущегося объекта. Но как быть, если нужно размыть все объекты вокруг основного? Для этого можно анимировать саму камеру. Это можно сделать, использовав инструмент Select and Link на камеру и на фокусную точку (Target).
Если она будет двигаться вместе с объектом, то объект съемки будет воспринят статичным. Окружение при этом будет подвижным.
Для Physical Camera дополнительных настроек не нужно. При использовании Standard Camera настройка осуществляется аналогично указанному ваше. Единственное отличие – понадобится включить галочку Enable Camera в разделе Render Setup – Camera – Motion Blur.
Вот таким образом можно заставить предметы двигаться и добавить динамики в сцену. Но тут были показаны простейшие примеры эффекты размытия. Чтобы довести результат до идеала, понадобится потратить время на настройку каждой отдельной сцены. Поэтому полное понимание, как сделать Motion Blur правильно, придет только с практикой.