holodepth

Three.js · Gölge haritası · Artefaktlar

3D grafiklerin gölge paradoksu: Shadow Acne ve Bias yönetimi

Harita çözünürlüğü ile piksel gerçeği çarpıştığında ortaya çıkan “sivilce” ve onu düzeltirken açılan yeni kapılar.

Three.js sahnelerinde gerçekçiliği belirleyen unsurlardan biri gölgelerdir. Ancak gölge, saf matematiksel derinlik testi ile ekran piksellerinin sınırlı hassasiyetinin birleştiği yerde bazı artefaktlar üretir. Bunların başında gelen Shadow Acne, bir geliştiricinin gölge haritalarıyla mücadelesinin tipik başlangıç noktasıdır.

Bağlam: Gölge girişi, Shadow map nedir?, BasicShadowMap (düşük çözünürlükte acne daha kolay görülür), VSM’de light bleeding (bias düzleminin başka ucu).

Shadow Acne (gölge sivilcelenmesi) nedir?

Shadow Acne, bir yüzeyin kendi üzerine hatalı biçimde gölge düşürmesi durumudur. Görsel olarak tekrarlayan çizgiler, kirli doku veya titreyen “sivilce” izlenimi verir.

Neden oluşur?

Gölge haritaları, ışığın bakış açısından üretilen derinlik dokularıdır (depth map). Çözünürlük sınırlıdır; örnekleme ve yüzey eğimi nedeniyle bir pikselin hesaplanan derinliği, gerçek yüzeyin milimetrik olarak “altında” kalabilir. Algoritma o noktada yüzeyin ışığı kendi üzerinde kestiğini sanır ve yanlışlıkla gölge rengi atar.

Shadow test mantığı: ışık ve kamera görüşü, derinlik karşılaştırması Sol panelde shadow map ve Z harita; sağda kamera, yüzey noktası P ve Z piksel. Ortada eğri ve parlak nokta aynı texel ve test noktasını gösterir. Gölge koşulları: Z piksel büyükse Z haritadan; gölgelendirmede Z harita artı bias ile karşılaştırılır. Formül altında Three.js kullanıcıları için bias işaretinin ters görünebileceğine dair kısa not vardır. Shadow test mantığı Harita derinliği ↔ gölgelendiricide hesaplanan derinlik Işık görüşü · shadow map L ışın (ışığa göre) harita texel Z_map haritada saklı Kamera görüşü · yüzey yüzey P cam görüntüleme ışını ışığa göre derinlik ışık doğrultusunda mesafe Z_map Z_pixel P · yüzey noktası aynı texel → aynı test noktası (aynı karşılaştırma noktası) Z_pixel > Z_map → gölge Z_pixel > Z_map + bias → gölge Not · Işığa göre derinlik yönü ters ise (veya kurulum buna denk geliyorsa), Three.js’te bias işareti bu yazılıştan farklı görünebilir — işareti sahneye göre seçin.
Önce aynı yüzey noktası için iki derinlik okunur; gölge, bu ikisinin karşılaştırmasıyla belirlenir. bias eşiği gölgelendiricide kullanılır.
Problemler ve çözümler: Shadow Acne, bias, Peter Panning Acne yüzeyde self-shadow titremesi; bias eşiği yukarı kaydırarak düzeltir; aşırı bias Peter Panning ile gölgeyi zeminden koparır. Problemler ve çözümler Aynı karşılaştırma mantığı — farklı sonuçlar Acne self-shadow Z ≈ eşik · yüzey kendini gölgeler Bias Z_map+bias Z_map offset +bias Eşik yukarı · offset · stabil Peter Panning Z_pixel ≫ Z_map + bias kopuk gölge (zeminden boşluk)

Shadow Acne eşikte titreme; bias tolerans ekler; fazla bias Peter Panning yapar.

shadow.normalBias eğimli yüzeylerde ek kaydırma.

Diyagramlar neyi kanıtlamıyor?

Bu iki şekil kavramsal özetdir; sahneye özel milimetrik değer üretmezler. Üretimde acne’yi kapatırken yine de Shadow Playground veya kendi sahnenizde küçük adımlarla ölçüm yapmanız gerekir — özellikle mapSize ve gölge kutusu daraldıkça eşik davranışı değişir.

Çözüm: shadow.bias

Shadow Acne’yi yumuşatmak için en yaygın araç Light.shadow.bias parametresidir. Bias, derinlik karşılaştırmasına eklenen küçük bir tolerans payıdır.

Çalışma mantığı: Işığa göre mesafe hesaplanırken yüzey biraz daha uzakta varsayılır; böylece yüzey, haritadaki hatalı “önde” değerin önüne geçer ve sivilcelenme azalır. 

// Three.js — örnek (sahneye göre ayarlayın)
directionalLight.shadow.bias = -0.0001;

HoloDepth notu

