holodepth

Three.js · Gölge türleri · 4 / 4

VSMShadowMap

Varyans gölge haritası — olasılık ve yumuşak penumbra hissi

VSMShadowMap (Variance Shadow Map), gölgeyi yalnızca “ışık var / yok” ikilisinden okumak yerine istatistiksel bir modelle yaklaşır. Derinlik haritasında yalnızca mesafe d değil, aynı zamanda d² (derinliğin karesi) de saklanır; böylece Chebyshev tarzı bir sınırlama ile noktanın gölgede kalma olasılığı hesaplanabilir. Bu yapı, geleneksel PCF ailesinde zor olan anlamlı bulanıklık ve ışıktan uzaklaştıkça yumuşayan kenar hissini mümkün kılar.

Bağlam: Gölge girişi, Shadow map nedir, Gölge türleri tablosu, PCFShadowMap, PCFSoftShadowMap.

Serinin önceki adımlarında kenar yumuşluğu çoğunlukla harita uzayı filtresi ile açıklanmıştı (BasicShadowMap → sert eşik; PCF / PCFSoft → komşu örnekleme). VSM bu çizgiyi, derinliğin moment istatistikleri üzerinden sürekli bir «görünürlük» modeline taşır; yine de gerçek fiziksel penumbra yerine GPU’da yaklaşık bir dağılım üretilir — beklentiyi buna göre kalibre etmek, sızıntı ve ayar döngüsünü yönetmeyi kolaylaştırır.

Teknik yapı: istatistik ve olasılık

  • Çift veri: Haritada d ile birlikte d² tutulur; yerel ortalama ve varyans üzerinden dağılım çıkarılır.
  • Chebyshev eşitsizliği: Bu iki özet istatistikle, belirli bir derinlikte “gölgede olma” olasılığı sınırlanır; keskin ikili kesit yerine sürekli bir geçiş elde edilir.
  • Donanım filtresi: Uygulamalarda mip zinciri ve doğrusal örnekleme gibi doku filtreleri kullanılabildiği için bazı sahnelerde kenar kalitesi / maliyet dengesi farklılaşır (sürüm ve sürücüye bağlı).

Bu «iki kanallı» harita düşüncesi, klasik derinlik haritasından bir adım ötedir; genel projeksiyon ve texel başına düşen dünya alanı kavramı için Shadow map girişi ile çerçeveyi tazelemek, VSM’de neden moment ve filtre zinciri ayarlarının bu kadar kritik olduğunu bağlamlandırır.

Momentler ve «görünürlük yüzeyi»

VSM’de okuduğunuz şey tek bir derinlikten ziyade yerel bir dağılım özetidir; bu yüzden kenar «eşik» yerine eğimli bir geçiş görürsünüz. Üretimde bu modeli seçtiğinizde QA sürecinde özellikle düşük kontrastlı yüzeyler ve ince geometri üzerinde sızıntı taraması yapmak, PCF ailesine göre daha kritik olabilir.

Light bleeding (ışık sızması)

VSM bir tahmin kullandığı için matematik bazen “ışığı fazla verir”: gölge içinde kalmış bir yüzeyde parlak lekeler, yarı saydam aydınlanmış bölgeler görülebilir. Karmaşık occluder’lar ve düşük hassasiyet bu hatayı büyütür.

Pratikte shadow.bias ile genel kaymayı, shadow.normalBias ile yüzey eğimine bağlı artefaktları birlikte ayarlamak gerekir; tek parametreyle mucize beklenmemeli.

Bias ve yüzey düzlemi üzerindeki diğer tipik hatalar (ör. shadow acne, Peter Panning) için ayrıntılı diyagram ve çözüm ekseni Shadow acne & bias sayfasında toplanmıştır; VSM’de sızıntıyı kısarken bu sayfadaki «kaydırma bedeli» ile çelişmediğinizden emin olun.

Ayarlama döngüsü: blur ↔ bias

