Визуальный анализ и реализация фильтра «Человек-паук: Через вселенные»

OpenGL

Четыре года назад, когда просочилась новость о том, что Sony хочет снять новый фильм «Человек-паук», неоднократно упоминалось известное слово — «омолаживать», что переводится как «омолаживать». В то время, помимо «Человека-паука: Возвращение домой», было целых пять игровых фильмов «Человек-паук» производства Sony (Тоби Магуайр снялся в трилогии «Человек-паук», а Эндрю Гарретт Филд снялся в двух фильмах «Новый Человек-Паук»). Руководители Sony надеются вернуть франшизу к жизни с помощью анимационного фильма.

Для того, чтобы снять этот анимационный фильм, Sony нашла партнеров-режиссеров Фила Лорда и Кристофера Миллера, которые в то время были хорошо известны в индустрии такими работами, как серия «Вкусная еда» и «Лего-фильм». Требования двух режиссеров, у которых есть дикие идеи и различные призрачные идеи, таковы: я надеюсь, что эта анимация заставит зрителей почувствовать себя «как в комиксе». Они также были рады возможности использовать повествование в фильме, чего не мог сделать фильм с живыми актерами.

Когда я впервые увидел фильм "Человек-паук: Через вселенные", я был поражен инновационными визуальными динамическими эффектами в нем. Вопреки стремлению к естественной и плавной 3D-анимации в прошлом, "Человек-паук: Into the Spider-Verse» движется к комическому внешнему виду и ощущениям, превращая 3D-анимацию в 2D, а не в чистое 2D.

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


1. Инновационные точки визуального выражения

1. Один выстрел два моделирования 2D-анимации

Вскоре после входа в основной сюжет, я думаю, каждый, кто привык смотреть 3D-анимацию, почувствует себя немного неловко... «Этот фильм немного застрял?»

Да, это действительно карта. Это первое место в фильме, которое заставляет людей чувствовать себя немного «ненормальными», но это также и самая особенная часть фильма. Присмотритесь, и вы увидите, что только персонажи заикаются, а их окружение изменчиво, создавая тонкий контраст. По этому поводу некоторые пользователи сети в Zhihu дали нам ответ:

В фильмах обычно используется формат 24 кадра в секунду, а это означает, что если это нарисованная вручную 2D-анимация, она должна непрерывно рисовать 24 изображения в секунду, чтобы анимация в изображении была плавной, что обычно называется 1 кадром 1 в секунду. анимация.

Но некоторые люди обнаружили, что я рисую только 1-й, 3-й, 5-й, 7-й.... итого, только рисую 12 кадров, а затем останавливаю каждый кадр на 2 раза, зрители этого явно не заметят, но аниматор экономит половину времени рисования, которое обычно называют 1 кадром 2 в анимации, это поведение было придумано только для экономии средств. 3D-анимация обычно этого не делает, потому что после того, как аниматоры 3D-персонажей устанавливают ключевые кадры, промежуточные кадры генерируются автоматически, поэтому нет необходимости сохранять промежуточные кадры.

1 кадр 2 — традиционный метод 2D-анимации.Принуждение 3D-анимации к этому может заставить людей почувствовать текстурную иллюзию 2D-анимации, но в то же время Sony выбрала фоновую анимацию, анимацию объектива и другие анимации смещения, чтобы сохранить 1 кадр 1, чтобы сохранить уникальность 3D-анимации преимущество гладкости объектива.

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

2. Реставрация комической техники

В фильме мы можем увидеть множество приемов и эффектов, обычно используемых в американских комиксах. Например, нарисованные от руки звукоподражания, такие как взрыв БУМ, АААААА при прыжке со здания и THWIP при вращении; диалоговое окно, описывающее умственную деятельность, когда главный герой бежит и перед участием в битве; линия скорости, сигнальные подсказки для восприятия опасности и др. Они постоянно заставляют нас заново переживать, каково это читать комиксы. Вот как эти представления используются в кино:

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

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

Это фреска с изображением двух мужчин, убивающих гиен в гробнице Мереруки в Древнем Египте. Что примечательно, в пространстве между двумя иероглифами плавают иероглифы, которые при переводе говорят один из иероглифов другому: "Держись крепче!"

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

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

