The Art of Dithering and Retro Shading for the Web

Maxime Heckel spent several months building his personal website from the ground up, incorporating 3D work to showcase his shader and WebGL skills. Along the way, he came to understand how crucial post-processing is to making a scene look good. Custom post-processing gave him a creative outlet, and he developed a particular fondness for retro effects such as dithering, color quantization, and pixelization or CRT RGB cells. These subtle details create a pleasant contrast between the modern web and an era of technology that many 90s and early 2000s kids still long for.

Dithering began as an early graphics technique that tricked the viewer's brain into perceiving more color or smoothness in gradients and shadows than the hardware could output, by intentionally adding noise to an image or render. Palettes were very limited, so game designers depended on it. The result was a distinctive look tied to the period when computers became ubiquitous but advanced graphics were not yet possible. Today, dithering is more an artistic choice than a workaround, used by artists and game designers to evoke that era or to work within self-imposed color limits. Examples include Basement Studio's point-and-click game Basement Chronicle, the artwork of @loackme, and experimental photography by @aweusmeuh using an original Game Boy camera.

Heckel focuses on applying dithering to React Three Fiber and Three.js projects to give them a unique style. The approach centers on post-processing, which applies a shader to an already rendered scene much like an image filter on a photo. To build a custom effect, he declares a class extending Effect, defines a fragment shader called through the parent constructor, declares the necessary uniforms, and wraps the class with wrapEffect so it can be used as a JSX component within EffectComposer.

The first part of the series explains how the dithering technique works, implements it as a shader, and builds an initial version of a dithering post-processing effect that can be applied to any 3D scene.

أمضى Maxime Heckel عدة أشهر في بناء موقعه الشخصي من الصفر، وأدرج فيه أعمالًا ثلاثية الأبعاد لعرض مهاراته في الـ shaders وWebGL. وخلال ذلك أدرك مدى أهمية المعالجة اللاحقة في جعل المشهد يبدو جيدًا. وفرت له المعالجة اللاحقة المخصصة منفذًا إبداعيًا، وطور شغفًا خاصًا بالتأثيرات الكلاسيكية مثل التنقيط وتكميم الألوان والتبكسل أو خلايا RGB في شاشات CRT. تخلق هذه التفاصيل الدقيقة تباينًا ممتعًا بين الويب الحديث وحقبة تقنية ما زال كثير ممن وُلدوا في التسعينيات وأوائل الألفينيات يحنون إليها.

بدأ التنقيط كتقنية رسومية مبكرة تخدع دماغ المشاهد ليرى ألوانًا أو تدرجات أنعم في التظليلات مما يستطيع العتاد إخراجه، وذلك بإضافة ضوضاء متعمدة إلى الصورة أو المشهد المُصيَّر. كانت لوحات الألوان محدودة جدًا، لذلك اعتمد عليه مصممو الألعاب. وكانت النتيجة مظهرًا مميزًا مرتبطًا بفترة انتشار الحواسيب دون أن تكون الرسومات المتقدمة ممكنة بعد. أما اليوم فالتنقيط اختيار فني أكثر منه حلًا بديلًا، يستخدمه الفنانون ومصممو الألعاب لاستحضار تلك الحقبة أو للعمل ضمن قيود ألوان يفرضونها على أنفسهم. ومن الأمثلة لعبة Basement Chronicle للنقر والتشغيل من Basement Studio، وأعمال @loackme الفنية، والتصوير التجريبي لـ @aweusmeuh باستخدام كاميرا Game Boy أصلية.

يركز Heckel على تطبيق التنقيط على مشاريع React Three Fiber وThree.js لمنحها أسلوبًا فريدًا. يقوم النهج على المعالجة اللاحقة، التي تطبق shader على مشهد جرى تصييره مسبقًا، تمامًا كما يُطبَّق فلتر صورة على صورة فوتوغرافية. ولبناء تأثير مخصص، يُعلن عن صنف يمتد من Effect، ويعرّف fragment shader يُستدعى عبر مُنشئ الصنف الأب، ويصرّح بالـ uniforms اللازمة، ثم يُغلَّف الصنف بـ wrapEffect ليمكن استخدامه كمكوّن JSX داخل EffectComposer.

