Gibt es einen Grund, warum Hillary Clintons Logo versteckte Kerben hat?

Diese Frage ist keineswegs politisch!

Geben Sie hier die Bildbeschreibung ein

Als ich mir die hier zu findende SVG-Version von Hillarys Logo ansah , bemerkte ich, dass es Kerben in den beiden vertikalen Balken des H gab. Der Pfeilquerbalken verdeckt die Kerben, sodass sie beim Betrachten des Logos nicht zu sehen sind. Aber ich bin sehr neugierig, warum der Designer diese Kerben angebracht haben könnte. Weiss es jemand?

Geben Sie hier die Bildbeschreibung ein

Technisch gesehen ist dies ein Fehlerumgehungsschema. Es ist ein bisschen überraschend und beunruhigend zu glauben, dass alle Universitäten und Mainstream-Anbieter von 2D-Rendering-Engines immer wieder denselben Fehler machen, obwohl wir die Ursache kennen, wir wissen, wie man ihn behebt, und es kein so großer Leistungseinbruch ist auf einem modernen Computer. Und keine 3D-Grafiker machen diesen Fehler selten und wissen seit über 30 Jahren davon.
@joojaa wie gilt das in 3D? Mein Gedanke war Z-Fighting, aber das ist in Videospielen immer noch nicht sehr ungewöhnlich (zugegebenermaßen sind die Permutationen von Freiheitsgraden, Polygonen, Shadern, Modellpositionen usw. im Vergleich zum Erstellen einer bestimmten 3D-Grafik praktisch unendlich).
@NickT Es ist kein Kampfproblem, es geht darum, Deckkraft und Abdeckung zu mischen, aber 3D ist viel mehr als nur Spiele. In 3D haben wir seit Ewigkeiten Multisampling verwendet, um das AA-Problem zu lösen. Multisampling (normalerweise, selbst wenn die Ergebnisse nicht so ausgeprägt wären) berechnet keine Abdeckung und macht daher nicht den Fehler zu glauben, dass 50 % Abdeckung durch weitere 50 % Abdeckung zu 25 % sichtbar sind. Dies mag zwar zutreffen, die Antwort kann aber auch lauten: 50 % ist sichtbar oder keine ist sichtbar. In diesem Fall werden die anderen 50 % manuell entfernt, um Verwirrung zu vermeiden. Wir können 3 Fälle beheben, aber nicht alle. Sollte nicht benötigt werden.
Es ist traurig, dass ich es eindeutig erkannt habe, um einen Rendering-Fehler von überlappenden Rändern zu vermeiden. Aber SVG ist immer noch 14 Jahre alt, also hoffe ich, dass das eines Tages behoben wird.
@FranciscoPresencia Es ist kein Problem mit SVG, es ist nur ein Problem mit der Art und Weise, wie wir die Renderings fälschlicherweise implementieren. Verschiedene SVG-Renderer haben unterschiedliche Schweregrade dieses Problems
@joojaa, aber es könnte immer noch der Spezifikation hinzugefügt werden, wie man es richtig rendert
@joojaa Ich glaube jedoch nicht, dass es eine einfache "Lösung" ist. Der 'Fehler' macht Sinn, wenn Sie daran denken, dass jedes Element des SVG einzeln gerastert wird ... genau so funktioniert ein SVG. Wenn ein Vektor auf einem Pixel liegt, muss dieses eine Pixel Anti-Aliasing vorhanden sein. In einem rein statischen SVG sehe ich, dass etwas Logik hinzugefügt werden könnte, um Elemente unter anderen zu maskieren, aber da Sie Dinge wie das Animieren von SVGs tun können, sehe ich, dass dies ein viel komplexeres Stück KI ist, das geschrieben werden müsste.
@ DA01 nein, die naive Lösung ist unglaublich einfach, es ist weniger Code als der aktuelle Algorithmus. Anstatt eine abdeckungsbasierte Berechnung durchzuführen, rendern Sie einfach so, als ob Sie überhaupt kein Antialiasing bei einer höheren Auflösung durchgeführt hätten, und filtern Sie das Bild dann auf die tatsächliche Auflösung herunter. Dies wird niemals von unten nach oben verschüttet, da es keinen Fehler machen kann, da das vorderste Element es vollständig verdeckt. Grafikkarten tun dies die ganze Zeit, worum es bei den x4 x8 x16 aa-Einstellungen in den Grafikkarteneinstellungen geht.
@joojaa ah, ja ... das ist eine interessante Lösung.
@joojaa Selbst bei Verwendung der üblichen 3D-Engines müssen Sie T-Verbindungen vermeiden, da sonst Rundungsfehler der Scheitelpunktposition zu Löchern oder Überlappungen führen können. In diesem Fall läuft dies auf das Hinzufügen von Scheitelpunkten zu dem blauen Balken hinaus, wo die linke Seite des linken blauen Balkens den Pfeil schneidet. (Solange Sie das Logo nicht drehen, hat dies aufgrund der Ausrichtung der Figur in den Himmelsrichtungen möglicherweise keinen Einfluss auf diesen Fall, sodass Sie wahrscheinlich ohne sie auskommen würden.)
@codesInChaos das ist mir bewusst.
Es ist einfach eine gute Praxis, Druckprobleme zu vermeiden - keine große Sache.
@joojaa Das Problem dabei ist, dass Sie wissen müssen, wann Sie ein Downsampling durchführen müssen. Und wenn Sie sowohl die Upsampling- als auch die Downsampling-Version gleichzeitig halten, werden Entwickler am Ende Pixelzugriff auf diesen Upsampling-Puffer haben wollen. Ein zweites Problem besteht darin, so viele Daten im Speicher zu halten. (Sie können dies bereits in Javascript tun, übrigens: Lassen Sie das Leinwandraster einfach doppelt so groß wie der Raum, in den es gerendert wird.)
@JanDvorak Also bevorzugst du Fehler, weil es einfacher ist? Ihre Bank könnte auch das Runden vermeiden und Zahlen einfach abschneiden, weil es bequem ist (Junge, würden sie das gerne tun). Aber nein, Sie müssen den Puffer nicht länger speichern, als Sie brauchen, um ihn herunterzufiltern. Ich weiß, dass es machbar ist, nur dass es nicht standardmäßig gemacht wird, was bedeutet, dass jeder Grafikdesigner auf der Welt jedes Jahr Stunden damit verbringt, diese Probleme zu debuggen. Es ist auch nicht so, dass ich jetzt Zugriff hätte.

