3 puan yazan GN⁺ 2025-10-31 | 2 yorum | WhatsApp'ta paylaş
  • Siyah-beyaz piksel dizileriyle birden çok ton seviyesini görsel olarak yeniden üretme ilkesini açıklar
  • Dithering, gerçekte olandan daha fazla renk veya ton seviyesini optik yanılsamayla ifade etme tekniğidir
  • Ordered dithering yönteminde, her pikselin parlaklığına göre siyah ya da beyazı belirlemek için threshold map kullanılır
  • Bu süreçte piksel yoğunluğundaki değişim, gri ton hissini oluşturur ve özgün görüntünün biçimini korur
  • Yazı, dithering’in temel kavramlarını ele alan 3 bölümlük serinin ilk yazısı; devamında threshold map üretim algoritması ve error diffusion ele alınacak

Dithering’in kavramı ve çalışma prensibi

  • Dithering, sınırlı renklerle daha fazla ton ifade etmek için kullanılan görsel bir tekniktir
    • Siyah-beyaz pikselleri belirli desenlerle dizerek birden çok gri tonlu yanılsama üretir
    • Gerçek renk sayısını artırmadan görsel çeşitlilik sağlar
  • Yazıda örnek olarak gri tonlu görüntüler kullanılıyor
    • Yalnızca siyah ve beyaz gösterebilen bir ekranda her piksel, en yakın renge (siyah veya beyaz) dönüştürülür
    • Basit dönüştürmede ton geçişleri sertleşir ve ayrıntılı gölge bilgisi kaybolur
  • Dithering, bazı pikselleri bilinçli olarak karşıt renge çevirerek daha yumuşak ton geçişleri oluşturur
    • Koyu alanlarda siyah piksel yoğunluğu artırılır, açık alanlarda ise beyaz piksel yoğunluğu artırılır
    • Sonuçta piksel yoğunluğu farkı, gri ton yanılsamasını oluşturur

Ordered Dithering ve threshold map

  • Ordered dithering, threshold map kullanan basit bir dithering yöntemidir
    • Threshold map, 0’dan (en koyu) 1’e (en açık) uzanan parlaklık değerleri ızgarasından oluşur
  • Her giriş pikselinin parlaklığı, ilgili konumdaki eşik değeriyle karşılaştırılır
    • Parlaklık eşik değerinden büyükse beyaz, küçükse siyah olarak ayarlanır
    • Bu işlem tüm pikseller için tekrarlanarak siyah-beyaz desenli bir görüntü üretilir
  • Threshold map, giriş görüntüsünün parlaklık dağılımına göre uygun siyah-beyaz yoğunluk desenleri verecek şekilde tasarlanır
    • Açık alanlarda beyaz oranı yüksektir, koyu alanlarda siyah oranı yüksektir
    • Bu yoğunluk farkı, uzaktan bakıldığında gri ton gibi görünen etkiyi oluşturur

Büyük görüntü işleme ve görsel etki

  • Büyük bir görüntüye dithering uygulanırken threshold map genişletilerek tüm görüntü boyutuna uyarlanır
    • Her pikselin parlaklığını eşik değeriyle karşılaştırıp siyah-beyaza dönüştüren aynı ilke uygulanır
  • Sonuç olarak görüntü yalnızca iki renk kullanır, ancak özgün ton yapısını korur
    • Renk sayısı azalsa da piksel yoğunluğu değişimi sayesinde görsel ayrıntı ifadesi korunur

Dithering’in anlamı ve serinin yapısı

  • Dithering, renk eklemek yerine renkleri azaltarak görsel çeşitlilik üreten bir tekniktir
    • Yazar bunu “eldekiyle mümkün olanın en fazlasını üretme süreci” olarak tanımlıyor
  • Bu yazı, 3 bölümlük serinin ilk bölümü olarak temel prensipler ve görsel kavrayışa odaklanıyor
    • Sonraki yazıda threshold map üretim algoritması, son yazıda ise error diffusion ele alınacak
  • Seri, dithering’in farklı algoritmik yaklaşımları ve görsel sonuçlarındaki farkları incelemeyi amaçlıyor

Yazar ve proje tanıtımı

  • visualrambling.space, Damar’ın yürüttüğü kişisel bir proje
    • Farklı konuları görsel olarak inceleyen ve açıklayan interaktif içerikler üretiyor
    • Ele alınan konular arasında Three.js, WebGL, dithering, görselleştirme, interaktif öğrenme yer alıyor
  • Damar, X/Twitter hesabı (@damarberlari) üzerinden yeni görsel makaleler paylaşmaya devam edecek