Sızıntıyı bastırmak için normalBias’ı yükseltmek bazen gölgeyi «kaydırır»; bunu telafi etmek için blurSamples veya genel bias ile küçük adımlarla denge kur. Laboratuvarda stres geometriyi açıp kapatarak aynı sürgülerin bölüm 6’da nasıl farklı okunduğunu karşılaştırmak, üretimde hangi sahnelerin «VSM hassas» olduğunu kestirmeye yardım eder.

Avantajlar

  • Yumuşak penumbra hissi: Mesafeye bağlı dağılım, PCF ailesine göre bazen daha “fiziksel” okunur.
  • Donanım dostu filtreleme: Uygun durumlarda doku filtresi ile kenar pürüzlülüğünü yönetmek mümkün olabilir.
  • Aliasing azaltma: Tamamen yok etmez; fakat sürekli alan modeli ile piksellenme daha az rahatsız edici olabilir.

«Daha fiziksel okunur» ifadesi algısal bir karşılaştırmadır: ışın takibi veya alan ışık hesabı yapmıyorsunuz; hâlâ tek bir derinlik haritasından türeyen bir olasılık yüzeyindesiniz. Bu ayrım, ürün veya sinema görsel hedefini yazarken ekip beklentisini doğru yönetmek için önemlidir.

Ne zaman VSM «değer» katar?

Dış mekân, geniş gölge alanı ve sinematik yumuşaklık öncelikliyse VSM sık öne çıkar; arayüz veya teknik çizimlerde keskin kontur istiyorsanız önce PCF hattını doğrulayıp VSM’i ikinci planda tutmak genelde daha az risklidir. Genel satır için gölge türleri tablosundaki VSM satırına da bakın.

Dezavantajlar ve maliyet

  • Işık sızması: Özellikle çok katmanlı gölgelerde en zor yönetilen risk.
  • VRAM / bant genişliği: Ek moment (ör. d²) ve blur geçişleri daha fazla bellek ve dikkatli ayar ister.
  • Keskin gölgeler: “Net, keskin kontur” isteyen ürün görselinde PCF tabanlı yollar genelde daha öngörülebilir olabilir.

Karşılaştırma için aynı sahneyi önce PCF oynatıcısında veya PCFSoft split üzerinden okuyup, ardından VSM’e geçmek «öngörülebilirlik ↔ yumuşaklık» dengesini somutlaştırır.

Profil ve bütçe

Blur ve moment verisi GPU’da ek yük taşıyabilir; çok ışıklı sahnelerde ölçüm için gölge performansı rehberine dönün. VSM’i açmadan önce castShadow kapsamını daraltmak, sürgü oyunundan önce gelen «bedava kazanç» adımıdır.

Three.js’te kullanım ve VSM’e özel alanlar

PCF ailesinde sık kullanılan shadow.radius yerine VSM tarafında bulanıklığı çoğunlukla shadow.blurSamples ile yönlendirirsin; sızıntı ve yüzey hatalarında bias / normalBias ön plandadır.

Alan adları ve davranış Three.js sürümüne göre ince farklar gösterebilir; üretim öncesi hedeflediğiniz sürümde WebGLRenderer ve Light.shadow alanlarını resmi sürüm notlarıyla çapraz kontrol etmek, VSM gibi daha az «günlük varsayılan» türlerde özellikle önerilir.

blurSamples ve PCF’deki radius

PCF ailesinde sık görülen shadow.radius kolu burada yerini çoğunlukla blurSamples’a bırakır; ikisi aynı matematiği yapmaz. VSM’de önce harita kutusu ve güneş açısını makul tutup, sonra bulanıklığı blurSamples ile, yüzey hatalarını bias / normalBias ile ayırmak daha okunaklı bir iş bölümüdür. 

renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.VSMShadowMap;

directionalLight.shadow.blurSamples = 8;
directionalLight.shadow.bias = -0.0001;
directionalLight.shadow.normalBias = 0.02;

Demo: neyi denemelisin?

Bu laboratuvarda gölge haritası sabit 512²; böylece sahne sadece VSMShadowMap davranışını (bulanık gölge çekirdeği, sızıntı eğilimi) ve küçük sahne modelini gösterir. blurSamples yumuşaklığı, bias / normalBias ise gölge doğruluğunu ve yüzey artefaktlarını ayarlar.