Antworten (4)

Um möglichen Rendering-Artefakten vorzubeugen.

Ohne die Kerben sehen Sie wahrscheinlich die Kanten der unteren Formen dort, wo sie auf die Kanten der darüber liegenden Formen treffen (auf dem Bildschirm ist dies sowieso kein Problem beim Drucken).

Beispiele und Erläuterungen zu den möglichen Artefakten finden Sie hier:

Es gibt selten einen Grund, perfekt ausgerichtete Kanten zu haben, die solche Artefakte verursachen würden, also ist die Verwendung von "Kerben" wie in Hillarys Logo eine gute Angewohnheit.

Dies kann tatsächlich ein ebenso großes Problem beim Drucken sein. Beim Digitaldruck wird zumindest das SVG normalerweise gerastert, bevor es an den Drucker gesendet wird, und die gleichen Arten von Artefakten können auftreten. (Das letzte Projekt bei meinem letzten Arbeitgeber (große Akzidenzdruckerei) bestand darin, Software zu schreiben, die dabei hilft, solche Dinge zu identifizieren, bevor die teure Arbeit, Tinte auf Papier zu bringen, erledigt war.)
Da wir über US-Politik sprechen, meinen Sie „Artefakte“?
Laut english.se meine ich Artefakte, keine Artefakte. (Aber da ich Brite bin, meine ich trotzdem Artefakte)
Es gibt selten einen Grund ... nur neugierig: Gibt es jemals einen Grund?
@AloisMahdal Ich bezweifle es sehr.
@AloisMahdal Ja, wenn es um Transparenz geht. Optimalerweise verwenden Sie Software/Format, die dies gut können, aber das ist nicht immer der Fall.

Das Verständnis der Rasterung und des Maleralgorithmus könnte hilfreich sein.

Eine Möglichkeit, Vektorgrafiken (durch Polygone anstelle von Pixeln definierte Grafiken) in Pixel zu rendern, besteht darin, die Polygone zu rastern, während der Painter-Algorithmus ausgeführt wird.

Der Algorithmus des Malers ist ein Bottom-up-Prozess, bei dem Sie zuerst den Hintergrund ablegen und dann mit jeder Farbschicht auf diesen Hintergrund zeichnen, bis Sie die oberste Schicht erreichen.

