Erstellen Sie einen Stifteffekt in SVG

Mein Spiel Dragons Abound erstellt Karten im SVG-Vektorgrafikformat. Vektorgrafiken verfügen über viele Funktionen (z. B. verlustfreier Zoom), die für Karten praktisch sind. Vektorgrafiken eignen sich auch gut zum Erstellen klarer Linien, z. B. Tintenkonturen:

Andererseits sind Vektorgrafiken nicht sehr gut darin, Texturen mit sich nicht wiederholenden kleinen Details zu erstellen. In Vektorgrafiken wird jedes gerenderte Element durch eine Beschreibung seiner Größe, Form, Position, Farbe usw. dargestellt. Um viele kleine, sich nicht wiederholende Details darzustellen, ist es notwendig, eine große Anzahl von Elementen zu beschreiben. Zum Beispiel für eine Bleistiftlinie

Zehntausende verschiedener Elemente werden benötigt. Tatsächlich wird jeder graue Punkt im Bild separat festgelegt. Andere Elemente wie verschwommene Bilder sind noch problematischer.

Dies ist eine ziemlich schwerwiegende Einschränkung von Vektorgrafiken. Daher wurden SVG Tricks hinzugefügt, mit denen Sie einige dieser Textureffekte effektiver reproduzieren können. Ich werde einige dieser SVG-Funktionen untersuchen, um einen Bleistiftlinieneffekt zu erzielen. Natürlich gibt es viel komplexere Lösungen, um Bleistiftlinien neu zu erstellen. Zu diesem Thema wurden ganze wissenschaftliche Artikel verfasst . Ich hoffe jedoch nur, einen ziemlich einfachen Filter zu erstellen, der ein akzeptables Ergebnis liefert.

Wie immer würde ich es vorziehen, einen Filter auszuleihen oder zu modifizieren, der von jemandem erstellt wurde, der talentierter ist als ich, aber in diesem Fall gab es einen erstaunlichen Mangel an Vektorstiftfiltern, die als Inspiration verwendet werden können. (Eine bedrohliche Warnmusik ertönt: Es kann Gründe dafür geben.) Daher kann ich mich in der Tat nur auf mich selbst verlassen.

Zuvor hatte ich schrieb über die Möglichkeiten Dragons Aboundum "handgeschriebene" Zeilen zu erstellen. Grundsätzlich habe ich dann die Möglichkeit in Betracht gezogen, mathematisch gerade Linien zu vermeiden und Linien mit geringfügigen Abweichungen zu erstellen, die näher an dem liegen, was von der Hand einer Person gezeichnet werden könnte. Zu Beginn des Artikels werden Beispiele für Bergillustrationen gezeigt. Um einen Tintenillustrationsstil zu erstellen, reicht dies aus, ist jedoch nicht zum Erstellen einer Bleistiftlinie geeignet, da ihm eine Bleistiftstruktur fehlt.

Wenn Sie sich die oben und unten gezeigten Bleistiftlinien ansehen:

Sie werden viele Merkmale bemerken, die Bleistiftstriche von Tintenlinien (oder von einem Computer gezeichneten Linien) unterscheiden. Der wichtigste Unterschied besteht darin, dass sie eine Textur haben, die sich aus der Interaktion des Stifts mit dem Papier ergibt. Das Papier ist körnig und der Bleistift hinterlässt normalerweise Graphit auf den hohen Teilen der Maserung, während die niedrigen Teile weiß bleiben. Auf grobem Papier ist die Textur deutlicher; Das Zeichnen von Pappe ist so fein, dass es fast keine Textur erzeugt. Zweitens sind die Ränder der Bleistiftlinien eher vage. Dies ist wiederum hauptsächlich auf die Unebenheiten des Papiers und der Spitze des Bleistifts zurückzuführen. Dies führt dazu, dass am Rand der Linie eine andere Menge Graphit verbleibt.

(Natürlich gibt es auch andere Effekte. Die Bleistiftspur überlappt sich selbst, sodass sie an den Schnittpunkten der Striche dunkler wird. Die Striche selbst variieren im Druck und dies kann die Dunkelheit des Strichs entlang seiner Länge verändern. In diesem Beitrag werde ich mich hauptsächlich auf die Rekonstruktion der Papierstruktur konzentrieren.)

Für Ich begann mit der Vorbereitung einfacher grauer Linien:

Ich habe "handgeschriebene" Linien mit einer Dicke von 4, 2 und 1 Pixel gezeichnet. Leider sehen SVG-Effekte normalerweise für Linien unterschiedlicher Länge unterschiedlich aus, daher wollte ich den Effekt auf verschiedene Größen vergleichen.

