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.
Sumber: Hacker News · Diringkas oleh HeadlinesBriefing