Създаване ефект на молив в SVG

Моят проект Dragons Abound създава карти във векторния графичен формат SVG. Векторната графика има много особености, като например зум без изкривявания и загуби, което е много удобно при създаването на карти. Векторната графика е добра и за създаване на ясни линии с мастилени контури:

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

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

Това са сериозни ограничения във векторната графика и затова в SVG са добавени специални възможности, позволяващи ефикасното изобразяване на подобни ефекти при текстурите. Аз използвах някои от тези функции на SVG, за да създам ефекта на линия от молив. Разбира се, има редица по-сложни решения за пресъздаването на разнообразни линии от молив. Но аз създадох един доста опростен и лесен филтър, който дава съвсем приемлив резултат.

Както обикновено, бих предпочел да взаимствам или да усъвършенствам някой вече готов филтър на някой по-талантлив от мен, но в този случай се оказа, че на практика няма почти никакви моливни филтри, които бих могъл да използват като вдъхновение. Може би има основателни причини за това. Ето защо трябваше да разчитам само на себе си.

Преди време писах за възможностите на Dragons Abound за създаването на много добри имитации на ръкописни черти и линии. Тогава разглеждах възможността за избягване показването на математически прави линии и създаването на черти с незначителни отклонения, които наистина сякаш са нарисувани от човешка ръка. В началото на тази статия е показан пример на илюстрация на планини. За едно изображение, което сякаш е направено с мастило, това е съвсем достатъчно, но това не е достатъчно за създаването на права или крива линия с молив – липсва текстурата на молива.

Нека се вгледаме в линиите с молив, показани по-горе и тези, показани малко по-долу:

Можем да видим, че има редица особености, по които се различават щрихите, направени от молив и мастилените линии, нарисувани от компютъра. Основната разлика е, че те имат текстура, образуваща се от взаимодействието на молива с хартията. Хартията има зърнистост и моливът оставя повече графит на високите части на зърната, като по-ниските части остават по-светли и дори бели. Върху груба хартия текстурата се вижда много ясно, докато картонът за рисуване има толкова малка зърнистост, че поти не създава текстура. Второ, линиите направени с молив са доста разплути. Това също до голяма степен е предизвикано от неравностите на хартията и от връхчето на молива. По този начин покрай края на линията остава различно количество графит.

Разбира се, има и други ефекти. Чертата направена с молив става по-тъмна в местата, където се пресича. Самите черти се различават според натиска оказан върху молива и е възможно тъмнината и дебелината на линията да се променят. Но тук ще се спра само върху пресъздаване на текстурата, образуваща се от неравностите на хартията.

И така, в самото начало подготвих обикновени сиви линии:

Нарисувах „ръкописни“ криви линии с дебелина 4, 2 и 1 пиксел. Това се наложи, понеже за съжаление SVG ефектите изглеждат по различен начин за линиите с различна дължина и ширина, и аз исках да видя какво точно ще се промени.

Основната възможност, предоставяна от SVG за добавяне на текстури, са филтрите. Филтрите се прилагат след като се рендира векторния ефект и промени външния вид на изображението. Обикновените филтри могат да извършват действия като промяна цвета на обекта, добавяне на цветен шум и т.н. Филтрите са доста объркана тема със сложен синтаксис и няма да се спирам подробно върху тяхното използване. Но ще обясня подробно какво точно направих аз. А в края на материала ще дам линк към Codepen с моя филтър, за да може всеки самостоятелно да експериментира с него.

Първо, ще опитам да променя краищата на тези криви линии по такъв начин, че те да не бъдат плавни, а да имат неравности, характерни за хартията с известна зърнистост. Това ще направя чрез преместване пикселите на тези линии. Елементът на филтъра, който извършва тази задача се нарича feDisplacementMap. И тъй като искаме да всеки пиксел да бъде преместен по случаен, но единен начин, то ще трябва да подадем към функцията feDisplacementMap случаен шум. За щастие в SVG има още една функция с име feTurbulence, специално предназначена за създаването на шум. По този начин можем да комбинираме тези две функции за да направим по-груби външните страни на линиите.

Големината и грубостта на линиите могат да бъдат контролирани чрез параметрите на изместване (displacement map) и чрез генерирания шум. За съжаление, изместването се задава в абсолютни единици, а не относително дебелината на линията. Подбирах най-различни параметри, като се опитвах да намеря нещо, което да е подходящо за всякакви ширини на тези криви линии, само че при увеличаване на мащаба се появява проблем:

Сега изместването е толкова голямо, че влияе на формата на линията, а не само на нейните краища отстрани. Този ефект се вижда още по-ясно при тънките линии. В този пример линията с ширина 4 пиксела изглежда доста грубо, а при линията с дебелина 2 пиксела вече се виждат изкривявания. Тоест, трябва да се избере значение, което не създава изкривявания при тънките линии.

След повторния подбор на параметрите ефектът след мащабирането изглежда по следния начин:

