- Erklärt das Prinzip, mit dem mehrere Helligkeitsstufen visuell durch ein Schwarz-Weiß-Pixelraster nachgebildet werden
- Dithering ist eine Technik, mit der mehr Farben oder Helligkeitsstufen als tatsächlich vorhanden als optische Täuschung dargestellt werden
- Beim Ordered Dithering wird eine Threshold Map verwendet, um für jedes Pixel anhand seiner Helligkeit zwischen Schwarz und Weiß zu entscheiden
- Dabei erzeugen Änderungen der Pixeldichte den Eindruck von Graustufen, während die Form des Originalbilds erhalten bleibt
- Der Artikel ist der erste Teil einer dreiteiligen Reihe zu den Grundlagen des Ditherings; später folgen Algorithmen zur Erzeugung von Threshold Maps und Error Diffusion
Konzept und Prinzip von Dithering
- Dithering ist eine visuelle Technik, um mit begrenzten Farben mehr Tonabstufungen darzustellen
- Schwarz-weiße Pixel werden in bestimmten Mustern angeordnet, um die Illusion mehrerer Graustufen zu erzeugen
- Ohne die tatsächliche Zahl der Farben zu erhöhen, entsteht so visuelle Vielfalt
- Im Artikel wird ein Graustufenbild als Beispiel verwendet
- Auf einem Bildschirm, der nur Schwarz und Weiß anzeigen kann, wird jedes Pixel in die nächstliegende Farbe (Schwarz oder Weiß) umgewandelt
- Bei einer einfachen Umwandlung werden Helligkeitsgrenzen grob und feine Schatteninformationen gehen verloren
- Dithering erreicht weichere Helligkeitsübergänge, indem einige Pixel absichtlich in die entgegengesetzte Farbe geändert werden
- In dunklen Bereichen wird die Dichte schwarzer Pixel erhöht, in hellen Bereichen die Dichte weißer Pixel
- Dadurch bildet der Unterschied in der Pixeldichte die Illusion von Graustufen
Ordered Dithering und Threshold Map
- Ordered Dithering ist eine einfache Dithering-Methode, die eine Threshold Map verwendet
- Eine Threshold Map besteht aus einem Raster von Helligkeitswerten von 0 (am dunkelsten) bis 1 (am hellsten)
- Die Helligkeit jedes Eingabepixels wird mit dem Threshold-Wert an der entsprechenden Position verglichen
- Ist die Helligkeit größer als der Schwellenwert, wird das Pixel weiß, andernfalls schwarz
- Dieser Vorgang wird für alle Pixel wiederholt, sodass ein Schwarz-Weiß-Musterbild entsteht
- Eine Threshold Map ist so entworfen, dass sie je nach Helligkeitsverteilung des Eingabebilds ein geeignetes Schwarz-Weiß-Dichtemuster ausgibt
- Helle Bereiche haben einen höheren Weißanteil, dunkle Bereiche einen höheren Schwarzanteil
- Dieser Dichteunterschied erzeugt den Effekt, aus der Entfernung wie Graustufen zu wirken
Verarbeitung großer Bilder und visueller Effekt
- Beim Dithering großer Bilder wird die Threshold Map vergrößert, damit sie zur Gesamtgröße des Bilds passt
- Dabei wird dasselbe Prinzip angewendet: Die Helligkeit jedes Pixels wird mit dem Schwellenwert verglichen und in Schwarz oder Weiß umgewandelt
- Das Ergebnis ist ein Bild, das nur zwei Farben verwendet, aber die Helligkeitsstruktur des Originals beibehält
- Zwar gibt es weniger Farben, doch visuelle Details bleiben durch Änderungen der Pixeldichte erhalten
Bedeutung von Dithering und Aufbau der Serie
- Dithering ist eine Technik, die nicht Farben hinzufügt, sondern durch deren Reduktion visuelle Vielfalt erzeugt
- Der Autor beschreibt es als einen „Prozess, aus dem Vorhandenen das Maximum herauszuholen“
- Dieser Artikel ist der erste Teil einer Trilogie und konzentriert sich auf Grundprinzipien und das visuelle Verständnis
- Im nächsten Artikel geht es um Algorithmen zur Erzeugung von Threshold Maps, im letzten um Error Diffusion
- Die Reihe will verschiedene algorithmische Ansätze und Unterschiede in den visuellen Ergebnissen des Ditherings untersuchen
Autor und Projektvorstellung
- visualrambling.space ist ein persönliches Projekt von Damar
- Es erstellt interaktive Inhalte, die verschiedene Themen visuell erforschen und erklären
- Zu den behandelten Themen gehören Three.js, WebGL, Dithering, Visualisierung und interaktives Lernen
- Damar wird über den X/Twitter-Account (@damarberlari) weiterhin neue visuelle Artikel teilen
2 Kommentare
Hacker-News-Kommentare
Das ist eine Halftone-Technik. Also eine Methode, bei der es so aussieht, als gäbe es mehr Farben als in der tatsächlichen Palette, aber für mich ist das kein Dithering
Ich würde sagen, Dithering ist eine Technik, um Banding zu beseitigen, das entsteht, wenn die Palette nicht groß genug ist
Das hier gezeigte Halftone erweitert eine 2-Farben-Palette auf ungefähr 20 Farben, aber das Banding ist weiterhin deutlich sichtbar
Solches Banding kann man beseitigen, indem man viel mehr Farben verwendet (z. B. 256-stufige Graustufen, bei RGB also 256³) oder eben durch Dithering
Vermutlich ist die am Ende angekündigte Error-Diffusion-Technik genau das, was ich meine
Der Kern von Dithering ist Rauschen, und in dieser Demo gibt es überhaupt kein Rauschen. Alles ist deterministisch
Die Präsentation selbst war trotzdem wirklich großartig
Normalerweise entsteht das Rauschen beim Quantisierungsprozess, und Dithering ist eine Technik, dieses Rauschen zu formen
Das hier verwendete Bayer-Matrix Ordered Dithering konzentriert das Rauschen im Hochfrequenzbereich, sodass es dem Auge weniger auffällt, aber im Niederfrequenzbereich bleibt weiterhin Banding bestehen
Wie Dave Long sagte, kann auch der Bresenham-Linienalgorithmus als eine Art Dithering betrachtet werden. Das Signal ist dabei nicht die Helligkeit, sondern die Position des Stifts
Dazu gab es schon vor ein paar Tagen eine Diskussion — siehe diesen Thread
Wikipedia-Artikel
Früher hatten die Farbmaschinen von NeXT nur 12-Bit-Displays (4 Bit pro Kanal), aber mit gutem Dithering sah das wie 24-Bit-True Color aus
Ich empfehle zwei Videos von Daniel Shiffman auf Coding Train
Turning Images into Dots: The Magic of Dithering
Coding Challenge 181: Weighted Voronoi Stippling
Das war ein interessantes Thema. Die Animationen waren gut, und man hat gesehen, wie viel Mühe darin steckt
Aber solche interaktiven Präsentationen sind schwerer zu lesen als traditionelle Blogposts
Die Struktur des Textes ist nicht auf einen Blick erkennbar, und weil man Satz für Satz lesen muss, ist schnelles Überfliegen schwierig
Es wirkt wie ein interaktives Video, bei dem der Nutzer die Geschwindigkeit steuern kann
Ich bevorzuge normalerweise auch Text, aber ich finde dieses Format eine gelungene Variation
Ich habe in mehreren Designprojekten Ordered und Error Diffusion Dithering als visuelle Sprache eingesetzt
Vor allem bei Arbeiten rund um Tech/Computer/Blockchain, sowohl statisch als auch animiert
Solche alten Techniken haben eine seltsame Wärme und Nostalgie, die sich gut mit neuen Ideen verbinden lässt
Beispiele meiner Arbeiten gibt es auf Instagram:
D.Y.O.R. / Printed / Titles / Dithering-Experimente
Siehe meine Seite olsz.me
Ich habe früher einmal einen Übergang zwischen zwei Dithering-Arten gebaut
GitHub-Projekt
Ich wollte das wirklich mögen, aber Text über bewegten Mustern zu lesen war viel zu anstrengend
Die Art der Visualisierung war toll, aber ich habe den Teil mit der Threshold Map nicht verstanden
Es wurde nicht gut erklärt, wie diese Map erstellt wird und wie die Schwellenwerte festgelegt werden
Ich weiß nicht, ob das für den Autor so selbstverständlich war, dass er es ausgelassen hat
Der Schlüssel ist, sich das Konzept eines „Threshold“ zu merken. Graue Pixel werden anhand eines Schwellenwerts in Schwarz oder Weiß umgewandelt
Zum Beispiel
dithered_color = (raw_color > threshold_color) ? white : blackMan kann die Thresholds auch zufällig wählen. Wenn der Mittelwert 0,5 ist, nähert das das ursprüngliche Grau gut an
Wichtig ist, dass die weißen Pixel, wenn ihre Anzahl nach und nach zunimmt, nicht aneinanderkleben.
50 % Grau kann man als Schachbrettmuster entwerfen, 25 % so, dass in einem 2x2 nur ein Pixel weiß ist usw.
Solche Experimente machen direkt in ShaderToy Spaß
Zuerst dachte ich, als Eingabe würde ein „Binärbild“ verwendet, später waren es dann Graubereiche
Dithering sorgt dafür, dass selbst Monitore ohne 10-Bit-Farben überzeugend wie 10-Bit aussehen können
Banding verschwindet, und das Rauschen kaschiert die fehlende Farbtiefe
Es ist also auch heute noch eine nützliche Technik und nicht nur für Retro-Art
Die Leute denken immer noch nur an Palette Dithering
8 Bit pro Kanal reichen nicht aus. Wegen der Gammakorrektur sind es effektiv nur etwa 220 Stufen
Ich pflege das Rust-Crate dithereens, um solche Probleme zu lösen
Wenn man sich den Gradient oben in der README ansieht, versteht man sofort, warum das wichtig ist
Wenn hochbitige Bilder auf 10 Bit oder 8 Bit reduziert werden, ist zufälliges Dithering oft völlig ausreichend
Photoshop wendet bei der Konvertierung von 16 Bit auf 8 Bit standardmäßig Dithering an
Andere Software tut das nicht, und wenn beim Druck großer Poster Banding entsteht, merkt man es sofort
So konnten 6-Bit-TN-Panels wie 8-Bit-Panels wirken, und heute wird das auch für HDR-10 eingesetzt
Das ist ein einfacher Algorithmus, der Pixel schnell flackern lässt, um Farben zu mischen
Wikipedia-Artikel zu Frame rate control
Das Präsentationsformat war hervorragend, und ich freue mich auf den nächsten Teil
Ich habe früher einmal Ordered Dithering in einem ZX Spectrum Raytracer verwendet, und die Implementierung war einfach bei gutem Ergebnis
Projektlink
In den 80ern wurde es wegen der Performanceprobleme wohl nicht oft verwendet. In Hintergründen von Windows 3.1 oder Monkey Island VGA habe ich es in den 90ern gesehen
Tolle Demo, aber Dithering als „Illusion von mehr Farbstufen“ zu bezeichnen, scheint mir nicht ganz korrekt
Wenn man ein gedithertes Bild mit einem Tiefpassfilter bearbeitet, sind diese Zwischenfarbtöne tatsächlich vorhanden
So ähnlich wie ein Class-D-Verstärker ein Pulssignal ausgibt, nach dem Filtern aber echter analoger Ton entsteht
Letztlich übernehmen unser Sehen und die Entfernung selbst die Rolle dieses Filters
Wenn man genau hinsieht, merkt man, dass diese Farbe tatsächlich nicht vorhanden ist
Man nimmt mit schwarz-weißen Pixeln Grau wahr und erkennt gleichzeitig, dass es sich um eine optische Täuschung handelt
Deshalb finde ich die Formulierung „Illusion“ passend
Abgesehen vom Text ist der Ansatz als interaktives Video, bei dem nur das Video im Hörsaal vorträgt, ein extrem stylisches Highlight, das die Bühne sprengt. Die Szene, in der Graustufen eines Bildes in 3D geschichtet und gezeigt werden, wirkt meiner Meinung nach wie eine sehr zugängliche Erklärung.