Иллюзия обмана: использование знаний об оптике и физике в работе художника

Влияние визуальных привычек, законов физики и физиологии зрения.

Мария Ярцева, ведущий художник в G5 Entertainment, на DevGAMM 2019 в Москве выступила с докладом, в котором рассказала о том, как в работе художника использовать знания о разнообразных оптических законах, иллюзиях, искажениях и так далее. С разрешения автора мы публикуем текстовую версию доклада.

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

За счёт чего объект выглядит убедительным — объёмным, материальным, текстурным? Логичный ответ — потому что он похож на настоящий. Логичный, но неполный. Когда зритель видит изображение кошки, он не бросается искать настоящую кошку и не сравнивает их тщательно. Человек сравнивает изображение (неосознанно, это происходит за доли секунды) с образом объекта, который есть у него в памяти.

Образ этот неточный, упрощённый и обобщённый — чтобы выяснить это на своем опыте, есть хорошее упражнение: попробуйте без взгляда на фото нарисовать какой-нибудь простой понятный повседневный объект — зажигалку, велосипед, аудиокассету (если кто-то помнит, как она выглядит, конечно). Неважно, насколько вы умеете рисовать — если то же самое вы сделаете, имея перед глазами референс, то есть изображаемый объект, то рисунок будет наполнен значительно большим количеством деталей и конструктивных особенностей.

Итак, у зрителя в голове есть некий усреднённый образ для сравнения. Кроме него, относящегося к конкретному объекту, у каждого человека есть общая насмотренность, которая помогает ему понимать, что вдалеке, а что вблизи, что объёмное, а что плоское. Это область, которую можно назвать визуальной рутиной: всю жизнь мы видим более далекие объекты меньшего размера, чем ближайшие к нам, и увидев такое на картинке, мозг подсознательно считает глубину пространства.

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

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

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

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

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

И самый смешной, зато близкий для всех тут пример — кнопка закрытия окна в правом верхнем углу. За несколько десятилетий пользования ПК мы настолько привыкли к ней именно там, что размещение её в левом нижнем углу заставит пользователя ощутимо помучиться и вызовет страшные неудобства. Скорее всего, на этом месте он приложение или игру закроет, чтобы никогда больше не открывать. Хотя все мы понимаем, что концепция крестика в правом верхнем углу абсолютно умозрительна и никакими законами природы не поддерживается, сила этой привычки невероятна.

Теперь немного более подробных примеров с картинками про то, как подобные вещи могут быть использованы в работе художника.

В качестве примера слева тут скрин из нашей игры Mahjong Journey, справа — скрин из Homescapes. Стрелочками я указала несколько мест, где для придания интерфейсу материальности (а UI совершенно умозрительная вещь на экране девайса) использованы приёмы, делающие его объёмным и «щупательным».

Например, это рефлексы снизу кнопок и модального окна, а также холодный градиент на обводке кнопки, уводящий зрительно её вдаль — так как наш мозг знает, что воздушная перспектива появляется на удалённых предметах. Это срабатывает, даже если используется в настолько стилизованных объектах, далёких от пейзажа.

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

Справа тень сделана с учётом нескольких простых правил, проистекающих из физики света: чем ближе к предмету, который тень отбрасывает, тем тень темнее; падающая тень от объекта начинается в том месте, где объект стыкуется с поверхностью; чем дальше от источника тени, тем тень прозрачнее и тем мягче её край.

Несмотря на то, что нарисовано всё это очень стилизованно, в правую тень мы всё равно верим, хотя бы до степени того, что она не раздражает взгляд.

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

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

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

Ещё одна хорошая уловка для подобных ракурсов — направление «укладки» детализации. Если положить камушки как бы вдоль осей изометрической сетки (что кажется на первый взгляд логичным) мы лишний раз подчеркнём нереальность этого пространства для зрителя. Это будет создавать у него лёгкое беспокойство на грани восприятия. Если положить камушки горизонтально, сплющив их близко к тому, как мы видим объекты при перспективных сокращениях каждый день, восприниматься это будет более естественно и приятно глазу.

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

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

Физика конструкции — это, скорее, комбинация возможности использования предмета пополам со здравым смыслом: если нарисованное ведро имеет вместо дна решето и ручку тяжелее, чем ёмкость, то далеко с таким ведром мы не уедем.

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

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