2 yorum

 
GN⁺ 2025-10-31
Hacker News görüşleri
  • Bu halftone tekniği. Yani, gerçekte olandan daha fazla renge sahipmiş gibi gösteren bir yöntem; ama bana göre bu dithering değil
    bence dithering, palet yeterince büyük olmadığında ortaya çıkan banding sorununu ortadan kaldırma tekniği
    burada gösterilen halftone, 2 renkli paleti yaklaşık 20 renge genişletiyor ama banding hâlâ belirgin
    bu tür banding ya çok daha fazla renk kullanılarak (ör. 256 seviyeli gri tonlama, RGB ise 256³) ya da dithering ile giderilebilir
    muhtemelen sonda tanıtımı yapılan error diffusion tekniği benim kastettiğim şey
    dithering'in özü gürültüdür, ama bu demoda hiç gürültü yok. Her şey deterministik
    yine de sunumun kendisi gerçekten harikaydı

    • error-diffusion dithering ya da blue-noise/white-noise pattern kullanan dithering de aslında deterministiktir
      genel olarak gürültü, quantization sürecinde ortaya çıkar ve dithering bu gürültünün şekillendirilmesi tekniğidir
      burada kullanılan Bayer-matrix ordered dithering, gürültüyü yüksek frekans bölgesinde toplayarak göze daha az çarpmasını sağlar, ama düşük frekans bölgesinde banding yine kalır
      Dave Long'un dediği gibi Bresenham line algorithm da bir tür dithering olarak görülebilir. Burada sinyal, parlaklık değil kalemin konumu olur
      bununla ilgili bir tartışma birkaç gün önce de vardı — şu başlığa bakabilirsiniz
    • Söylediğin şey üzerine baktım; bu tür tekniklere de hâlâ ordered dithering deniyormuş
      Wikipedia maddesi
    • Banding'i azaltan veya ortadan kaldıran dithering gerçekten etkileyici
      eskiden NeXT renkli makineler 12 bitlik (kanal başına 4 bit) ekranlara sahipti, ama dithering iyi kullanıldığında 24 bit true color gibi görünüyordu
    • Ben bir pixel artistim ve bu tekniği kullanan herkes buna dithering diyor
    • Adı üstünde, buna ordered dithering deniyor
  • Daniel Shiffman'ın iki Coding Train videosunu öneririm
    Turning Images into Dots: The Magic of Dithering
    Coding Challenge 181: Weighted Voronoi Stippling

  • Konu ilgi çekiciydi. Animasyonlar da güzeldi ve emek verildiği belliydi
    ama bu tür interaktif sunumlar, geleneksel blog yazılarına göre daha zor okunuyor
    yazının yapısı bir bakışta anlaşılmıyor ve cümle cümle okumak gerektiği için hızlıca göz gezdirmek zorlaşıyor

    • Buna blogdan çok videoya yakın bir format olarak bakmak daha doğru olabilir
      kullanıcının hızını ayarlayabildiği bir interaktif video gibi
      ben de normalde metni tercih ederim ama bunun gibi bir format hoş bir varyasyon bence
  • Birçok tasarım projesinde ordered ve error diffusion ditheringi görsel bir dil olarak kullandım
    özellikle tech/computer/blockchain ile ilgili işlerde, statik veya animasyonlu biçimde değerlendirdim
    bu eski tekniklerde tuhaf bir sıcaklık ve nostalji var; bu da onları yeni fikirlerle birleştirmek için uygun kılıyor
    işlerimden örnekler Instagram'da:
    D.Y.O.R. / Printed / Titles / Dithering deneyi

    • Güzel bağlantıydı. Ben de retro tarzı bir portföy hazırlarken retro shader deniyorum
      siteme göz atın: olsz.me
  • Bir zamanlar iki dithering türü arasında geçiş yapan bir şey yapmıştım
    GitHub projesi

  • Bunu gerçekten sevmek istiyordum ama hareketli desenlerin üzerindeki metni okumak çok zordu

    • Ben de yaklaşık 7 saniye dayanabildim
  • Görselleştirme biçimi güzeldi ama threshold map kısmını anlayamadım
    haritanın nasıl oluşturulduğu ve eşik değerlerinin nasıl belirlendiği yeterince açıklanmamıştı
    yazar için fazla bariz olduğundan mı atlandı bilmiyorum

    • ordered threshold map oluşturmak epey karmaşık fikirler gerektiriyor
      asıl mesele, 'threshold' kavramını akılda tutmak. Gri bir piksel, eşik değerine göre siyah ya da beyaza dönüşür
      örneğin dithered_color = (raw_color > threshold_color) ? white : black
      threshold rastgele de seçilebilir. Ortalama değeri 0.5 olduğu sürece orijinal grinin iyi bir yaklaşımı elde edilir
      önemli olan, beyaz pikseller giderek artarken birbirine yapışmamalarını sağlamak
      %50 gri için checkerboard pattern, %25 içinse 2x2 içinde tek bir beyaz piksel gibi tasarlanabilir
      bu tür denemeleri ShaderToy üzerinde bizzat yapmak eğlenceli olur
      1. bölümde threshold map, 3. bölümde ise error diffusion dithering ele alınacakmış
    • Görselleştirme güzeldi ama ben de threshold map kısmında kafam karıştı
      başta girdinin bir 'ikili görüntü' olduğunu sanmıştım, sonra gri alanların girdi olarak kullanıldığını gösterdi
    • Bir sonraki bölüm bana Dragon Ball Z fragmanı gibi hissettirdi
  • dithering, 10 bit rengi desteklemeyen monitörlerde bile görüntünün yeterince 10 bit gibi görünmesini sağlar
    banding kaybolur ve gürültü, renk derinliği eksikliğini gizler
    yani bu teknik bugün de faydalı; sadece retro art için değil

    • Evet, ama çoğu yazılım bunu yapmıyor
      insanların aklına hâlâ sadece palette dithering geliyor
      8 bit/kanal yeterli değil. Gamma düzeltmesi yüzünden gerçekte yaklaşık 220 seviye ediyor
      ben de bu sorunu çözmeye yardımcı olmak için Rust crate dithereens'i sürdürüyorum
      README'nin üstündeki gradient'e bakınca neden önemli olduğu hemen anlaşılıyor
    • Modern baskıda da dithering kullanılıyor
      yüksek bit derinlikli görüntüler 10 bit ya da 8 bite düşürülürken random dithering yeterince etkili oluyor
      Photoshop, 16 bit→8 bit dönüşümünde varsayılan olarak dithering uygular
      başka yazılımlar bunu yapmadığı için, büyük poster bastığınızda banding oluşursa bunu hemen fark ediyorsunuz
    • LCD paneller çok uzun zamandır daha yüksek bit derinliğini taklit etmek için temporal dithering kullanıyor
      6 bit TN panelleri 8 bit gibi gösteriyordu; şimdi HDR-10 için de kullanılıyor
      bu yöntem, pikselleri hızlıca titreştirerek renkleri karıştıran basit bir algoritma
      Frame rate control Wikipedia maddesi
  • Sunum formatı harikaydı; sonraki bölümü de merakla bekliyorum
    eskiden ZX Spectrum Raytracer üzerinde ordered dithering denemiştim, uygulaması kolaydı ve sonuç iyi görünüyordu
    proje bağlantısı
    80'lerde performans sorunları yüzünden pek kullanılmamış olabilir. 90'larda Windows 3.1 ya da Monkey Island VGA arka planlarında gördüğümü hatırlıyorum

  • Demo harikaydı ama dithering'i 'daha fazla ara tonun yanılsaması' diye tanımlamak tam doğru değil gibi geliyor
    dither edilmiş bir görüntüyü low-pass filterdan geçirirseniz, o ara tonlar gerçekten vardır
    tıpkı class-D amplifierın darbe sinyali üretmesine rağmen filtre sonrası gerçek analog sese dönüşmesi gibi
    sonuçta bu filtrenin işini gören şey bizim görme sistemimiz ve mesafemiz

    • Yine de ben buna yanılsama derim
      dikkatle bakarsanız o rengin gerçekte orada olmadığını anlarsınız
      siyah-beyaz piksellerden grinin algılandığını görürsünüz ama bunun aynı zamanda bir göz yanılsaması olduğunu da fark edersiniz
      bu yüzden 'illusion' ifadesinin uygun olduğunu düşünüyorum
 
chinnotching 2025-10-31

Metni çıkarıp yalnızca videoyla amfide ders anlatan interaktif videoya yaklaşım olarak, kürsüyü parçalayacak kadar fırtına gibi havalı bir iş. Görüntünün gri tonlamasını 3D katmanlara ayırarak gösterdiği sahnenin son derece anlaşılır bir anlatım sunduğunu düşünüyorum.