يشرح الجزء الأول من السلسلة طريقة عمل تقنية التنقيط، ويطبقها كـ shader، ويبني نسخة أولية من تأثير المعالجة اللاحقة بالتنقيط يمكن تطبيقها على أي مشهد ثلاثي الأبعاد.

Maxime Heckel কয়েক মাস ধরে শূন্য থেকে তাঁর ব্যক্তিগত ওয়েবসাইট তৈরি করেছেন, যেখানে তাঁর শেডার ও WebGL দক্ষতা দেখানোর জন্য 3D কাজ যুক্ত করেছেন। এই পথচলায় তিনি বুঝেছেন, একটি দৃশ্যকে সুন্দর দেখাতে পোস্ট-প্রসেসিং কতটা গুরুত্বপূর্ণ। কাস্টম পোস্ট-প্রসেসিং তাঁকে সৃজনশীল প্রকাশের একটি পথ দিয়েছে, এবং ডিথারিং, রঙ কোয়ান্টাইজেশন, পিক্সেলেশন বা CRT RGB সেলের মতো রেট্রো প্রভাবের প্রতি তাঁর বিশেষ টান জন্মেছে। এই সূক্ষ্ম বিবরণগুলো আধুনিক ওয়েব এবং সেই প্রযুক্তিযুগের মধ্যে একটি আনন্দদায়ক বৈপরীত্য তৈরি করে, যার জন্য ৯০-এর দশক ও ২০০০-এর গোড়ার অনেক মানুষ এখনও আক্ষেপ করেন।

ডিথারিং শুরু হয়েছিল একটি প্রাথমিক গ্রাফিক্স কৌশল হিসেবে, যা ছবি বা রেন্ডারে ইচ্ছাকৃতভাবে নয়েজ যোগ করে দর্শকের মস্তিষ্ককে এমনভাবে প্রভাবিত করত যে গ্রেডিয়েন্ট ও ছায়ায় হার্ডওয়্যার যতটা রঙ বা মসৃণতা দিতে পারে, তার চেয়ে বেশি অনুভূত হতো। প্যালেট খুবই সীমিত ছিল, তাই গেম ডিজাইনাররা এর ওপর নির্ভর করতেন। ফলাফল ছিল একটি স্বতন্ত্র চেহারা, যা সেই সময়ের সাথে জড়িত, যখন কম্পিউটার সর্বত্র ছড়িয়ে পড়ছিল কিন্তু উন্নত গ্রাফিক্স তখনও সম্ভব হয়নি। আজ ডিথারিং একটি সমাধানের চেয়ে বেশি একটি শৈল্পিক পছন্দ, যা শিল্পী ও গেম ডিজাইনাররা সেই যুগ জাগিয়ে তুলতে বা নিজেদের আরোপিত রঙের সীমার মধ্যে কাজ করতে ব্যবহার করেন। উদাহরণ হিসেবে রয়েছে Basement Studio-র পয়েন্ট-অ্যান্ড-ক্লিক গেম Basement Chronicle, @loackme-এর শিল্পকর্ম, এবং মূল Game Boy ক্যামেরায় @aweusmeuh-এর পরীক্ষামূলক ফটোগ্রাফি।

Heckel React Three Fiber ও Three.js প্রকল্পে ডিথারিং প্রয়োগ করেন, যাতে সেগুলোর একটি অনন্য শৈলী তৈরি হয়। এই পদ্ধতির মূল বিষয় পোস্ট-প্রসেসিং, যেখানে একটি আগে থেকে রেন্ডার হওয়া দৃশ্যে শেডার প্রয়োগ করা হয়, ঠিক যেমন একটি ছবিতে ইমেজ ফিল্টার লাগানো হয়। কাস্টম প্রভাব তৈরি করতে তিনি Effect-কে বর্ধিত করে একটি ক্লাস ঘোষণা করেন, প্যারেন্ট কনস্ট্রাক্টরের মাধ্যমে ডাকা একটি fragment shader সংজ্ঞায়িত করেন, প্রয়োজনীয় uniform ঘোষণা করেন, এবং তারপর ক্লাসটিকে wrapEffect দিয়ে মুড়ে দেন, যাতে এটি EffectComposer-এর ভেতরে একটি JSX কম্পোনেন্ট হিসেবে ব্যবহার করা যায়।