Wenn Sie eine Ebene ablegen, achten Sie auf ihre Abdeckung (normalerweise in einem zusätzlichen Kanal, dem Alphakanal), und verwenden sie, um die hinzugefügte Farbe mit dem zu mischen, was bereits vorhanden ist.

Wenn Ihre neue Ebene ein Pixel zu 50 % bedeckt und blau ist, mitteln Sie die aktuelle Farbe dieses Pixels mit Blau und zeichnen diese stattdessen dort.

Die Dinge werden etwas komplexer, wenn Sie ein Bild mit Transparenz erstellen, aber nicht grundsätzlich.

Beim Rastern wird ein Polygon in Pixel umgewandelt. Hier berechnen wir mithilfe von Algebra, wie viel das Polygon ein bestimmtes Pixel bedeckt, und berechnen dann eine Abdeckungsmenge.

Wenn Sie zwei Kanten eines Polygons haben, die deckungsgleich sind – genau übereinander –, aber beide ein bestimmtes Pixel zur Hälfte bedecken, ist das, was passiert, ein Problem.

Angenommen, das untere Polygon ist rot und das obere blau und der Hintergrund ist weiß.

Zuerst malen wir das Rot. Dies vermischt sich mit dem Weiß, was zu 50 % Weiß und 50 % Rot führt.

Dann malen wir das Blau. Dies mischt sich mit 50 % Weiß 50 % Rot und wir erhalten 25 % Weiß 25 % Rot 50 % Blau. Dasselbe passiert, wenn sich Rot und Blau in der Mitte treffen oder wenn Blau Rot vollständig überdeckt.

Aber "in Wirklichkeit" bedeckte das blaue Polygon das rote vollständig, also warum sehen wir es? Weil der Algorithmus Subpixel-Positionierungsdetails vergisst .

Solange ein Polygon zu 100 % abgedeckt ist, ist dies kein Problem.

Nun, dieses Problem ist nicht grundlegend. Sie können Polygon-Rendering mit einem Raytracing-ähnlichen Ansatz (bei dem Sie an Punkten um den Faktor N ^ 2 überrendern) oder sogar einem reinen Vektor-ähnlichen Ansatz (bei dem Sie blockierende Formen von der Geometrie der darunter liegenden Formen subtrahieren sie ausschneiden). In keinem Fall dringen "versteckte" Farben in das Ausgabebild ein.

Der Algorithmus des Malers ist nicht der einzige Fall, in dem "versteckte" Geometrie durchsickern kann. Wenn Sie mit opaken Medien drucken, sind die Farbschichten manchmal nicht perfekt ausgerichtet. Unterschichten dringen also durch, wenn die oberste Schicht sie vollständig bedecken sollte.

Da Sie nicht wissen, wie Ihr Vektorbild ausgegeben wird, können Sie mit solchen Kerben Bilder erstellen, die robuster gegenüber unvollkommenen Druck-/Anzeigetechniken sind.

Ihre Beschreibung gilt im Fall von Grafiken, die Alphakanäle enthalten, oder im Fall von Subpixelzeichnung beim Anti-Aliasing. Das OPs-Beispiel zeigt die Kerbartefakte für gemischte Schichten im Gegensatz zu dem, was beabsichtigt ist. Ich würde vorschlagen, dass das Problem eher mit Registrierungsfehlern beim Drucken zusammenhängt.
@pekka ja, aber die meisten Renderings machen heute Anti-Aliasing.
Wenn die obere Schicht Transparenz aufweist, führt die Kerbe zu einem allmählichen Zurückziehen der unteren Schicht von der Kante, was sich sowohl auf das Anti-Aliasing als auch auf die Farbe der obersten Ebene auswirkt. Eine angemessenere Reaktion wäre ein rechteckiger Falz (von schwer abzuschätzender Größe) in dem Bereich, in dem das Mischen nicht erwünscht ist. Wie beziffern Sie das?
@pekka Wenn die oberste Ebene mittelmäßig transparent ist, ist dieses Problem weitaus weniger problematisch (da Sie das Rot unter dem Blau sowieso sehen können). Wenn sich die Transparenz der Oberseite der Opazität nähert, nähern Sie sich der obigen Lösung. Wenn es von der Deckkraft weggeht, nähern Sie sich der Vorkomposition. Das allgemeine Problem ist aufgrund von Registrierungsfehlern, Aufbauproblemen (zu viele Ebenen!), Anti-Aliasing und allem anderen schwierig: Irgendwann möchten Sie benutzerdefinierte Vektoren für jedes Ausgabeformat schreiben oder die Vektoren irgendwie mungieren. Ich habe einfach versucht, die genaue technische Ursache des Problems zu beantworten, das die Kerbe löst.
@Pekka ein Rechteck ist schwieriger zu zeichnen und dann endet man mit dem entgegengesetzten Problem des gleichen Problems, da der Hintergrund durchscheint. Notch ist eine Art Kompromiss zwischen einem Bug und mehreren anderen (der Notch dient zum Rendern auf dem Bildschirm, da kein quadratischer Hohlraum vorhanden ist, sodass bei Bedarf mit minimalen Fehlern überdruckte Platten hergestellt werden können). Aber es gibt wirklich keinen Grund, dies zu tun, es ist nur so, dass unsere Renderer falsch arbeiten, das ist alles, was dazu gehört. Wir konnten alle 3 Probleme leicht lösen, indem wir die Art und Weise, wie wir rastern, ändern.

