Помещаем объект в окружение. Изучаем свет и цвет

Самые важные факты о том, как вписать объект любого цвета в любое освещение.

Работа Михаил Оплева (EA, Blizzard, CBN, Sony, Supercell, Respawn)
Работа Михаил Оплева (EA, Blizzard, CBN, Sony, Supercell, Respawn)

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

Почему так происходит? Чтобы понять это, придется начать с основ.

Что такое цвет

Со времен Альберта Манселла цвет часто описывают при помощи таких параметров, как hue (оттенок), saturation (насыщенность) и value (тон).

Помещаем объект в окружение. Изучаем свет и цвет
  • Оттенок, цветовой тон (hue) — положение цвета на окружности (например, на цветовом круге), где красному, зеленому и синему присвоены определенные координаты. Другими словами, оттенок — это то, где располагается ваш сиреневый по отношению к красному и синему — насколько он теплый или холодный.
  • Насыщенность (saturation) — отвечает за количество цвета. 100% насыщенности даст самый чистый цвет, а 0% уйдет в шкалу серого.
  • Яркость, тон, светлота (value или brightness) — отвечает за наличие белого в цвете. При этом 0% яркости дает черный цвет, а при 100% яркости цвет будет максимально ярким.

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

Как работает цвет?

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

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

Поместим белый объект под зеленый свет. Что мы получим? Все тот же зеленый предмет. Так как локальный цвет объекта — белый, он содержит все цвета, включая зеленый, а значит, может отразить зеленые фотоны. Другим цветам взяться неоткуда, так как у нас действует все та же пара — зеленый + белый.

Белая сфера под зеленым светом.
Белая сфера под зеленым светом.

Выйдем за пределы «лаборатории». Свет солнца желтый, городские огни разноцветные, как и объекты вокруг. Как же понять, каким будет цвет предмета, когда он попадет в окружение? Запомним: если на объект попадает цветной свет, то он примет небольшое количество этого самого цвета. Или, другими словами, он отразит все «родственные» ему фотоны и поглотит все «чуждые». То есть зеленый объект под желтым светом станет немного салатовым, а желтый или персиковый — практически оранжевым.

Вы наверняка не раз замечали этот эффект в реальной жизни. Помните, какой становится кожа при свете костра или на закате? Это происходит все по той же причине — отражаясь, теплый свет «красит» ее в теплые и насыщенные тона. Условно говоря, оранжевый накладывается на оранжевый и превращается в супер-оранжевый.

Помещаем объект в окружение. Изучаем свет и цвет

Как быстро понять, как изменится цвет под влиянием света?

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

Помещаем объект в окружение. Изучаем свет и цвет

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

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

Как это выглядит?

Перед вами три обычных кубика. В примерах ниже мы направим на них лампы разного цвета.

Помещаем объект в окружение. Изучаем свет и цвет

Сценарий с синей лампой. Красный кубик теряет насыщенность, желтый ожидаемо превратится в зеленый, а синий становится еще синее — поднимется насыщенность.

Помещаем объект в окружение. Изучаем свет и цвет

Поместим эти же самые кубики — синий, красный и желтый — под желто-оранжевую лампу. Что мы видим?

Помещаем объект в окружение. Изучаем свет и цвет

Все цвета сдвинулись в сторону оранжевого: красный стал теплее, желтый получился практически оранжевым. Под влиянием комплементарного оранжевого синий кубик потерял насыщенность и стал почти черным.

Суммируем: чем ближе локальный цвет объекта к цвету источника света, тем выше насыщенность и наоборот. Кстати, это же справедливо и для тона: чем меньше света объект отражает, тем темнее он нам кажется.

Как определить цвет рефлексов?

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

Помещаем объект в окружение. Изучаем свет и цвет

Первая иллюстрация показывает объекты при привычном нам освещении. Она — наша отправная точка. Смотрим дальше.

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

На третьей картинке получился самый оранжевый рефлекс. Почему? Желтый свет лампы покрасил белую сферу в желтый, превратил и без того желтый кубик в оранжевый, а после еще и переотразился между двумя желто-оранжевыми объектами.

Где насыщенность выше всего?

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

Полезные упражнения

  • Чтобы понять, как это работает, можно нарисовать несколько объектов разного цвета рядом, в одной сцене. Посмотрим на пример такого упражнения от Сэма Нильсона (Disney, Sony Pictures Animation, Blizzard Entertainment и др). Попробуйте определить, какого цвета в этой работе «небо» и «солнце», по какой логике меняются цвета на объектах и на «полу», и почему на одних объектах рефлекс цветной, а на других — нет.
<a href="https://www.behance.net/gallery/10542005/Schoolism-Advanced-Lighting-with-Sam-Nielson" rel="nofollow noreferrer noopener" target="_blank">Работа</a> Justin Zielke
Работа Justin Zielke
  • Рисуйте с натуры. Так вы поймете, как вообще работает свет в природе. Самый простой и доступный всем вариант — поставить перед собой несколько предметов — например, яблоко, кружку и книжку — и нарисовать их при разном освещении: днем, при свете лампы накаливания, взять светильник с цветной лампочкой.
  • Нужно быстро проверить, как будет выглядеть тот или иной объект под разным светом? Воспользуйтесь 3D программами (к пр., бесплатным Blender) или купите приложение Color Constructor.

Дополнительные материалы.

Почитать:

Статья на Хабре о том, как работает цвет с упором на физику.

Еще советуем книгу Джеймса Гарни «Цвет и свет».

Посмотреть:

Tyler Edwin о локальном цвете и насыщенности:

Marco Bucci о том, как использовать цвет в работе:

Он же о цветовой гармонии

Продолжение следует. Текст написан специально для Smirnov School, онлайн-школы, где готовят концепт-художников, левел-артистов и 3D-моделеров для игр и анимации.

P.S. Не можешь вписать любые объекты в окружение с разным освещением? Хочешь, чтобы цвет и свет стали такими же инструментами в твоем арсенале, как ластик и перо? Приходи на курс к Михаилу Оплеву и научись думать, как фотон! Для читателей DTF у нас есть специальные скидки.

3030 показов
19K19K открытий
9 комментариев

Оп, в "Избранные". Большое спасибо за материал!

Ответить

Рады, что вам нравится! 

Ответить

Комментарий недоступен

Ответить

Отличный материал, но там есть пара речевых ошибок, исправьте пожалуйста)

Ответить

Не могли бы вы сказать, о каких конкретно ошибках идет речь) 

Ответить

Комментарий недоступен

Ответить

Ну в одном случае накладываешь рыжий, в другом синий, всё понятно

Ответить