Duman hissi: blurSamples artır — kenar yumuşar (maliyet artar). Sızıntı: normalBias’ı düşürüp parlama ara, sonra yükselt. Stres geometri: ek bloklar bleeding gözlemini kolaylaştırır.

Sızıntı lekeleri veya aşırı yumuşama belirdiğinde önce Light bleeding bölümündeki çerçeveyi hatırlayın; ardından HUD’u küçük adımlarla oynayıp tablodaki başlangıç değerleriyle Demo Sabitleri arasında gidip gelmek, hangi sürgünün baskın artefaktı taşıdığını ayırt etmeyi hızlandırır.

Sabit doğrulama: laboratuvarın kilit geometri, ışık, kamera ve ctor değerleri diagram-vsm-shadow.js ile tablodaki satırlarla eşleşir; HUD yalnızca blurSamples, bias, normalBias ve isteğe bağlı stres geometriyi oynatır — harita boyutu bu demoda kasıtlı olarak 512² sabittir.

VSMShadowMap · laboratuvar —

Kod: js/diagram-vsm-shadow.js — renderer.shadowMap.type = VSMShadowMap, yönsel ışık, gölge haritası 512² (sabit), Orbit. Sürgü değerleri doğrudan shadow.blurSamples, shadow.bias, shadow.normalBias üzerine yazılır. Tam sayısal sabitler: Demo Sabitleri tablosu. Harita çözünürlüğü burada sabit tutulduğundan, çözünürlük–maliyet takasını ayrıca Basic sayfasındaki mapSize bölümünde veya PCF oynatıcısında inceleyebilirsiniz; bu laboratuvar özellikle blurSamples ve bias düzlemindeki davranışa odaklanır.

Demo Sabitleri Tablosu (VSM laboratuvar)

Aşağıdaki tablo diagram-vsm-shadow.js ile bölüm 6’daki HUD’un ön haritasıdır. Tür sütunu: sürgü / onay kutusu ile değişenler ile dosyadan gelen sabitleri ayırır.

Tablodaki her satırı okurken bölüm 6’daki görüntü altı açıklaması ile eşleştirmek, hangi sabitin doğrudan koda yazıldığını, hangisinin yalnızca başlangıç ctor’unda kaldığını ayırt etmeyi kolaylaştırır.

Tablodaki yoğunluk 1.72 × 0.9, gölge ctor’u ve orbit sayıları doğrudan dosyadaki sabitlerden gelir; HUD satırı ise applyParams içindeki ölçekleme (normalBias adım ×0.001, bias adım ×1e-5, normalBias üst sınır 0.08) ile örtüşür.

Bu demo’da kontrol edilenler

  • shadow.blurSamples → VSM bulanıklığı (çift tam sayıya hizalanır); aşırı değerlerde maliyet artar
  • shadow.bias / shadow.normalBias → kayma ve yüzey artefaktları; bleeding ile birlikte düşünün
  • Sızıntı stresi → ek duvar + çıkıntı (bleeding gözlemi)