Cai hat Recht. Ich dachte, ich würde auch eine visuelle Antwort hinzufügen.

Der Grund dafür ist, dass es sich um ein SVG handelt. Im Gegensatz zu einem Rasterbild, bei dem Sie jedes gerenderte Pixel steuern, erfolgt die Rasterung des SVG im Browser ... also trifft der Browser diese Entscheidungen.

Eine der Entscheidungen, die der Browser treffen muss, ist, wann Anti-Aliasing ausgeführt wird. Dies geschieht normalerweise, wenn ein Punkt entlang einer Linie auf ein Pixel fällt. Es wird dann dieses Pixel antialiasieren. Da alle Ebenen des SVG gerendert werden, wird dies für jede Ebene ausgeführt, und hier können Sie beginnen, die Kantenartefakte zu erhalten. Dies gilt insbesondere, wenn Sie mit dem Zoom des SVG spielen, da dies dazu führt, dass verschiedene Bildschirmpixel überlappen.

Hier ist ein Screenshot eines grünen Kästchens, das ein rotes Kästchen in Chrome überlappt. Der obere Bereich ist bei 100 % Seitenzoom, der untere Bereich ist vergrößert. Beachten Sie den Unterschied beim Rendern dieser Kante:

Geben Sie hier die Bildbeschreibung ein

Wenn ich das Screenshot mache und hineinzoome, um die Rasterung anzuzeigen, können Sie sich ein klareres Bild davon machen, was vor sich geht:

Geben Sie hier die Bildbeschreibung ein

Die ideale Lösung wäre hier, dass der SVG-Rasterizer im Browser "intelligenter" wäre und keine gestapelten Dinge rendert, aber da SVG-Elemente extern und live manipuliert werden können (da es sich nur um eine XML-Datei handelt), ist dies keine praktische Lösung für den Browser.

Stattdessen trifft der Designer diese Entscheidung, indem er die Kerben verwendet, die Sie sehen.

Übrigens ähnelt dies im Konzept dem Umgang mit der Registrierung beim Drucken durch die Verwendung von Trapping .

Das Drucken in mehreren Farben erfordert eine genaue Registrierung, um unansehnliche Lücken zu vermeiden, und ist ein Problem, wenn Artefakte aus mehreren Quellen bestehen. Ähnliche Bedenken können sogar bei digitalen Produkten auftreten, bei denen Arithmetik mit begrenzter Genauigkeit zwangsläufig zu Fehlern führt.

Das Problem, das vermieden wird, ist eines der inversen Überfüllung – wobei eine Abweichung von der beabsichtigten Grafik zu einer dünnen Linie der Hintergrundfarbe führen kann, die links von den vertikalen zusammenfallenden Kanten erscheint. Da die Farben sehr kontrastreich sind, wird die Wirkung spürbar sein (versuchen Sie, die unterbrochene Linie auch nur 1 Pixel nach links von der Vertikalen zu verschieben.

Der Ansatz soll sich nicht auf das Mischen von Tinten auswirken. Konsistente Koordinaten auf dem Bildschirm vermeiden das Problem, während Halbtonung verwendet wird, um die Farbe zu verwalten.

Gibt es einen Grund, warum Hillary Clintons Logo versteckte Kerben hat?
AntwortenHierDatenschutz-Bestimmungen1y, 0v