সিরিজের প্রথম অংশে ডিথারিং কৌশলটি কীভাবে কাজ করে তা ব্যাখ্যা করা হয়েছে, এটিকে একটি শেডার হিসেবে বাস্তবায়ন করা হয়েছে, এবং একটি প্রাথমিক ডিথারিং পোস্ট-প্রসেসিং প্রভাব তৈরি করা হয়েছে যা যেকোনো 3D দৃশ্যে প্রয়োগ করা যায়।

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.

Maxime Heckel dedicó varios meses a construir su sitio web personal desde cero, incorporando trabajos en 3D para mostrar sus habilidades en shaders y WebGL. En el proceso, comprendió lo crucial que es el postprocesado para que una escena se vea bien. El postprocesado personalizado le ofreció una salida creativa, y desarrolló una predilección especial por efectos retro como el dithering, la cuantización de color y la pixelización o las celdas RGB de los monitores CRT. Estos detalles sutiles crean un agradable contraste entre la web moderna y una era de la tecnología que muchos niños de los 90 y principios de los 2000 todavía añoran.

El dithering nació como una técnica temprana de gráficos que engañaba al cerebro del espectador para percibir más color o suavidad en degradados y sombras de los que el hardware podía generar, añadiendo deliberadamente ruido a una imagen o render. Las paletas eran muy limitadas, así que los diseñadores de videojuegos dependían de ella. El resultado fue un aspecto distintivo ligado a la época en que los ordenadores se volvieron omnipresentes pero los gráficos avanzados aún no eran posibles. Hoy, el dithering es más una elección artística que un recurso alternativo, utilizado por artistas y diseñadores de juegos para evocar esa era o para trabajar dentro de límites de color autoimpuestos. Entre los ejemplos están Basement Chronicle, el juego point-and-click de Basement Studio, la obra de @loackme y la fotografía experimental de @aweusmeuh con una cámara Game Boy original.

Heckel se centra en aplicar el dithering a proyectos de React Three Fiber y Three.js para darles un estilo único. El enfoque gira en torno al postprocesado, que aplica un shader a una escena ya renderizada, de forma muy similar a un filtro de imagen en una fotografía. Para crear un efecto personalizado, declara una clase que extiende Effect, define un fragment shader invocado a través del constructor padre, declara los uniforms necesarios y envuelve la clase con wrapEffect para poder usarla como componente JSX dentro de EffectComposer.

La primera parte de la serie explica cómo funciona la técnica de dithering, la implementa como shader y construye una primera versión de un efecto de postprocesado de dithering que puede aplicarse a cualquier escena 3D.

Maxime Heckel a passé plusieurs mois à construire son site personnel à partir de zéro, en y intégrant des travaux en 3D pour mettre en valeur ses compétences en shaders et en WebGL. Au fil de ce travail, il a compris à quel point le post-traitement est essentiel pour qu'une scène soit réussie. Le post-traitement personnalisé lui a offert un exutoire créatif, et il a développé une attirance particulière pour les effets rétro, comme le dithering, la quantification des couleurs, la pixellisation ou les cellules RGB des écrans CRT. Ces détails subtils créent un contraste agréable entre le web moderne et une époque technologique que beaucoup d'enfants des années 90 et du début des années 2000 regrettent encore.

