Бесшовные текстуры: в Paint.NET и вообще

Проблема "швов" текстуры появляется в том случае, когда требуется размножить текстуру на определённой поверхности по аналогии с мозаикой плиток. Это может быть поверхность 3D-модели, браша, а также просто фон Web-страницы. Объединяет все эти случаи то, что в них один и тот же "квадратик" текстуры многократно повторяется по горизонтали и вертикали. Каждая сторона "квадратика" соединяется со стороной прилежащего "квадратика".
Текстура может быть нарисована в "разомкнутом виде" - если её противоположные края не учитывают друг друга. То есть, рисунок не подогнан под размер текстуры и представляет собой как бы выпиленный (выломанный, вырезанный и т.п.) кусок материала. В этом случае места стыковки размноженной текстуры будут выделяться некрасивыми линиями ("швами").
Текстура может быть также "замкнутой", если её противоположные края представляют собой "половинки цельного узора". Рисунок, таким образом, подогнан под её размер. И в этом случае места стыковки размноженной текстуры выделяться не будут, поскольку это будут "узоры, сложенные из двух половинок".

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

Для ясности рассмотрим следующий пример (текстура взята с http://photoart.biz.ua; здесь и далее многие картинки уменьшены в целях экономии места):

обычная текстура:

при размножении появляются "швы":

доработанная бесшовная текстура:

при размножении картина плавная:

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

Примечание: конкретно, в данном случае Вы можете кое-где заметить остатки "швов" (из-за того, что картинки сделаны практически наспех). Тем не менее, в основном текстура стала бесшовной.

А теперь - хорошая новость: Вы, вероятно, находили в Интернете руководства по созданию бесшовных текстур. Могу поспорить, что большинство из них рассчитано на Adobe Photoshop и подобные "навороченные" редакторы.
А как же быть, если Вы работаете в бесплатном Paint.NET или другой простенькой программе? Несмотря на скромный набор доступных функций, есть простое решение!

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

Суть алгоритма: замещение прерывистых участков текстуры непрерывными.

Требуется: преобразовать текстуру, сохраняя большую часть рисунка в первоначальном виде. Итоговая текстура не должна образовывать "швы" при многократном повторении.

Условия:
- в наличии уже есть текстура, только образующая "швы" при размножении;
- текстура более-менее равномерная, т.е. отсутствуют большие или сильно контрастные "уникальные образования", рисунок в какой-то мере повторяется;
- не обязательно получать итоговую текстуру с точно таким же положением рисунка (всё равно ведь он будет повторяться).

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

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

3а) нас интересует центральная часть рисунка, размером с первоначальную текстуру (см. рисунок). Поэтому затирку достаточно сделать для "шовного креста" (см. рисунок) с небольшим запасом;

4) выбрать область, которая хорошо сочетается с узором в районе "швов". Это легко сделать, если текстура достаточно однородная;
5) аккуратно клонировать эту область, затирая рисунок на месте "швов", по возможности добиваясь, чтобы клонированные участки не выделялись на фоне остальной текстуры;

5а) при необходимости, выбирать другие области клонирования или продолжать клонирование на довольно обширном участке;
5б) по возможности, не делать "клон клона", т.е. не клонировать уже изменённые области рисунка;

6) если на рисунке не осталось "шовного креста", а также не заметны границы клонирования - основная работа закончена;
7) уменьшить площадь холста до исходного состояния (в 4 раза), выбрав центральное расположение результирующей картинки. От текущей картинки остаётся центральная часть - вот она и будет готовой текстурой. Остальное содержимое теряется, да оно и не нужно.

Результат: текстура сделана бесшовной.

Замечание: полученная текстура смещена наполовину по горизонтали и наполовину по вертикали относительно исходной. Это связано с особенностями алгоритма и, в принципе, не играет роли в большинстве случаев. Если требуется несмещённая текстура, повторите действия 1, 2, 3 и 7 (хотя особого смысла нет - см. далее).

Недостатки метода:

1) часть исходного рисунка теряется, или точнее, искажается. Этого нельзя исправить просто из-за сути алгоритма.

2) на текстуре останутся небольшие участки со "швами". Сначала шаги 2 и 3 автоматически сделали цельным узор на границе отсекаемой позже текстуры. Однако до момента отсечения мы перерисовываем исходную текстуру и снова нарушаем цельность узора в граничных точках ("шовные" места на рисунке ниже).
Это неизбежно, так как невозможно использовать замкнутое смещение текстуры (вот почему было сделано ударение на том, что часть рабочего полотна теряется). Как показывает практика, оставшиеся "микрошвы" изображения не обязательно заметны при размножении текстуры. Для уменьшения их размера также полезно делать клонируемые участки минимальными по размеру (и вообще, чтобы уменьшить искажение рисунка).

Тем не менее, при повторе пунктов 1, 2, 3 и 7 можно ухитриться сделать отсечку не по центру, а как показано на рисунке, тогда останется поправить всего два участка:

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

Бесшовная текстура в Paint.NET

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

В дальнейшем понадобится убирать выделение всего рисунка или некоторых участков. Это делается элементарно - активируя инструмент Выбор прямоугольной области:

А затем нажав п.к.м. где-либо за пределами рисунка.

Берём исходную текстуру и вырезаем из неё "квадратик" размером 512 на 512 пикселей:

Сохраним его в качестве начального образца на диске.

Теперь инструментом Выбор прямоугольной области выделяем всю текстуру: достаточно нажать л.к.м. вблизи любого угла за пределами рисунка и повести выделение по диагонали к противоположному углу (также за пределы рисунка). Копируем в буфер обмена выделение (соответствующей кнопкой на панели редактора, пунктом меню или Ctrl + C).
Заходим в меню и выбираем Изображение -> Размер полотна… - появится одноимённое окошко, в котором нужно выставить настройки следующим образом:

После нажатия OK получится следующая картина:

Три раза делаем вставку изображения (Ctrl + V), в каждом случае передвигая новый фрагмент л.к.м. в другой угол рисунка. Ориентироваться можно по координатам, которые выводятся внизу окна редактора в строке состояния (Верхний левый угол области). Чтобы фрагменты располагались "в стык", надо сдвигать их ровно на половину размера полотна. В нашем случае рабочее полотно составляет 1024 на 1024 (т.к. размер был увеличен в 2 раза). Начальный фрагмент располагается с (0;0) до (511; 511), остальные - с (512;0) до (1023;511), с (0;512) до (511;1023) и с (512;512) до (1023;1023). Если вдруг не удаётся точно выставить координату, просто увеличьте масштаб изображения. Не забудьте убрать выделение последнего фрагмента (чтобы не мешало).

У нас получилась размноженная 4 раза текстура, и сразу "вылезли швы":

Поэтому выбираем инструмент Клонирование:

Ставим какой-нибудь небольшой размер кисти, но который в то же время удобен для работы. Где-либо в районе центра рисунка выбираем образец (Ctrl + л.к.м.):

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

Как только Вы затрёте "шовный крест" (в центральной части полотна, размером примерно с исходную текстуру), основную работу можно считать законченной:

Теперь снова заходим в меню Изображение -> Размер полотна… и выставляем настройки следующим образом:

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

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

Обратите внимание, что стрелками показаны явные "швы", а кружками - области, в которых уже очень трудно (!) заметить "швы" . Зелёным контуром обозначена новая область отсечения.

Вот в этом случае у Вас получится абсолютно бесшовная текстура и соответствующий результат при размножении:

Но при этом текстура, естественно, искажается ещё немного по сравнению с первой обработкой.