При този мащаб много грубите страни на линиите се превръщат в малки петънца. Това не е чак толкова неприятно и вече по нещо напомня направена с молив черта.

Ето как изглежда този ефект при рисуването на малки планини (ефектът е най-силен от лявата страна).

Не е съвсем ужасно, но очертанията имат резки артефакти, които изглеждат малко странно. А когато ефектът се приложи към тънките, разположени наблизо линии, те се струпват една върху друга и се сливат:

Пак да кажа, това не е чак толкова ужасно и сенките в тези планини, уж направени с молив, изглеждат доста убедително и ако търсите подобен ефект, това би трябвало да е достатъчно.

Да обърна внимание, че това решение добавя грапавост към контура на линията от молив, но не променя еднородния цвят на чертите. В самите линии, направени с помощта на молив, има собствена текстура, понеже графитът оставя неравномерни петънца върху хартията.

За да добавя текстура вътре в чертата, използвам SVG филтър, а след това комбинирам със случаен шум:

При увеличаване на мащаба се вижда, че вътрешната част на всяка от тези криви линии е запълнена с псевдографитна структура. Ето как изглежда това в стандартен мащаб:

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

При този мащаб картинката не е много добра. Забележете че този филтър намалява чернотата на линиите и това е естествен резултат от добавянето на белия шум. В известна степен този ефект може да се изглади чрез повишаване контраста на шума, за да може като компенсация някои части на щрихите да станат по-тъмни:

Но тъй като цветът на тези линии и така е доста тъмен, това в значителна степен разваля моливния ефект. Необходимо е да се подбере правилния баланс.

Очевидно е, че двата метода могат да бъдат комбинирани. При увеличаване резултатът вече изглежда доста добре:

От една черта, направена с молив може да се очакват грапави страни и вътрешна текстура. Но при стандартен мащаб нещата не са чак толкова добре:

При този мащаб се появяват неприятни и резки артефакти.

Хубав трик за подобряване на това изображение е добавянето на текстурата на хартията като фон:

По този начин окото възприема текстурата като еднородна в цялото изображение. Дори и на съвсем неявно ниво това помага окото да бъде излъгано и да се създаде убеждението, че текстурата на линиите е предизвикана от взаимодействието на молива с хартията.

Ето пример за използването на този филтър при създаването на карта с текстура на хартия:

Като цяло, съвсем не е зле, но при подробното изучаване на тази карта изглежда, че просто навсякъде са добавили шум. При 200% увеличение артефактите стават още по очевидни:

Друг начин за създаване на груба черта от молив е рисуването на една и съща линия няколко пъти с леко различаващи се отклонения и с известна непрозрачност. В центъра на чертата, там където се пресичат няколко от тези линии, плътността ще бъде по-висока, а отвън – по-ниска.

Най-общо казано, за реализацията на подобно решение с помощта на SVG филтрите е необходимо съвместното използване на feTurbulence и feDisplacementMap, за да се създаде необходимата леко разкривена черта от молив. За да се направи няколко пъти това и накрая да се комбинират всичките линии ще трябва да използваме комплекта от примитиви feBlend. Ако да кажем, смесим (blend) три линии, то ще трябва по съответния начин да увеличим тяхната прозрачност. Не съм сигурен как може да се изчисли това, но аз използвах кубичен корен от яркостта на линиите.

Получава се следния ефект (три линии с мащабиране):

Този подход има два недостатъка. Филтърът има фиксирано отклонение и оказва по-силно влияние на тънките линии, като в някои случаи се вижда, че в един участък чертата с дебелина един пиксел направо се е разделила на две. Второ, това е доста сложен филтър, създаващ три отделни отклонения, които след това се обединяват. А това може да бъде твърде бавно при сложни изображения, каквито се използват в картите на проекта Dragons Abound.

Ето как изглежда това при стандартен мащаб:

На мен това не ми изглежда много като черти от молив, но по този начин са премахнати резките артефакти от предишното решение.

Този подход може да бъде комбиниран с описания по-горе първи филтър с вътрешната текстура на чертата и със текстурата на хартия:

Ето как изглежда това, след като се приложи към моите малки планини:

Този филтър проявява тенденция по-добре да разпределя линиите в сравнение с първия филтър, като ги прави малко по-дебели, което всъщност е много близо до истината.

Ето пример на използване на този филтър на една от картите в проекта:

Той по-добре запазва тъмните линии в сравнение с първия филтър и ефектът е някак по-приятен. Ето какво става при увеличение от 200%:

Дори и при голямо увеличение този филтър не изявява резките артефакти на първия филтър. Видът на пресичащите се тънки линии (гората) е леко изкуствен, но по-широките черти, като например на реката, изглеждат много добре.

Качих и двата филтъра в Codepen, за да може всеки да ги пробва самостоятелно. Първият филтър е тук, а вторият – тук. Правете каквито искате експерименти и опитайте да ги подобрите. Ако получите нещо по-добро, моля да ми съобщите! Наистина много ми се иска да имам много добър моливен филтър.