Le dithering est né comme une technique graphique ancienne qui trompait le cerveau du spectateur pour lui faire percevoir plus de couleurs ou de douceur dans les dégradés et les ombres que le matériel ne pouvait en produire, en ajoutant volontairement du bruit à une image ou à un rendu. Les palettes étaient très limitées, et les créateurs de jeux vidéo en dépendaient. Le résultat était un rendu distinctif, lié à une période où les ordinateurs se répandaient alors que les graphismes avancés n'étaient pas encore possibles. Aujourd'hui, le dithering relève davantage du choix artistique que de la solution de contournement : artistes et game designers l'utilisent pour évoquer cette époque ou pour travailler dans des limites de couleurs qu'ils s'imposent. Parmi les exemples figurent Basement Chronicle, le jeu point-and-click de Basement Studio, les œuvres de @loackme, et la photographie expérimentale de @aweusmeuh réalisée avec un appareil Game Boy d'origine.

Heckel s'attache à appliquer le dithering aux projets React Three Fiber et Three.js pour leur donner un style unique. La méthode repose sur le post-traitement, qui applique un shader à une scène déjà rendue, un peu comme un filtre d'image sur une photo. Pour créer un effet personnalisé, il déclare une classe qui étend Effect, définit un fragment shader appelé via le constructeur parent, déclare les uniforms nécessaires, puis enveloppe la classe avec wrapEffect afin de pouvoir l'utiliser comme composant JSX au sein d'EffectComposer.

La première partie de la série explique le fonctionnement de la technique du dithering, l'implémente sous forme de shader et construit une première version d'un effet de post-traitement par dithering applicable à n'importe quelle scène 3D.

Maxime Heckel ने कई महीनों तक अपनी व्यक्तिगत वेबसाइट को शुरू से बनाया, जिसमें अपने शेडर और WebGL कौशल दिखाने के लिए 3D कार्य शामिल किया। इस दौरान उन्हें समझ आया कि किसी दृश्य को अच्छा दिखाने में पोस्ट-प्रोसेसिंग कितनी महत्वपूर्ण है। कस्टम पोस्ट-प्रोसेसिंग ने उन्हें एक रचनात्मक माध्यम दिया, और उन्हें डिदरिंग, रंग क्वांटाइज़ेशन, पिक्सेलाइज़ेशन या CRT RGB सेल जैसे रेट्रो प्रभावों से विशेष लगाव हो गया। ये सूक्ष्म विवरण आधुनिक वेब और तकनीक के उस दौर के बीच एक सुखद अंतर पैदा करते हैं, जिसे 90 के दशक और 2000 के दशक की शुरुआत के बहुत से बच्चे आज भी याद करते हैं।

डिदरिंग एक प्रारंभिक ग्राफ़िक्स तकनीक के रूप में शुरू हुई, जो किसी छवि या रेंडर में जानबूझकर नॉइज़ जोड़कर दर्शक के मस्तिष्क को यह महसूस कराती थी कि ग्रेडिएंट और छायाओं में हार्डवेयर से अधिक रंग या चिकनापन है। पैलेट बहुत सीमित थे, इसलिए गेम डिज़ाइनर इस पर निर्भर रहते थे। परिणाम एक विशिष्ट रूप था, जो उस दौर से जुड़ा है जब कंप्यूटर हर जगह पहुँचने लगे थे, लेकिन उन्नत ग्राफ़िक्स अभी संभव नहीं थे। आज डिदरिंग एक समाधान से अधिक एक कलात्मक विकल्प है, जिसे कलाकार और गेम डिज़ाइनर उस युग को जगाने या स्व-निर्धारित रंग सीमाओं के भीतर काम करने के लिए इस्तेमाल करते हैं। उदाहरणों में Basement Studio का पॉइंट-एंड-क्लिक गेम Basement Chronicle, @loackme की कलाकृतियाँ, और मूल Game Boy कैमरे से @aweusmeuh की प्रायोगिक फ़ोटोग्राफ़ी शामिल हैं।