Die Hauptfunktion von SVG zum Hinzufügen von Textureffekten wird als Filter bezeichnet . Filter werden nach dem Rendern des Vektoreffekts angewendet und ändern sein Erscheinungsbild. Herkömmliche Filter können Aktionen ausführen, z. B. das Ändern der Farbe eines Objekts, das Hinzufügen von Rauschen usw. Filter sind ein ziemlich verwirrendes Thema mit komplexer Syntax, daher werde ich kein ausführliches Tutorial zu ihrer Verwendung geben, aber ich werde sie ausführlich genug erläutern, damit klar ist, was ich getan habe. Und am Ende des Beitrags werde ich einen Link zu Codepen mit einem Filter geben, damit Sie selbst damit experimentieren können.

Zunächst werde ich versuchen, die Kanten der Linien so zu ändern, dass sie nicht glatt sind, sondern Unregelmäßigkeiten aufweisen, die für die Körnung des Papiers charakteristisch sind. Ich werde dies tun, indem ich die Pixel der Linie verschiebe. Das Filterelement, das diese Aufgabe ausführt, heißt "feDisplacementMap". Es bewegt jedes Pixel basierend auf den Werten in einem anderen Bild. Da sich jedes Pixel zufällig, aber gleichmäßig bewegen soll, müssen wir Rauschen an feDisplacementMap übergeben, um die Bewegung zu steuern. Glücklicherweise verfügt SVG über ein weiteres Filterelement namens „feTurbulence“, das speziell zur Erzeugung von Rauschen entwickelt wurde. Wir können also zwei Filter kombinieren, um die Kanten der Linien aufzurauen.

Die Größe und Grobheit der Linie kann durch die Parameter der Verschiebungskarte und der Rauscherzeugung gesteuert werden. Leider wird der Versatz in absoluten Einheiten angegeben, nicht relativ zur Liniengröße. Ich habe die Parameter ausgewählt und versucht, etwas zu finden, das zu allen Linienbreiten passt, aber mit einer Erhöhung der Versatzskala können Sie das Problem feststellen:

Jetzt ist die Verschiebung so groß, dass sie die gesamte Linie bewegen und nicht nur ihre Kanten ändern kann. Dieser Effekt macht sich bei dünnen Linien noch deutlicher bemerkbar. In diesem Beispiel sieht eine Linie mit einer Breite von 4 Pixeln im Grunde so aus, als wäre die Kante rau, und in einer Linie mit einer Dicke von 2 Pixeln sind bereits Verzerrungen erkennbar. Das heißt, ich muss einen Wert auswählen, der keine Verzerrungen in dünnen Linien erzeugt.

Wenn Sie mit einer Standarderhöhung im Spiel zoomen, sieht der Effekt folgendermaßen aus (nachdem Sie Parameter ausgewählt haben, um den Effekt zu verbessern):

In diesem Maßstab werden viele raue Kanten zu Flecken und Punkten. Dies ist kein sehr unangenehmer Effekt und erinnert ein wenig an eine Bleistiftlinie. (Im Allgemeinen scheinen SVG-Filter jedoch Probleme mit der Skalierung zu haben. In vielen Fällen sehen sie beim Vergrößern gut aus, unterliegen jedoch beim Wegziehen einem schlechten Größenänderungsalgorithmus.)

So sieht der Effekt beim Zeichnen von Bergen aus (Bleistifteffekt links):

Nicht so schrecklich, aber die Linie hat scharfe Artefakte, die etwas seltsam aussehen. Und wenn der Effekt auf dünne, eng beieinander liegende Linien angewendet wird, überlappen sie sich und verschmelzen als Ergebnis:

Ich wiederhole, das ist nicht so schrecklich, und die Schatten auf den Bleistiftbergen sehen daher den mit einem Bleistift gezeichneten sehr ähnlich, wenn Sie nur einen solchen Effekt benötigen.

Diese Lösung fügt den Konturen des Bleistiftstrichs Rauheit hinzu, ändert jedoch nicht die gleichmäßige Farbe des Strichs. Textur ist auch in echten Bleistiftstrichen vorhanden, da Graphit ungleichmäßig Flecken auf dem Papier hinterlässt.

Um der Innenseite des Strichs eine Textur hinzuzufügen, verwende ich einen SVG-Filter und kombiniere dann das Rauschen mit dem Strich:

Mit einer Erhöhung können Sie sehen, dass die Innenseite jedes Strichs jetzt mit einer Pseudo-Graphit-Textur gefüllt ist. So sieht es im normalen Maßstab aus:

Ziemlich gut, besonders auf dicken Linien. So sieht es beim Zeichnen von Bergen aus:

In dieser Größenordnung ist nicht alles sehr gut. Beachten Sie, dass dieser Filter auch die Dunkelheit der Linien verringert. Dies ist ein natürliches Ergebnis des Hinzufügens von weißem Rauschen zu den Linien. Bis zu einem gewissen Grad kann dieses Problem durch Erhöhen des Rauschkontrasts ausgeglichen werden, so dass einige Teile der Kompensationslinie dunkler werden:

Da die Farben der Linie jedoch bereits ziemlich dunkel sind, wird die Wirkung von "Bleistift" weitgehend zerstört. Wenn ich dies verwende, muss ich daher die Parameter auswählen, um eine angenehme Balance zu schaffen.