Продолжая тему света, пример взаимодействия цветного света с поверхностью объекта. Самый левый рисунок — шарик в условно-нейтральном свете, центральная картинка — часто встречающийся некорректный вариант цветного освещения. Если попробовать изобразить освещённость шарика тем, что цвет света просто накрасить поверх, то получится либо грязь, либо будто цветная пыль, либо ощущение, что объект покрасили краской.

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

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

Даже без подсказок очевидно, что изображён металл, точно не золото и не серебро, и металл этот — не полированный. Свойства металлов таковы, что у них очень тёмный собственный тон, и всё светлое на их поверхности, что мы видим — это отражение, так как металлы ещё и отражающий материал.

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

Это рисунок моей студентки и коллеги, который она создала в рамках личного проекта. Слева вариант до правок, а справа — после. К примеру, у стеклянного колпака лампы есть единственное место крепления — у горлышка. Учитывая, насколько хрупкое и одновременно тяжёлое это стекло, хочется чем-то ещё закрепить плафон.

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

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

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

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

На бедноте нашего оптического инструментария основан один из главных сюжетных твистов книги Питера Уоттса «Ложная слепота» — не зря это вынесено в название. Автор очень изящно задействовал вещь, которая называется саккады — чтобы не спойлерить, не буду раскрывать, что это и в чём было дело, можно погуглить просто.

В примерах тут и восприятие ритмического рисунка (от паттерна на простыне до заборов), и знакомый всем художникам принцип «детализация должна быть на стыках и гранях объекта», и восприятие изображения в целом, которое идёт по принципу «силуэт, он же пятно-цвет-детали и линии».

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

Например, обычный серый рядом с оранжевым покажется голубоватым, а рядом с синим — бежеватым. Наш мозг воспринимает комплексно то, что видят глаза, и из-за этого возникают такие эффекты «смешивания».

Последовательный контраст ещё интереснее — это эффект, когда при воздействии одного цвета меняется восприятие другого. Если долго смотреть на пятно красного цвета, а потом перевести взгляд на белый лист, то какое-то время будет видно пятно зелёного цвета — противоположного на цветовом круге.

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

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

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

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

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

Верхний забор максимально одинаковый и максимально скучный — люди стремятся по природе своей к созданию симметрии, и при этом смотреть на неё им скучно, вот такой парадокс. На нижней фотке — стойка в МакКафе: казалось бы, просто планки прибиты, но ритм их повторения такой сложный и с таким длинным шагом, то есть не каждые две-три штуки, а штук через 20, что глаз этого не улавливает с ходу. В итоге она и внимание притягивает, и не раздражает, и выглядит в три раза дороже, чем реально стоила в изготовлении. Очень крутой пример.

Задача художника, как главного иллюзиониста в этом чате, найти хорошие способы всех обмануть. Я часто слышу, что рисование — это что-то про вдохновение, призвание и вот это всё, но на деле, рисование — это про знания примерно обо всём.

Пока ты не знаешь, как что-то работает — ты это хорошо не нарисуешь. Пока не понимаешь, почему что-то работает именно так, не сможешь найти оптимальное решение задачи. Как же искать это понимание? Я вывела несколько советов, которые лично мне дали больше всего профита.

Разбирать привычные правила. Любое правило рисования, которому вас когда-то научили в художке, вроде «дальний план голубоватый», имеет объяснение. Очень полезно раскапывать такие вроде бы константы — вполне вероятно, что вы откроете более глубокое понимание вопроса вместо одномерной схемы.

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

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

Представлять использование изображённого объекта. Это касается объектов материального мира — одежды, домов, предметов быта. Попытайтесь представить, как вы живёте в этом, надеваете это, стреляете из этого и так далее — и сразу обнаружите массу странных недодумок, которые получились в рисунке. Чем лучше получается мысленно пользоваться объектом — тем больше верит в него зритель, пусть и не осознаёт этого.

Узнавать принципы работы графических редакторов. Это касается и 3D, и 2D, и анимации. Эти редакторы созданы людьми, и они в своей работе имитируют какие-то полезные вам, как художнику вещи. Например, occlusion пришёл в постоянное пользование 2D-художниками после того, как рендер в 3D-редакторах, которые имитировали с помощью этого алгоритма рассеянное освещение и объём предмета, был разобран любопытными на алгоритмы работы.

Физические законы тоже можно разобрать и свести к алгоритмам — но это по понятной причине намного сложнее. А здесь — уже работающее нечто, которое внутри имеет какое-то уравнение. Разберётесь, почему так красиво делает свечение режим наложения Linear Dodge в Photoshop, какой принцип его работы — и поймёте, как создать в принципе такой эффект, а также его причины.

#опыт #арт #основы #лонг