Web grafikleri için dithering ve retro gölgeleme teknikleri anlatıldı
Öne çıkanlar
- Sıralı dithering yöntemi, Bayer matrisi eşik değerlerini kullanarak pikselleri renk paletine dağıtıyor.
- Pikselleştirme etkisi, UV koordinatlarının GLSL içinde bir ızgaraya yuvarlanmasıyla elde ediliyor.
- CRT monitör görünümü, yarı hücre kaydırmalı RGB hücre desenlerinin gölgelendiriciye eklenmesiyle simüle ediliyor.
Geliştirici Maxime Heckel, kişisel web sitesinde kullandığı 3D sahneler üzerinden React Three Fiber ve WebGL tabanlı retro gölgeleme tekniklerini detaylandırdı. Çalışmada, modern web projelerinde retro estetik yakalamak amacıyla kullanılan dithering, renk nicemleme ve CRT monitör hücre simülasyonları ele alındı. İşlemler, sahneye sonradan uygulanan özel son işleme gölgelendiricileri aracılığıyla yürütülüyor.
Makalede beyaz gürültü, Bayer matrisi kullanan sıralı dithering ve mavi gürültü yöntemleri karşılaştırmalı kod örnekleriyle sunuldu. Parlaklık temelli piksellerin eşik değerlerine göre siyah-beyaz veya gri tonlara dönüştürüldüğü sistemde, özel renk paletlerinin UV koordinatları üzerinden örneklendiği aktarıldı. Ayrıca doku UV koordinatlarını ızgaraya sabitleyerek pikselleştirme sağlayan düşük çözünürlük yöntemleri açıklandı.
Eski tüplü ekranların görünümünü taklit etmek için CRT monitörlerin gölge maskesi mekanizması GLSL üzerinde simüle edildi. Kırmızı, yeşil ve mavi fosfor hücrelerinin dizilimini temsil eden aralık ızgarası yapısı, modern tarayıcılarda retro görüntü katmanı olarak kurgulandı. Yazar, bu son işleme katmanlarının hacimsel ışın yürütme gibi gelişmiş üç boyutlu tekniklerle bir arada çalışabileceğini kaydetti.
Bu özet yapay zekâ ile hazırlanmıştır; ayrıntılar ve doğrulama için orijinal kaynağa başvurun.