{"id":1762,"date":"2025-10-10T08:52:35","date_gmt":"2025-10-10T06:52:35","guid":{"rendered":"https:\/\/www.vintrospektiv.de\/?p=1762"},"modified":"2025-10-10T08:52:36","modified_gmt":"2025-10-10T06:52:36","slug":"grafisches-dithering","status":"publish","type":"post","link":"https:\/\/www.vintrospektiv.de\/index.php\/2025\/10\/grafisches-dithering\/","title":{"rendered":"Grafisches Dithering"},"content":{"rendered":"\n

Der vorletzte der angek\u00fcndigten<\/a> Artikel aus meinem Studium befasst sich mit Dithering, hier speziell zur Anwendung als Web-\/OpenGL-Shader. Ich habe allerdings aus Zeitgr\u00fcnden keine Implementierung abgeliefert, sondern lediglich einen Ansatz, wie die Implementierung umgesetzt werden k\u00f6nnte.<\/p>\n\n\n\n

Beschreibung des grafischen Ditherings mit Implementierungsansatz<\/h2>\n\n\n\n

Miron Schmidt 2023<\/p>\n\n\n\n

1. Grundlagen<\/h3>\n\n\n\n

Dithering ist die Anwendung von Rauschen zur Verteilung von Quantisierungsfehlern.1<\/a><\/sup> In der Computergrafik dient Dithering oft der Darstellung von Bildern in begrenzten Farbpaletten, etwa, um Bitplanes und damit Speicher oder Rechenzeit einzusparen (auch Farbreduktion genannt).<\/p>\n\n\n\n

Der Begriff \u201eRauschen\u201c ist hier missverst\u00e4ndlich, da nicht unbedingt eine zuf\u00e4llige Verteilung gemeint ist (siehe allerdings Abschnitt 2), sondern oft regelm\u00e4\u00dfige Rastermuster. F\u00fcr die Anordnung gibt es zahlreiche Algorithmen, z. B. Ordered Dithering2<\/a><\/sup> , Floyd-Steinberg3<\/a><\/sup> oder Burkes4<\/a><\/sup> .<\/p>\n\n\n\n

Grunds\u00e4tzlich werden bei der Farbreduktion Schwellenwerte gebildet, nach denen aus einer Farbe die n\u00e4chstm\u00f6gliche im vorhandenen Farbpool errechnet wird. Im einfachsten Fall, der Darstellung mit einem Bit, kann die Farbe im Pool 0 oder 1 sein. Alle Farbwerte mit einem Durchschnittswert \u00fcber 50 % erhalten dann den Wert 1, die anderen den Wert 0. Beim Dithering geschieht dies weiterhin, der Schwellenwert f\u00fcr jedes Pixel wird aber ver\u00e4ndert, um eine weniger harte Abstufung zu erreichen.<\/p>\n\n\n\n

2. Beschreibung<\/h3>\n\n\n\n

Die einfachste Form des Dithering ist sehr wohl die \u00dcberlagerung von Rauschen auf das Bild (Abb. 1c). Der Schwellenwert wird dadurch um einen Zufallsfaktor ver\u00e4ndert, sodass die Pixel st\u00e4rker gestreut werden.<\/p>\n\n\n\n

Bei den meisten Dithering-Algorithmen werden jedoch die Folgepixel mit dem Quantisierungsfehler des aktuellen Pixels verrechnet.<\/p>\n\n\n\n

Einer der bekanntesten und \u00e4ltesten Dithering-Algorithmen ist der nach Floyd und Steinberg5<\/a><\/sup> , den ich hier exemplarisch vorstellen m\u00f6chte.<\/p>\n\n\n\n

\n
\"\"
(a) Original<\/figcaption><\/figure>\n\n\n\n
\"\"
(b) Schwellenwert 50 %<\/figcaption><\/figure>\n\n\n\n
\"\"
(c) Zufalls-Dithering<\/figcaption><\/figure>\n\n\n\n
\"\"
(d) Floyd-Steinberg<\/figcaption><\/figure>\n
Abbildung 1: Michelangelos David gedithert (Quelle: Wikipedia, Public Domain)<\/figcaption><\/figure>\n\n\n\n

Hierbei wird der Quantisierungsfehler durch 16 geteilt und auf die Schwellenwerte f\u00fcr umliegende Pixel verteilt: 7 Anteile auf das horizontal folgende Pixel, 3 auf das links unter dem Pixel liegende Pixel, 5 auf das direkt darunter liegende und 1 auf das rechts unter ihm liegende. Die bereits verarbeiteten Pixel werden also nicht mehr ver\u00e4ndert, Pixel in der n\u00e4chsten Zeile daf\u00fcr m\u00f6glicherweise sp\u00e4ter noch einmal. Durch diese Verteilung wird die Wahrscheinlichkeit ver\u00e4ndert, dass Pixel den Schwellenwert erreichen, und es entsteht das in Abbildung 1d dargestellte Muster.<\/p>\n\n\n\n

3. Implementierungsansatz<\/h3>\n\n\n\n

Der folgende Pseudocode6<\/a><\/sup> gibt den Floyd-Steinberg-Algorithmus wieder:<\/p>\n\n\n\n

for each y from top to bottom do\n    for each x from left to right do\n\toldpixel := pixels[x][y]\n\tnewpixel := find_closest_palette_color(oldpixel)\n\tpixels[x][y] := newpixel\n\tquant_error := oldpixel - newpixel\n\tpixels[x + 1][y    ] := pixels[x + 1][y    ]\n\t    + quant_error * 7 \/ 16\n\tpixels[x - 1][y + 1] := pixels[x - 1][y + 1]\n\t    + quant_error * 3 \/ 16\n\tpixels[x    ][y + 1] := pixels[x    ][y + 1]\n\t    + quant_error * 5 \/ 16\n\tpixels[x + 1][y + 1] := pixels[x + 1][y + 1]\n\t    + quant_error * 1 \/ 16<\/code><\/pre>\n\n\n\n
Um Floyd-Steinberg-Dithering in einem Shader etwa in WebGL zu implementieren, w\u00fcrde dieser Code im Multipassverfahren angewendet werden: Zuerst wird das Bild der Szene in ein daf\u00fcr angelegtes Framebuffer-Objekt gerendert, dann wird auf dieses Framebuffer-Objekt in einem zweiten Pass der Dithering-Algorithmus angewendet (z. B. nach Reduktion der Bitplanes) und wiederum in den Standard-Framebuffer gerendert, normalerweise also auf dem Bildschirm ausgegeben.<\/p>\n\n\n
  1. vgl. die Masterarbeit von Larence G. Roberts, in abgewandelter Artikelform unter http:\/\/www.packet.cc\/files\/pic-code-noise.html<\/a> (archiviert im Internet Archive, Stand: 6.2.2024) \u21a9\ufe0e<\/a><\/li>
  2. s. etwa https:\/\/en.wikipedia.org\/wiki\/Ordered_dithering<\/a> (Stand: 6.2.2024) \u21a9\ufe0e<\/a><\/li>
  3. s. etwa https:\/\/en.wikipedia.org\/wiki\/Floyd-Steinberg_dithering<\/a> (Stand: 6.2.2024) \u21a9\ufe0e<\/a><\/li>
  4. eine Weiterentwicklung der Matrix von Jarvis, Judice und Ninke, beschrieben z. B. unter https:\/\/tannerhelland.com\/2012\/12\/28\/dithering-eleven-algorithms-source-code.html<\/a> \u21a9\ufe0e<\/a><\/li>
  5. vgl. den Wikipedia-Artikel zum Floyd-Steinberg-Algorithmus<\/a> (Stand: 10.2.2024) \u21a9\ufe0e<\/a><\/li>
  6. s. ebd. \u21a9\ufe0e<\/a><\/li><\/ol>","protected":false},"excerpt":{"rendered":"
    Der vorletzte der angek\u00fcndigten Artikel aus meinem Studium befasst sich mit Dithering, hier speziell zur Anwendung als Web-\/OpenGL-Shader. Ich habe allerdings aus Zeitgr\u00fcnden keine Implementierung abgeliefert, sondern lediglich einen Ansatz, wie die Implementierung umgesetzt werden k\u00f6nnte. Beschreibung des grafischen Ditherings mit Implementierungsansatz Miron Schmidt 2023 1. Grundlagen Dithering ist die Anwendung von Rauschen zur Verteilung […]<\/p>\n","protected":false},"author":1,"featured_media":1768,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pgc_sgb_lightbox_settings":"","footnotes":"[{\"content\":\"vgl. die Masterarbeit von Larence G. Roberts, in abgewandelter Artikelform unter http:\/\/www.packet.cc\/files\/pic-code-noise.html<\/a> (archiviert im Internet Archive, Stand: 6.2.2024)\",\"id\":\"7380056c-c6ec-4715-9872-5fc45f614b68\"},{\"content\":\"s. etwa https:\/\/en.wikipedia.org\/wiki\/Ordered_dithering<\/a> (Stand: 6.2.2024)\",\"id\":\"af0875f2-2151-4f83-b6f1-95fd3ee8f5a7\"},{\"content\":\"s. etwa https:\/\/en.wikipedia.org\/wiki\/Floyd-Steinberg_dithering<\/a> (Stand: 6.2.2024)\",\"id\":\"afd42de4-0e16-403f-9287-74fdc7bb3cbb\"},{\"content\":\"eine Weiterentwicklung der Matrix von Jarvis, Judice und Ninke, beschrieben z. B. unter https:\/\/tannerhelland.com\/2012\/12\/28\/dithering-eleven-algorithms-source-code.html<\/a>\",\"id\":\"4e6c314b-69d9-4b3a-acd4-cbd872c38e3c\"},{\"content\":\"vgl. den Wikipedia-Artikel zum Floyd-Steinberg-Algorithmus<\/a> (Stand: 10.2.2024)\",\"id\":\"934e6e56-731b-4518-b856-cfe7018f8df2\"},{\"content\":\"s. ebd.\",\"id\":\"a4277bec-42e1-4f78-86c3-371ed4de5854\"}]"},"categories":[16],"tags":[],"class_list":["post-1762","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-introspektiv"],"_links":{"self":[{"href":"https:\/\/www.vintrospektiv.de\/index.php\/wp-json\/wp\/v2\/posts\/1762","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vintrospektiv.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vintrospektiv.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vintrospektiv.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vintrospektiv.de\/index.php\/wp-json\/wp\/v2\/comments?post=1762"}],"version-history":[{"count":2,"href":"https:\/\/www.vintrospektiv.de\/index.php\/wp-json\/wp\/v2\/posts\/1762\/revisions"}],"predecessor-version":[{"id":1769,"href":"https:\/\/www.vintrospektiv.de\/index.php\/wp-json\/wp\/v2\/posts\/1762\/revisions\/1769"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.vintrospektiv.de\/index.php\/wp-json\/wp\/v2\/media\/1768"}],"wp:attachment":[{"href":"https:\/\/www.vintrospektiv.de\/index.php\/wp-json\/wp\/v2\/media?parent=1762"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vintrospektiv.de\/index.php\/wp-json\/wp\/v2\/categories?post=1762"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vintrospektiv.de\/index.php\/wp-json\/wp\/v2\/tags?post=1762"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}