Heckel React Three Fiber और Three.js प्रोजेक्ट्स पर डिदरिंग लागू करने पर ध्यान देते हैं ताकि उन्हें एक अनोखी शैली मिले। यह तरीका पोस्ट-प्रोसेसिंग पर केंद्रित है, जो पहले से रेंडर किए गए दृश्य पर शेडर लागू करता है, ठीक वैसे ही जैसे किसी फ़ोटो पर इमेज फ़िल्टर लगाया जाता है। कस्टम प्रभाव बनाने के लिए वे Effect को विस्तारित करने वाली एक क्लास घोषित करते हैं, पैरेंट कंस्ट्रक्टर के माध्यम से बुलाया जाने वाला फ़्रैगमेंट शेडर परिभाषित करते हैं, आवश्यक uniforms घोषित करते हैं, और फिर क्लास को wrapEffect से लपेटते हैं ताकि उसे EffectComposer के भीतर JSX घटक के रूप में उपयोग किया जा सके।

श्रृंखला के पहले भाग में डिदरिंग तकनीक कैसे काम करती है यह समझाया गया है, इसे एक शेडर के रूप में लागू किया गया है, और एक प्रारंभिक डिदरिंग पोस्ट-प्रोसेसिंग प्रभाव बनाया गया है जिसे किसी भी 3D दृश्य पर लगाया जा सकता है।

Maxime Heckel menghabiskan beberapa bulan membangun situs pribadinya dari awal, dengan memasukkan karya 3D untuk memamerkan keterampilannya dalam shader dan WebGL. Dalam prosesnya, ia memahami betapa pentingnya post-processing agar sebuah adegan terlihat bagus. Post-processing kustom memberinya saluran kreatif, dan ia mengembangkan kesukaan khusus pada efek retro seperti dithering, kuantisasi warna, pikselisasi, atau sel RGB CRT. Detail-detail halus ini menciptakan kontras yang menyenangkan antara web modern dan era teknologi yang masih dirindukan banyak anak 90-an dan awal 2000-an.

Dithering berawal sebagai teknik grafis awal yang mengelabui otak penonton agar merasakan lebih banyak warna atau kehalusan pada gradasi dan bayangan daripada yang bisa dihasilkan perangkat keras, dengan sengaja menambahkan noise pada gambar atau render. Palet warna sangat terbatas, jadi desainer game sangat bergantung padanya. Hasilnya adalah tampilan khas yang terkait dengan masa ketika komputer mulai merambah di mana-mana, tetapi grafis canggih belum memungkinkan. Kini dithering lebih merupakan pilihan artistik ketimbang solusi darurat, dipakai oleh seniman dan desainer game untuk menghadirkan kembali era tersebut atau bekerja dalam batasan warna yang mereka tetapkan sendiri. Contohnya termasuk Basement Chronicle, game point-and-click dari Basement Studio, karya seni @loackme, dan fotografi eksperimental @aweusmeuh yang menggunakan kamera Game Boy orisinal.

Heckel berfokus pada penerapan dithering pada proyek React Three Fiber dan Three.js untuk memberi gaya yang unik. Pendekatannya berpusat pada post-processing, yang menerapkan shader pada adegan yang sudah dirender, mirip seperti filter gambar pada foto. Untuk membuat efek kustom, ia mendeklarasikan kelas yang memperluas Effect, mendefinisikan fragment shader yang dipanggil melalui konstruktor induk, mendeklarasikan uniform yang diperlukan, lalu membungkus kelas tersebut dengan wrapEffect agar dapat digunakan sebagai komponen JSX di dalam EffectComposer.

Bagian pertama dari seri ini menjelaskan cara kerja teknik dithering, mengimplementasikannya sebagai shader, dan membangun versi awal efek post-processing dithering yang dapat diterapkan pada adegan 3D apa pun.

Maxime Heckelは数か月かけて個人サイトをゼロから構築し、シェーダーとWebGLのスキルを示すために3Dの作品を取り入れました。その過程で、シーンを良く見せるにはポストプロセッシングがいかに重要かを理解しました。カスタムのポストプロセッシングは彼にとって創造的なはけ口となり、ディザリング、色の量子化、ピクセル化、CRTのRGBセルといったレトロな効果に特別な愛着を抱くようになりました。こうした繊細なディテールは、現代のWebと、90年代や2000年代初頭に育った多くの人が今も懐かしむ技術の時代との間に心地よい対比を生み出します。

