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

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

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

О чём эта серия уроков

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

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

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

  • Часть 1. Пиксельвы её читаете.
  • Часть 2. Маски и текстуры. Здесь.
  • Часть 3. PBR и материалы. Здесь.
  • Часть 4. Модели, нормали и развертка. Здесь.
  • Часть 5. Система материалов. Здесь.
  • Часть 6. Погружение в систему материалов. Здесь.

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

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

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

Оффтоп

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

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

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

Часть 1. Пиксель

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

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

  • физический элемент матрицы дисплея;
  • цветовая точка в цифровом изображении.

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

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

Пиксель и мониторы

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

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

Погасшие элементы пикселя образуют черный текст на белом фоне.
Погасшие элементы пикселя образуют черный текст на белом фоне.

Диапазон интенсивности и цвет пикселей

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

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

Выкрученные на максимум яркости элементы пикселя в сумме создают ощущение белого цвета
Выкрученные на максимум яркости элементы пикселя в сумме создают ощущение белого цвета

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

Присмотритесь к пикселям в квадрате — GB действительно потухли
Присмотритесь к пикселям в квадрате — GB действительно потухли

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

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

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

  • от 0% до 100%. То есть, элемент может светиться в пол силы, иначе говоря, на 50%;
  • от 0 до 6000 свечей. То есть, максимальная яркость элемента (100%) — 6000 свечей, а мощность на 75% будет равна соответственно 4500 свечам;
  • от 0 до 255. То есть, 30% в этом диапазоне будут равны 76,5;
  • от 0 до 1. То же самое, что 100%, только вместо 100 использовать 1 или 0.58 (58%). Это удобно для вычислений, что мы обязательно рассмотрим позже.

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

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

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

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

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

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

  • Samsung может быть 6000 свечей;
  • LG = 5800 свечей;
  • HP = 12000 свечей.

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

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

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

Разрешение экрана, размеры пикселей и цифры

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

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

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

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

Подытог

  • У нас есть представление, как формируется цвет пикселей на мониторе.
  • У нас есть представление о размерах пикселей, и что они могут изменяться в зависимости от самого монитора.
  • У нас есть представление, что при разрешении 1920х1080 на экранах телефона картинки будут смотреться детальнее и чётче, так как пиксели меньше размером.
  • И в целом, у нас есть понимание того, как формируется изображение на мониторе.

Пиксель в изображениях

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

Формирование цвета

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

Кот по имени Кот. Знакомьтесь
Кот по имени Кот. Знакомьтесь

Данная картинка имеет разрешение 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.

И так. Биты, RGBA, 32, 4 канала, 8 бит - немного каша, да?

Мы работаем с компьютером, поэтому должны понимать, что компьютер не понимает слова "красиво", "красный" или "интенсивный". Он понимает и думает только цифрами.

И думает не просто цифрами, а только двумя значениями 0 и 1. Причем, только либо 0 либо 1.

Так появляется БИТ - самое маленькое значение для компьютера, которое может быть либо 0, либо 1.

Как я писал выше, пиксель картинки состоит из 3 цветов + альфа данные.

Каждый их этих 4 составляющих называется каналом - красный канал, синий канал, и так далее.

Когда мы говорим, что один канал (например, Green) состоит из 8 бит, то это значит, что он буквально записывается в компьютере в виде 00110101 (цифры будут разные, это просто для примера).

А когда мы говорим, что один пиксель состоит из 32 бит, то он буквально записывается, как 00111100010101010111001101011010.

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

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

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

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

И снова компьютерная тема.

8 бит - это 01010111.

Не очень удобно читать такие значения и править их, правда? Удобнее, когда это что-то привычное. Например, обычные значения 45, или 26, или 255.

Так вот, чтобы не было сложностей с чтением цифр, было решено переводить биты в нормальные значения. Но количество комбинаций 0 и 1 в 8 битах ограничено, и оно равно 256 уникальных комбинаций.

Отсюда и ограничение к 256 значений, где 0 - это первое значение, а значит, самое максимальное - 255.


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

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

В этом изображении параметры оттенок, контраст и яркость на самом деле никак не влияют на формирование цвета. Это производные, которые высчитываются автоматически. Программа — Microsoft Paint
В этом изображении параметры оттенок, контраст и яркость на самом деле никак не влияют на формирование цвета. Это производные, которые высчитываются автоматически. Программа — Microsoft Paint

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

Переходим в Photoshop

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

  • Самый черный цвет = 0.
  • Самый белый цвет = 1 (или 255, если рассматривать шкалу от 0 до 255).

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

Так выглядит шкала интенсивности цвета в Photoshop
Так выглядит шкала интенсивности цвета в Photoshop
Кстати, настройкой интенсивности в Photoshop отвечает параметр Level (используемое обозначение диапазона 0 — 100). Где 65 можно расценивать, как 65% от интенсивности или 0,65
Кстати, настройкой интенсивности в Photoshop отвечает параметр Level (используемое обозначение диапазона 0 — 100). Где 65 можно расценивать, как 65% от интенсивности или 0,65

Помните, как на скриншоте настроек цвета в Paint я просил не обращать внимания на другие параметры? На самом деле, и в Photoshop можно не обращать внимания на другие параметры. Все управляется с помощью трёх каналов — RGB. Остальные значения здесь высчитываются исходя из значений RGB. Но ими можно воспользоваться, например, указывая интенсивность в параметре Level от 0 до 100, и тогда Photoshop за нас высчитает нужные значения для RGB.

В 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). Это позволило создать полупрозрачные пиксели, которые на этом изображении показывают, как плавно вокруг кота картинка переходит в прозрачность. А мы так же плавно подошли к следующей обширной теме — к маскам и первому уроку текстурирования.

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

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

172172
31 комментарий

Часть 2. Маски и текстуры. Статья готовится. Часть 3. PBR и материалы. Статья готовится. Часть 4. Модели, нормали и развертка. Статья готовится. Часть 5. Система материалов. Статья готовится. Часть 6. Без названия. Статья пишется.Статья дополняется...

8
Ответить

Ну а если серьёзно, то статья отличная, СПАСИБО БОЛЬШОЕ, вы большой молодец, побольше бы таких. Ждём выхода сиквелов!,)

5
Ответить

Красивый кiт. 

2
Ответить

Он ответил - Мввввррряяя, чо значит - спасибо =)

3
Ответить

Про PBR интересно, чем они от обычных материалов отличаются.

1
Ответить