Bias değeri sahnenin ölçeğine, gölge kamerasının near / far aralığına ve harita çözünürlüğüne sıkı bağlıdır. Evrensel bir “en iyi” sayı yoktur; en küçük etkili değeri deneme-yanılma ile bulmak gerekir.

Önce harita ve kutu, sonra bias

Bias’ı «ana düğme» gibi kullanmadan önce mapSize ile texel yoğunluğunu ve gölge frustumunu sıkılaştırmak, çoğu ekipte acne’yi tek başına azaltır; kalan titreme için bias adımları daha küçük kalır ve Peter Panning riski düşer.

Yeni bir sorun: Peter Panning

Bias’ı gereğinden fazla büyütürseniz acne azalırken fiziksel tutarlılık bozulur. Bu duruma Peter Panning denir (gölge zeminden kopmuş, karakter havada uçuyormuş hissi).

Görsel etki: Gölge, objenin tabanından ayrık görünür; nesne zeminde değil havada duruyormuş illüzyonu verir. Bias, yüzeyi derinlik testinde fazla “itelediği” için gölge alanı zeminden kayar.

Denge: acne ↔ kopuk gölge

İyi sonuç genelde dar bir koridordadır: acne kaybolurken gölge hâlâ zemine değiyormuş gibi durmalı. Bir uçta takılı kaldığınızda önce bias’ı geri alıp haritayı veya normalBias’ı oynayın; yalnızca bias’ı şişirmek çoğu zaman spiral üretir.

Normal bias: eğimin gücü

Düz bias yüzeyi ışığa göre yaklaşık paralel kaydırır; dik veya karmaşık yüzeylerde tek başına yetersiz kalabilir. shadow.normalBias ise yüzeyi, normal yönünde hafifçe iter.

Neden işe yarar? Küre veya eğri ağlarda, eğim yer değiştikçe oluşan acne’yi genelde daha lokal düzeltir; aşırı global “kaydırma” riski düz bias’a göre daha kontrollü yönetilebilir. 

// Three.js — örnek (sahneye göre ayarlayın)
directionalLight.shadow.normalBias = 0.02;

VSM ve «kaydırma bedeli»

Varyans tabanlı gölgede sızıntıyı kısarken bias düzlemini geniş tutmak kolaydır; bu sayfadaki Peter Panning riskiyle aynı kaydırma bedeli çelişmesine düşebilirsiniz. Pratikte VSM laboratuvarı (VSM demo) ile bu sayfadaki kavramları yan yana düşünmek, hangi artefaktın baskın olduğunu ayırt etmeyi hızlandırır.

Derinlemesine optimizasyon stratejisi

HoloDepth için pratik bir iş akışı — önce geometrik/çözünürlük düzlemi, sonra ince bias:

  1. mapSize: Önce gölge haritası çözünürlüğünü optimize edin (ör. 1024 veya 2048). Daha ince texel, acne ihtimalini düşürür; maliyet artar.
  2. Gölge kamerası: light.shadow.camera frustumunu sahneye sıkı sarın; gereksiz boş alan derinlik hassasiyetini inceltir.
  3. Hassas bias: bias’ı sıfıra yakın tutup çok küçük adımlarla (ör. 1e-5 mertebesinde) ayarlayın.
  4. Normal bias: Düz zeminde gölge kopması (Peter Panning) başlıyorsa bias’ı düşürüp normalBias ile denge kurun.

Eline sürükle-bırak denemek için Shadow Playground (kötü ayar / bias sürgüleri); sayısal sabitleri Shadow map · GOLD Demo Sabitleri ile eşleştirin — bu sayfadaki SVG diyagramlar ise doğrudan HTML içindedir, ayrı bir diagram-*.js laboratuvarı yoktur.

Özet karşılaştırma

Tablo kavram özetidir; bölüm 2–4’teki kod satırları yalnızca tipik başlangıç örnekleri olup sahneye göre değişir. Üçüncü bir «demo sabitleri» tablosu bu sayfada yoktur — interaktif rakamlar diagram-shadow-map.js tarafında Shadow map · GOLD Demo Sabitleri tablosunda toplanmıştır.

Shadow Acne, bias ve Peter Panning — kısa özet
Sorun Neden olur? Çözüm yönü Yan etki / risk
Shadow Acne Düşük derinlik hassasiyeti, örnekleme ve yüzey çakışması bias ve/veya normalBias artırmak; mapSize / frustum iyileştirmek Aşırı bias → Peter Panning
Peter Panning Çok yüksek veya uyumsuz bias bias’ı azaltmak; normalBias ile desteklemek Acne tekrar görülebilir — denge gerekir

HoloDepth ipucu

Çoğu web sahnesinde normalBias, yalnızca bias oynamaktan daha stabil sonuç verir. Hem zemin hem kavisli nesneler varsa önce mapSize ve frustum, sonra normalBias ince ayarını önceliklendirin.