diagram-vsm-shadow.js — VSM laboratuvar (vsm-shadow-map.html bölüm 6)
Sahne / rol Parametre Değer Tür
Ortak · hedef LIGHT_TARGET (0.05, 0.28, 0.02) 🔒 Sabit
Temel geometri · buildBaseScene Zemin PlaneGeometry 22 × 22 · 0x243033, roughness 0.9, metalness 0.05 🔒 Sabit
Kule BoxGeometry 0.38 × 1.55 × 0.34 · konum (0.32, 0.775, 0.06) · 0x7ec4c8 (roughness 0.36, metalness 0.1) 🔒 Sabit
Kaide BoxGeometry 0.62 × 0.18 × 0.58 · konum (−0.48, 0.09, 0.32) · 0xc8a070 (roughness 0.58, metalness 0.06) 🔒 Sabit
Dolgu AmbientLight 0xffffff, yoğunluk 0.035 🔒 Sabit
HemisphereLight 0x7a9e9a / 0x06080c, yoğunluk 0.1 🔒 Sabit
makeVsmDirectional DirectionalLight 0xfff6ee · yoğunluk 1.548 (1.72 × 0.9 — DIRECTIONAL_INTENSITY) 🔒 Sabit
Gölge kamera (ortho) left/right/top/bottom ±4.8 · near 0.7 · far 26 🔒 Sabit
Gölge · harita + ctor shadow.mapSize 512² (SHADOW_MAP_SIZE, sabit) 🔒 Sabit
Ctor bias / normalBias / blurSamples −0.00008 · 0.022 · 8 (ilk applyParams HUD değerleriyle aynı) 🔒 ctor · 🔄 HUD ile sürekli
Işık konumu setSun(light, 102, 21, 17.5) Azimut / gök / mesafe (° + birim) 🔒 Sabit
Renderer Gölge / ton VSMShadowMap · ACESFilmicToneMapping, exposure 1.05 · temizleme 0x04080a 🔒 Sabit
Sahne arka planı Scene.background 0x04080a 🔒 Sabit
Kamera · orbit PerspectiveCamera + OrbitControls FOV 40, clip 0.08–55; poz (4.35, 2.95, 5.4), lookAt yaklaşık (0.1, 0.22, −0.05); hedef (0.08, 0.2, −0.02); zoom 3.4–13; pan kapalı; damping 0.07 🔒 Sabit
Stres geometri (isteğe bağlı) Duvar BoxGeometry 1.15 × 1.05 × 0.09 · (−0.08, 0.52, −0.58) · 0x5a7088 🔒 Sabit (yalnız stres onayı açıkken)
Çıkıntı BoxGeometry 0.35 × 0.08 × 0.45 · (0.55, 0.22, −0.22) · 0x8899aa 🔒 Sabit (yalnız stres onayı açıkken)
HUD başlangıç Sürgü / onay blurSamples 8; normal bias adım 22 → 0.022; bias adım −8 → −8e-5; stres kapalı 🔄 Dinamik (HUD)
normalBias üst sınır applyParams THREE.MathUtils.clamp(..., 0, 0.08) 🔒 Sabit (kod) 
// diagram-vsm-shadow.js — okuma sırası (geometri ve sabitler tabloda)

// 1. Renderer
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.VSMShadowMap;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.05;

// 2. Yönsel ışık (VSM ctor — yoğunluk dosyada 1.72 × 0.9)
const LIGHT_TARGET = new THREE.Vector3(0.05, 0.28, 0.02);
const light = new THREE.DirectionalLight(0xfff6ee, 1.548);
light.castShadow = true;
light.target.position.copy(LIGHT_TARGET);
light.shadow.mapSize.set(512, 512);
light.shadow.bias = -0.00008;
light.shadow.normalBias = 0.022;
light.shadow.blurSamples = 8;

// 3. Işık konumu (sabit açılar)
// setSun(light, 102, 21, 17.5);

// 4. HUD: blurSamples, bias, normalBias sürgüleri applyParams ile güncellenir

Özet

HoloDepth ipucu

VSM; geniş dış mekan, yumuşak alan ışığı etkisi veya sinematik penumbra öncelikli sahnelerde güçlü olabilir. Keskin, öngörülebilir iletişim grafikleri veya sıkı VRAM bütçesinde PCF / PCFSoft çoğu zaman daha güvenli bir limandır.

Karar verirken kısa bir kontrol listesi: (1) sızıntıyı kabul edilebilir seviyede tutabilecek misiniz? (2) blurSamples artışına FPS cevabı yeterli mi? (3) Ürün görseli «keskin kontur» mu «yumuşak alan» mı istiyor? Keskin kontur öncelikliyse, önce PCF hattına dönmek genelde daha az sürprizlidir.

Bu seride dördüncü ve son başlık: gölge türleri özetine Shadow map tipleri üzerinden dönebilirsin.

Seri girişi: Gölge girişi; VSM satırı: tablo · VSMShadowMap.