Natürlich können beide Lösungen kombiniert werden. Mit einem Anstieg sieht das Ergebnis ziemlich gut aus:

Von der Bleistiftlinie erwarten wir sowohl eine raue Kante als auch eine innere Textur. Auf einer Standardskala ist nicht alles so gut:

aufgrund scharfer Artefakte, die in dieser Größenordnung auftraten.

Ein guter Trick, um diese Textur zu verbessern, wäre das Hinzufügen einer Papierstruktur zum Hintergrund:

Jetzt nimmt das Auge die Textur im gesamten Bild gleichmäßig wahr. Selbst auf einer sehr impliziten Ebene hilft dies, das Auge zu täuschen und davon zu überzeugen, dass die Textur der Linie durch die Interaktion mit dem Papier verursacht wird.

Hier ist ein Beispiel für die Verwendung dieses Filters auf einer Karte (mit Papierstruktur):

Im Allgemeinen ist nicht alles schlecht, aber mit einer detaillierten Studie scheint es, dass überall nur Lärm hinzugefügt wird. Mit einem Anstieg von 200% werden Artefakte noch offensichtlicher:

Eine andere Möglichkeit, eine raue Kante einer Bleistiftlinie zu erstellen, besteht darin, die Linie mehrmals mit leicht unterschiedlichen Abweichungen und verringerter Deckkraft zu zeichnen. In der Mitte der Linie, wo sich mehrere Versionen davon schneiden, liegt die Dichte nahe an der Dichte der ursprünglichen Linie. An den Außenkanten, wo manchmal nur ein Teil der Linien vorhanden ist, ist die Deckkraft geringer und die Kanten sind weniger lesbar.

Um eine solche Lösung mithilfe von SVG-Filtern zu implementieren, müssen Sie im Allgemeinen feTurbulence und feDisplacementMap zusammen verwenden, um eine verzerrte Version der Linie zu erstellen. Um dies jedoch mehrmals zu tun und alle Zeilen am Ende zu kombinieren, benötigen Sie eine Reihe von feBlend-Grundelementen. Wenn wir beispielsweise drei Kopien mischen, müssen wir die Deckkraft der Linien angemessen reduzieren. (Ich bin nicht ganz sicher, wie ich die entsprechende Deckkraft spezifisch berechnen soll, aber ich denke, dass dies die Kubikwurzel der Leuchtkraft der Linie sein kann.)

Dies erzeugt den Effekt (drei Linien mit einer Erhöhung):

Dieser Ansatz hat einige Nachteile. Der Filter hat eine feste Abweichung, daher wirkt er sich stärker auf schmale Linien aus, und an einigen Stellen ist zu erkennen, dass die Einzelpixellinie vollständig geteilt ist. Zweitens ist es ein ziemlich komplexer Filter, der drei separate Abweichungen erzeugt und diese kombiniert. Bei komplexen Bildern wie Dragons Abound-Karten kann es sehr langsam sein .

So sieht es auf einer Standardskala aus:

Meiner Meinung nach ist dies nicht ganz wie ein Bleistiftumriss, aber es beseitigt besser die scharfen Artefakte der vorherigen Lösung.

Dieser Ansatz kann mit dem oben beschriebenen internen Texturfilter kombiniert werden und Textur innerhalb der Bleistiftlinien sowie Papierstruktur hinzufügen:

So sieht es aus, nachdem Sie sich in den Bergen beworben haben:

Dieser Filter neigt dazu, die Linien stärker zu verteilen als der andere Filter, wodurch sie wesentlich dicker werden. Manchmal wird ein Skizzeffekt mit mehreren Linien erzeugt, was nicht so schlimm ist.

Hier ist ein Beispiel für die Verwendung dieses Filters auf einer Karte:

Es bewahrt die ursprüngliche Dunkelheit besser als der erste Filter, und obwohl es meiner Meinung nach nicht genau wie ein Bleistift aussieht, ist der Effekt recht angenehm. Mit einer Steigerung von 200%:

Bei Vergrößerung erfasst dieser Filter keine scharfen Artefakte des ersten Filters. Die Wirkung von sich überschneidenden Linien auf dünne Linien (z. B. im Bild des Waldes) sieht ziemlich künstlich aus, aber breitere Linien (Berge und Flüsse) sehen immer noch gut aus. Innerhalb der schwarzen Linien wie Flüssen geht das interne Rauschen jedoch fast vollständig verloren.

Ich habe beide Filter auf Codepen gepostet, damit Sie sie selbst ausprobieren können. Der erste Filter ist hier , der zweite ist hier . Ich empfehle, mit ihnen zu experimentieren und zu versuchen, sie zu verbessern. Wenn Sie etwas Besseres als meins bekommen, lassen Sie es mich wissen! Ich hätte gerne einen sehr guten Bleistiftfilter!