ディザリングは、初期のグラフィックス技術として生まれました。画像やレンダリング結果に意図的にノイズを加えることで、ハードウェアが出力できる以上の色や滑らかさをグラデーションや影に見せ、視聴者の脳を錯覚させる技法です。当時はパレットが非常に限られていたため、ゲームデザイナーはこれに頼っていました。その結果生まれたのは、コンピューターが普及し始めたものの高度なグラフィックスはまだ不可能だった時代と結びついた、独特の見た目です。今日のディザリングは回避策というより芸術的な選択であり、アーティストやゲームデザイナーがその時代を喚起するため、あるいは自ら課した色の制限の中で作品を作るために用いています。例としては、Basement Studioのポイント&クリックゲーム『Basement Chronicle』、@loackmeのアートワーク、オリジナルのGame Boyカメラで撮影した@aweusmeuhの実験的な写真などがあります。

Heckelは、React Three FiberやThree.jsのプロジェクトにディザリングを適用し、独自のスタイルを与えることに注力しています。そのアプローチはポストプロセッシングが中心で、写真に画像フィルターをかけるように、すでにレンダリングされたシーンにシェーダーを適用します。カスタムエフェクトを作るには、Effectを継承したクラスを宣言し、親コンストラクターを通じて呼び出されるフラグメントシェーダーを定義し、必要なuniformを宣言したうえで、そのクラスをwrapEffectで包み、EffectComposer内でJSXコンポーネントとして使えるようにします。

シリーズの第1部では、ディザリング技法の仕組みを解説し、それをシェーダーとして実装し、任意の3Dシーンに適用できる初期バージョンのディザリング・ポストプロセッシング・エフェクトを構築します。

Maxime Heckel passou vários meses construindo seu site pessoal do zero, incorporando trabalhos em 3D para mostrar suas habilidades com shaders e WebGL. No processo, ele percebeu o quanto o pós-processamento é fundamental para que uma cena fique bonita. O pós-processamento personalizado lhe ofereceu uma saída criativa, e ele desenvolveu uma afinidade especial por efeitos retrô como dithering, quantização de cores, pixelização e as células RGB de telas CRT. Esses detalhes sutis criam um contraste agradável entre a web moderna e uma era da tecnologia que muitos nascidos nos anos 90 e no início dos anos 2000 ainda sentem falta.

O dithering começou como uma técnica gráfica antiga que enganava o cérebro do espectador para que percebesse mais cor ou suavidade em gradientes e sombras do que o hardware era capaz de produzir, adicionando ruído de propósito a uma imagem ou renderização. As paletas eram muito limitadas, e por isso os designers de jogos dependiam dessa técnica. O resultado foi um visual característico, ligado ao período em que os computadores se tornaram onipresentes, mas os gráficos avançados ainda não eram possíveis. Hoje, o dithering é mais uma escolha artística do que um recurso improvisado, usado por artistas e designers de jogos para evocar aquela época ou para trabalhar dentro de limites de cor autoimpostos. Exemplos incluem o Basement Chronicle, jogo point-and-click da Basement Studio, a arte de @loackme e a fotografia experimental de @aweusmeuh feita com uma câmera Game Boy original.

Heckel se concentra em aplicar o dithering a projetos de React Three Fiber e Three.js para dar a eles um estilo único. A abordagem gira em torno do pós-processamento, que aplica um shader a uma cena já renderizada, de forma parecida com um filtro de imagem em uma foto. Para criar um efeito personalizado, ele declara uma classe que estende Effect, define um fragment shader chamado pelo construtor pai, declara os uniforms necessários e envolve a classe com wrapEffect para que ela possa ser usada como componente JSX dentro do EffectComposer.

A primeira parte da série explica como funciona a técnica de dithering, a implementa como shader e constrói uma versão inicial de um efeito de pós-processamento com dithering que pode ser aplicado a qualquer cena 3D.