С 18 века стали популярными политические карикатуры, в них появилось большое количество диалогов. Карикатуристы того периода уже были хорошо знакомы с тем, как использовать диалоговые окна.Некоторые из них были похожи на упрощенные свитки, а некоторые были толстые и тонкие, как воздушные шары.Короче говоря, форма была очень близка к диалоговым окнам в современных комиксах. И эти диалоги уже могутОн содержит больше текста, который в определенной степени играет роль в передаче атмосферы..

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

Вернемся к нашим фильмам. Именно эти общие приемы и элементы в графических комиксах делают статичные комиксы «звучащими», и из-за этих приемов «Человек-паук: Параллельная вселенная» обогащает другие органы чувств аудитории на визуальном уровне по сравнению с обычными 3D-фильмами. Оглядываясь назад на предыдущую анимацию, даже если нет звука, мы можем точнее «услышать» происходящее нашими глазами.

3. Нет размытия в движении

Поскольку опыт чтения комиксов должен быть восстановлен, от некоторых методов, часто используемых в 3D-анимации, естественно, следует отказаться, например, от размытия в движении. Но с удалением размытия в движении ощущение плавности движения и скорости, которое обычно присутствует в 3D-анимации, становится очень неадекватным, и это решение часто оказывает прямое влияние на стиль фильма.

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

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

4. Рассеивание/Подсветка

На самом деле, мы можем видеть фототекстуру (светлое свечение), которая обычно создается стареющими или ранними линзами с экрана пленки, и некоторые эффекты дисперсии линз, которые на самом деле намеренно созданы киностудией.

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

Эффект дисперсии/подсветки здесь играет роль боке и размытия. Как отметил директор, плохая ситуация с полиграфией часто случалась в полиграфической промышленности в начале и середине 20-го века.В то время четырехцветная печать CMYK приводила к неправильной версии печати из-за ошибки версии. Такая неправильная версия будет доработана позже.Это тоже стало стилизованной обработкой.Режиссёр заметил это и применил к фильму.Это не только восстанавливает фактуру комикса в лучшую сторону,и находит отклик у зрителей,но и использует такую ​​дислокацию для создания визуальной глубины резкости, что делает фильм более многослойным и решает проблему, заключающуюся в том, что фильм кажется плоским после приближения к 2D.

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


2. Визуальные эффекты и реализация фильтров

Фильм не может дождаться, чтобы с самого начала показать свои инновации в форме исполнения, но если вы внимательно посмотрите, вы обнаружите, что эффекты, используемые в нем, не являются инновационными от 0 до 1, но команда аниматоров Sony применяет эти визуальные элементы к самый полный.

Поскольку работа связана с написанием кода OpenGL Shader для коротких видеофильтров и переходов, особое внимание я уделил спецэффектам в ролике, когда второй раз чистил ролик, и подумал о том, чего можно добиться с помощью Shader. Конечно, эффекты в фильме многократно корректируются и многократно обрабатываются дизайнером анимации, и это ни в коем случае не фрагмент кода, который можно идеально смоделировать. Это просто для того, чтобы обсудить реализуемость некоторых эффектов в фильме на уровне кода шейдера с технической точки зрения.

1. Полутона

Фильм в высокой степени восстанавливает впечатления от просмотра, которые должны быть у комиксов, а использование точек Бен-Дэя в рендеринге изображений заставляет нас почувствовать текстуру чтения бумажных комиксов. Разница между точками Ben-Day и HalfTone заключается в том, что точка Ben-Day всегда имеет одинаковый размер и распределение в определенной области, в то время как HalfTone может отображать размер и градиент в соответствии с цветовыми деталями изображения. Мы можем использовать фильтр HalfTone для создания похожей текстуры. Вот несколько скриншотов, чтобы показать это:

Научно-популярная точка Бен-Дая (точка Бен Дай), полное название «Точка Бен Дай», названная в честь иллюстратора и печатника Бенджамина Генри Дэя-младшего (сына издателя XIX века Бенджамина Генри Дэя), в книге «Технология печать и изготовление пластин были изобретены в 1879 году. Он создает желаемый эффект, размещая, измеряя или перекрывая маленькие цветные точки в соответствии с принципами цвета и оптической иллюзии. Например, широко расставленные пурпурные точки создают розовый цвет. Цветные комиксы были популярны в 1950-х и 1960-х годах, но полноцветные комиксы были дорогими, поэтому издатели комиксов использовали точку Бен-Дей в четырехцветной печати (голубой, пурпурный, желтый, черный). Она печатает тени и вторичные цвета. такие как зеленый, фиолетовый, оранжевый, телесные тона и т. д., из-за особенностей точки износа таким образом.Экономьте много чернил, продавцы комиксов могут получить более высокую прибыль, печатая комиксы на дешевой бумаге таким дешевым методом печати.

