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シーンに適用できる初期バージョンのディザリング・ポストプロセッシング・エフェクトを構築します。
出典: Hacker News · 要約：HeadlinesBriefing