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

Серия статей о том, как стать художником по поверхностям.

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

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

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

Я попытаюсь охватить такие программы, как Windows Paint, Photoshop, Substance Painter и Substance Designer.

Mixer от Quixel вышел сравнительно недавно и не будет добавлен в статьи в виду экономии времени. В целом, его работа практически ничем не отличается от работы любого другого ПО для текстурирования — принципы и ядро у всех одинаковые, а мы именно в глубь ядра и будем заглядывать.

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

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

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

Итак, котятки, погнали =)

А что такое «Пиксель»?

Понятие «пиксель» используется в определении:

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

Поэтому, для начала разберём принцип работы пикселя на мониторе.

Важно:описание работы пикселей ниже является абстрактным и не описывает реальные физические явления работы ЖК-мониторов.

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

Ещё раз повторим. Цвет пикселя определяется тремя световыми элементами — красным, зелёным и синим. В зависимости от их силы свечения получается сам цвет. Это важно.

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

Соответственно, если мы уменьшим интенсивность зелёного и синего элементов до 0, то получим исключительно яркий красный цвет:

Теперь мы видим, что интенсивность яркости пиксельных элементов имеет границы. Эти границы я называю «диапазоном интенсивности».

Диапазон интенсивности — это диапазон состояния элемента от его минимального состояния (отсутствия свечения полностью) до его максимального состояния (максимальная яркость свечения).

Диапазон интенсивности можно выразить в различных значениях:

В статьях я буду использовать последний вариант представления диапазона от 0 до 1, так как он удобен для расчётов, в чём мы в дальнейшем убедимся. Этот диапазон можно назвать нормализованным диапазоном.

Теперь добавим к нашей шкале диапазоны интенсивности и получим следующую картинку.

Сейчас мы видим, что интенсивность R = 1, интенсивность G = 0.55-0.60, а B = 0. В итоге мы получаем примерно оранжевый цвет, который выдают нам на мониторах пиксели.

Важно понимать, что у каждого монитора, в зависимости от производителя матрицы, сборки и каких-то дополнительных параметров, сам уровень яркости может разниться. Например, диапазон яркости пикселя у матриц мониторов (условно):

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

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

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

Итак, поняв, как выстраивается цвет в пикселях, мы понимаем, как формируется изображение на мониторе. А какой размер у пикселя? И почему размер важен?

Чем меньше пиксель физически в размерах, тем больше можно их засунуть в монитор. Однако само количество пикселей всегда ограничено разрешением экрана. Например, экран с разрешением 1920х1080 содержит в себе 2 073 600 пикселей.

Таким образом, в зависимости от диагонали монитора и разрешения экрана, пиксель на экране имеет свои размеры. Так, при диагонали монитора в 19 дюймов и разрешении 1920х1080 размер пикселя будет меньше, чем у монитора 24-х дюймов и таким же разрешением.

Чем меньше пиксель в своих размерах, тем больше их можно упаковать, и на одной и той же площади можно показать больше деталей и сделать картинку более качественно.

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

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

Данная картинка имеет разрешение 178х266 пикселей. То есть, картинка состоит из 47 348 пикселей и занимает на экране всего 2,2 процента пространства, если разрешение вашего монитора классическое — 1920х1080.

А так ли это? Действительно ли эта картинка занимает на вашем мониторе 47 348 физических пикселей? А если масштаб картинки уменьшить? При уменьшении и увеличении картинки число пикселей, из которых она состоит, не изменяется, а значит, пиксели в картинке явно подразумевают что-то другое, отличное от пикселей в мониторе. И да, и нет.

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

Когда компьютер хочет отобразить моего кота на вашем мониторе, он считывает каждый пиксель изображения поочередно и выводит их на монитор. При масштабе изображения 1 к 1 (1 пиксель изображения равен 1 пикселю монитора или, иначе говоря, масштаб равен 100%), размер изображения занимает точно такое же количество пикселей монитора, какое имеет сам.

Однако если мы увеличим картинку, то получится так, что один пиксель изображения будет занимать 4/9/16/25/36 (и так далее) мониторных пикселя:

Чтобы было ещё проще понять, что такое «пиксель» в изображении, обратимся к программной реализации этого объекта.