Позже этот метод в полной мере был использован в живописи и развит американским мастером поп-арта Роем Лихтенштейном (1923-1997). В середине 20-го века, когда абстрактная выразительная живопись была на пике своего развития, он и молодое поколение художников Нью-Йорка предложили новую форму фигуративной живописи — поп-арт, которая прославилась в 1960-х годах и стала главным пропагандистом движение американского модерна.Даже многие иностранные культуры, которые испытали влияние американского бизнеса, могут почувствовать шокирующую силу его работ. Картины или скульптуры Лихтенштейна цитируются из мультфильмов, предметов первой необходимости, рекламных объявлений и работ некоторых известных художников в истории искусства.В сочетании с характеристиками Бен Дайдиана они воспроизводят сильную коммерческую культуру и особенности того времени в американском обществе в то время.

Давайте посмотрим, как это реализовано. На языке шейдеров OpenGL, создав упорядоченный круговой шаблон, объединив значения цвета канала RGB изображения для получения полутонового шаблона изображения и выполнив «осветляющий» режим наложения изображения с исходным изображением, мы можем получаем то, что хотим.Текстура полутонов:

precision highp float;
uniform sampler2D inputImageTexture;
varying vec2 textureCoordinate;

vec2 center = vec2(.5, .5);
float angle = 1.57;
float scale = 1.;
vec2 tSize = vec2(1000., 563.); 

float blendLighten(float base, float blend) {
	return max(blend,base);
}

vec3 blendLighten(vec3 base, vec3 blend) {
	return vec3(blendLighten(base.r,blend.r),blendLighten(base.g,blend.g),blendLighten(base.b,blend.b));
}

vec3 blendLighten(vec3 base, vec3 blend, float opacity) {
	return (blendLighten(base, blend) * opacity + base * (1.0 - opacity));
}

float pattern() {
    float s = sin( angle ), c = cos( angle );
    vec2 tex = textureCoordinate * tSize - center;
    vec2 point = vec2( c * tex.x - s * tex.y, s * tex.x + c * tex.y ) * scale;
    return ( sin( point.x ) * sin( point.y ) ) * 4.0;
}

void main() {
    vec4 color = texture2D(inputImageTexture, textureCoordinate);
    float average = ( color.r + color.g + color.b ) / 3.0;
    vec4 halftone = vec4( vec3( average * 10.0 - 5.0 + pattern() ), color.a );
    gl_FragColor = color + vec4(.02)*halftone;
    gl_FragColor = vec4(blendLighten(color.rgb, halftone.rgb, .05), 1.);
}

Затем используйте режим наложения слоя «Осветление», чтобы смешать два изображения в пикселях:

Вот демо-версия веб-страницы. После нажатия на ссылку вы можете увидеть эффекты до и после с помощью переключателя фильтров в правом верхнем углу:Demo1

2. Эффект глюка

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

Sony Studio использовала метод слияния ручного рисунка + многослойного эффекта, чтобы представить эффект сбоя.Конечно, коду нелегко имитировать такой эффект.Если вы можете найти подходящее изображение маски, это может быть примерно смоделируйте это. Однако здесь мы показываем только обычный эффект сбоя на основе самого изображения (код имитирует эффект сбоя, выполняя смещения пикселей и цветовых каналов в зависимости от времени):

precision highp float; 
uniform sampler2D inputImageTexture;
uniform sampler2D inputImageTexture2;
varying vec2 textureCoordinate;
uniform float time;

float amount = 0.1;
float speed = 0.5;

float random1d(float n){
    return fract(sin(n) * 43758.5453);
}
float random2d(vec2 n) {
    return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
}
float randomRange (in vec2 seed, in float min, in float max) {
    return min + random2d(seed) * (max - min);
}
float insideRange(float v, float bottom, float top) {
    return step(bottom, v) - step(top, v);
}
float rand(vec2 co){
    return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
}

