Maxime Heckel verbrachte mehrere Monate damit, seine persönliche Website von Grund auf neu zu bauen, und band 3D-Arbeiten ein, um seine Fähigkeiten mit Shadern und WebGL zu präsentieren. Dabei erkannte er, wie entscheidend Post-Processing ist, damit eine Szene gut aussieht. Individuelles Post-Processing bot ihm ein kreatives Ventil, und er entwickelte eine besondere Vorliebe für Retro-Effekte wie Dithering, Farbquantisierung, Pixelisierung oder die RGB-Zellen von CRT-Bildschirmen. Diese subtilen Details erzeugen einen angenehmen Kontrast zwischen dem modernen Web und einer Technologie-Ära, der viele Menschen aus den 90er- und frühen 2000er-Jahren noch heute nachtrauern.
Dithering entstand als frühe Grafiktechnik, die das Gehirn des Betrachters täuschte, indem sie Verläufe und Schatten gezielt mit Rauschen versah und so mehr Farbe oder Weichheit wahrnehmen ließ, als die Hardware tatsächlich ausgeben konnte. Die Farbpaletten waren sehr begrenzt, weshalb Spieleentwickler stark darauf angewiesen waren. Das Ergebnis war ein unverwechselbarer Look, der mit jener Zeit verbunden ist, in der Computer allgegenwärtig wurden, aufwendige Grafik aber noch nicht möglich war. Heute ist Dithering eher eine künstlerische Entscheidung als ein Behelf. Künstler und Spieleentwickler nutzen es, um diese Ära heraufzubeschwören oder innerhalb selbst gesetzter Farbgrenzen zu arbeiten. Beispiele sind das Point-and-Click-Spiel Basement Chronicle von Basement Studio, die Kunstwerke von @loackme und die experimentelle Fotografie von @aweusmeuh mit einer originalen Game-Boy-Kamera.
Heckel konzentriert sich darauf, Dithering auf React-Three-Fiber- und Three.js-Projekte anzuwenden, um ihnen einen eigenen Stil zu geben. Der Ansatz basiert auf Post-Processing, bei dem ein Shader auf eine bereits gerenderte Szene angewendet wird, ähnlich wie ein Bildfilter auf ein Foto. Um einen eigenen Effekt zu bauen, deklariert er eine Klasse, die Effect erweitert, definiert einen Fragment-Shader, der über den Konstruktor der Elternklasse aufgerufen wird, deklariert die nötigen Uniforms und umhüllt die Klasse mit wrapEffect, damit sie als JSX-Komponente innerhalb von EffectComposer verwendet werden kann.
Der erste Teil der Serie erklärt, wie die Dithering-Technik funktioniert, implementiert sie als Shader und entwickelt eine erste Version eines Dithering-Post-Processing-Effekts, der auf jede 3D-Szene angewendet werden kann.
Quelle: Hacker News · Zusammengefasst von HeadlinesBriefing