Максим Хекель несколько месяцев создавал свой личный сайт с нуля, включив в него 3D-работы, чтобы продемонстрировать навыки в шейдерах и WebGL. По ходу дела он понял, насколько важна постобработка для того, чтобы сцена выглядела хорошо. Пользовательская постобработка стала для него творческим выходом, и он особенно полюбил ретро-эффекты, такие как дизеринг, квантование цвета, пикселизацию и RGB-ячейки ЭЛТ-мониторов. Эти тонкие детали создают приятный контраст между современным вебом и эпохой технологий, по которой до сих пор тоскуют многие люди, выросшие в 90-х и начале 2000-х.

Дизеринг возник как ранняя графическая техника, которая обманывала мозг зрителя, заставляя его воспринимать больше цвета или плавности в градиентах и тенях, чем могло выдать железо, за счёт намеренного добавления шума в изображение или рендер. Палитры были очень ограничены, поэтому разработчики игр полагались на эту технику. Результатом стал характерный облик, связанный с периодом, когда компьютеры становились повсеместными, но продвинутая графика ещё не была возможна. Сегодня дизеринг скорее художественный выбор, чем обходной путь: художники и геймдизайнеры используют его, чтобы вызвать ту эпоху или работать в рамках добровольно заданных ограничений по цвету. Примеры включают point-and-click игру Basement Chronicle от Basement Studio, работы @loackme и экспериментальную фотографию @aweusmeuh, снятую на оригинальную камеру Game Boy.

Хекель сосредоточен на применении дизеринга к проектам на React Three Fiber и Three.js, чтобы придать им уникальный стиль. Подход основан на постобработке, которая применяет шейдер к уже отрендеренной сцене, подобно фильтру изображения для фотографии. Чтобы создать пользовательский эффект, он объявляет класс, наследующий Effect, определяет фрагментный шейдер, который вызывается через конструктор родителя, объявляет необходимые uniform-переменные и оборачивает класс функцией wrapEffect, чтобы его можно было использовать как JSX-компонент внутри EffectComposer.

Первая часть серии объясняет, как работает техника дизеринга, реализует её в виде шейдера и создаёт начальную версию эффекта постобработки с дизерингом, который можно применить к любой 3D-сцене.

Maxime Heckel 花了几个月时间从零开始搭建自己的个人网站，并加入了 3D 作品来展示他的着色器和 WebGL 技能。在这个过程中，他逐渐意识到后期处理对于让场景看起来出色有多么关键。自定义后期处理为他提供了一个创意出口，他也对抖动、色彩量化、像素化或 CRT RGB 单元等复古效果产生了特别的偏爱。这些细微的细节在现代网络与许多 90 年代和 21 世纪初出生的人仍然怀念的技术时代之间形成了一种令人愉悦的对比。

抖动最初是一种早期的图形技术，它通过有意在图像或渲染结果中加入噪点，欺骗观众的大脑，使其在渐变和阴影中感知到比硬件实际输出更多的颜色或更平滑的过渡。当时的调色板非常有限，因此游戏设计师非常依赖这种技术。其结果是一种独特的视觉风格，与计算机开始普及、但高级图形尚未实现的时代紧密相连。如今，抖动更多是一种艺术选择，而非权宜之计，艺术家和游戏设计师用它来唤起那个时代，或在自我设定的颜色限制内进行创作。例子包括 Basement Studio 的点击式游戏 Basement Chronicle、@loackme 的艺术作品，以及 @aweusmeuh 使用原版 Game Boy 相机拍摄的实验摄影。

Heckel 专注于将抖动应用于 React Three Fiber 和 Three.js 项目，以赋予它们独特的风格。该方法以后期处理为核心，即像对照片使用图像滤镜一样，对已渲染的场景应用着色器。要构建自定义效果，他会声明一个继承自 Effect 的类，定义通过父类构造函数调用的片段着色器，声明必要的 uniform 变量，然后使用 wrapEffect 包装该类，使其能够在 EffectComposer 中作为 JSX 组件使用。

本系列的第一部分讲解了抖动技术的工作原理，将其实现为着色器，并构建了一个可应用于任何 3D 场景的初始抖动后期处理效果。