float blendDarken(float base, float blend) {
	return min(blend,base);
}

vec3 blendDarken(vec3 base, vec3 blend) {
	return vec3(blendDarken(base.r,blend.r),blendDarken(base.g,blend.g),blendDarken(base.b,blend.b));
}

vec3 blendDarken(vec3 base, vec3 blend, float opacity) {
	return (blendDarken(base, blend) * opacity + base * (1.0 - opacity));
}
void main() {
    vec2 uv = textureCoordinate;
    float sTime = floor(sin(time*0.0005) * speed * 6.0 * 24.0);
    vec3 inCol = texture2D(inputImageTexture, uv).rgb;
    vec3 outCol = inCol;
    float maxOffset = amount/4.0;
    vec2 uvOff;
    for (float i = 0.0; i < 10.0; i += 1.0) {
        if (i > 10.0 * amount) break;
        float sliceY = random2d(vec2(sTime + amount, 2345.0 + float(i)));
        float sliceH = random2d(vec2(sTime + amount, 9035.0 + float(i))) * 0.25;
        float hOffset = randomRange(vec2(sTime + amount, 9625.0 + float(i)), -maxOffset, maxOffset);
        uvOff = uv;
        uvOff.x += hOffset;
        vec2 uvOff = fract(uvOff);
        if (insideRange(uv.y, sliceY, fract(sliceY+sliceH)) == 1.0 ){
            outCol = texture2D(inputImageTexture, uvOff).rgb;
        }
    }
    float maxColOffset = amount/6.0;
    vec2 colOffset = vec2(randomRange(vec2(sTime + amount, 3545.0),-maxColOffset,maxColOffset), randomRange(vec2(sTime , 7205.0),-maxColOffset,maxColOffset));
    uvOff = fract(uv + colOffset);
    float rnd = random2d(vec2(sTime + amount, 9545.0));
    if (rnd < 0.33) {
        outCol.r = texture2D(inputImageTexture, uvOff).r;
    } else if (rnd < 0.66) {
        outCol.g = texture2D(inputImageTexture, uvOff).g;
    } else {
        outCol.b = texture2D(inputImageTexture, uvOff).b;
    }
    vec3 inCol2 = texture2D(inputImageTexture2, uv).rgb;
    vec3 finalColor = blendDarken(outCol, inCol2);
    gl_FragColor = vec4(finalColor, 1.0);
}

Точно так же вы можете увидеть эффекты до и после с помощью переключателя фильтров в правом верхнем углу демо:Demo2

3. RGB Shift/Split Разделение RGB

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

Реализация шейдера будет проще, чем два вышеописанных фильтра, это может быть достигнуто разделением трех цветов RGB изображения и смещением координат:

precision highp float;
uniform sampler2D inputImageTexture;
varying vec2 textureCoordinate;
uniform float time;

float amount = 0.01;
float angle = 0.;

void main() {
    vec2 offset = amount * vec2(cos(time*.001), sin(time*.001));
    vec4 cr = texture2D(inputImageTexture, textureCoordinate + offset);
    vec4 cga = texture2D(inputImageTexture, textureCoordinate);
    vec4 cb = texture2D(inputImageTexture, textureCoordinate - offset);
    gl_FragColor = vec4(cr.r, cga.g, cb.b, cga.a);
}

На следующих двух картинках сравниваются эффекты до и после:

Точно так же вы можете увидеть эффекты до и после с помощью переключателя фильтров в правом верхнем углу демо:Demo3

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

Когда я уже собирался заканчивать статью, то вспомнил про "омоложение", о котором Sony говорила в начале. Мы чувствуем, что история и стиль этого фильма полны элементов, которые сейчас понравятся молодежи.Можно сказать, что это крутая работа, но, увидев много информации, мы не можем не испытывать некоторые эмоции. , это очень круто На самом деле эффекты и стили элементов существовали в прошлом веке и имеют глубокие исторические следы.В каком-то смысле это больше похоже на ретро, ​​чем на более молодое воплощение. Из этого мы также расширили некоторые вопросы:

Некоторые говорят, что стиль — это реинкарнация, и с этой точки зрения так называемый «молодой стиль» или «устаревший стиль» кажется ложным утверждением. Другими словами, нет ли молодого или устаревшего стиля, есть только стиль, изношенный временем?

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


Ссылки по теме:

Категории