Пиксель в изображении для компьютера — это набор цифр. Он так же состоит из элементов, как и пиксель монитора, но уже с четырьмя элементами. Условно говоря, этот блок (кирпич, квадрат, точка, ничто) содержит в себе 32 бита. Эти 32 бита делятся на четыре элемента по восемь бит в каждом.

Элементы, из которых состоит пиксель, принято называть каналами.

Три канала отводятся на распределение интенсивности цветов красного (Red), зелёного (Green) и синего (Blue) (вспоминая, как работает пиксель в мониторе, сразу становится понятно, как эти значения влияют на цвет). Четвёртый канал отводится для прозрачности (сам канал называют Alfa). Ну вот мы и собрали все буковки вместе RGBA.

Иначе говоря, пиксель в изображении — это набор цифр, значения которых определяют то, как этот пиксель отобразить.

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

Любой элемент размером в 8 бит может содержать в себе только 256 значений. Поэтому все наши каналы ограничены диапазоном интенсивности от 0 до 255.

Иначе говоря. Если каналы, отвечающие за зелёный и синий буду равны 0, а красный будет равен 255 — то пиксель изображения будет максимально красным. Если значение зеленого поднять до 128 (что равно середине или 0,5), то пиксель будет оранжевым, как на примере с пикселями от монитора выше.

Или вот такой вот ещё пример.

Подведя мини-итог — у пикселя изображения есть три канала цвета (три значения), которые имеют свой диапазон интенсивности от 0 до 255. Регулируя интенсивность канала, можно получать различные оттенки цветов. Alfa-канал не всегда используется в изображениях. Например, в Windows Paint нельзя редактировать Alfa-каналы и сохранять их. Но Photoshop умеет и любит работать со всеми каналами и даже больше - умеет добавлять еще сверху (но это тонкости, которые сейчас нас не интересуют).

Так завелось, что для визуального отображения диапазона интенсивности начали использовать оттенки серого цвета.

С этого момента мы начнем пользоваться программой Adobe Photoshop, потому что у неё есть отличный способ визуализации составления цвета пикселя из трёх каналов.

В Photoshop можно переключаться на каждый канал отдельно и видеть, как в диапазоне от 0 до 1 белого цвета прыгает интенсивность каждого канала:

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

Например, оранжевое покрывало справа сверху на красном канале ярко-белое (интенсивность от 0,8 и выше), на зелёном канале средняя интенсивность (около 0,5), а на синем канале оно практически чёрное (интенсивность около 0). В совокупности получился оранжевый цвет.

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

При увеличении масштаба картинки, ПО просто красит кучку пикселей (например, 4 на 4) в одинаковый цвет (как будто это один пиксель), формируя ощущение приближения картинки и её пикселизацию. А вот при уменьшении масштаба картинки, когда на 1 реальный пиксель монитора начинает приходиться 2 и более пикселя изображения, ПО начинает усреднять цвета нескольких пикселей изображения, которые воюют за 1 пиксель монитора. И при увеличении и при уменьшении масштаба картинки ПО так или иначе использует свои алгоритмы обработки изображений.

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

И теперь постепенно мы подбираемся к самому интересному —маскам.

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

Напоминаем, что пиксель имеет четыре канала по 8 бит. Из них три канала отвечают за формирование цвета, а четвёртый — за прозрачность. Маска прозрачности — это четвёртый канал в пикселе, который указывает на то, как пиксель должен отображаться: полностью, иметь прозрачность или не отображаться вовсе (иметь прозрачность на 0).

То есть, этот канал имеет размер в 8 бит и имеет значения от 0 до 255. Где 0 — максимально прозрачный, а 255 — максимально НЕ прозрачный. Иначе говоря, если мы выкручиваем канал до 1, то пиксель отображается полностью и не пропускает через себя цвета подложки.

Я добавляю альфа-канал, как указано на изображении выше, и он сразу заливается чёрным. Сейчас, все значения в этом канале равны 0.

Далее я обозначил зону 100% видимости — выделил моего кота, прорисовав в канале альфа силуэт кота:

Теперь, если включить отображение всех трёх каналов и альфа-канала, то можно увидеть следующее.

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

Вот так выглядит экспортированное изображение в PNG формате со слоем прозрачности (на самом деле, это был Tiff, но роли это не играет никакой).

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

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

Ну и ссылка на след.часть здесь.

#опыт #графика