holodepth

Three.js · Gölge haritası · seri 3 / 4

PCFSoftShadowMap: PCF’den daha geniş çekirdek yumuşatması

PCFSoftShadowMap, PCF (Percentage Closer Filtering) ile aynı «yüzdesel yakınlık» fikrini paylaşır; fark, derinlik haritasından okunan örneklerin daha geniş / ağırlıklandırılmış bir çekirdek ile birleştirilmesidir. Kenar basamakları genelde PCF’e göre daha yumuşak görünür; bu hâlâ harita uzayı filtresidir, gerçek dünyadaki mesafeye bağlı penumbra simülasyonu değildir. Kütüphanenin varsayılan gölge türü çoğu sürümde PCFShadowMap kalır; PCFSoft bilinçli kalite seçimidir.

Zinciri tamamlamak için gölge girişi, BasicShadowMap, PCFShadowMap, Shadow map nedir ve gölge türleri tablosu sayfalarına göz atın.

PCF sayfasındaki tam oynatıcı Technical · şehir ve Organic · eğriler sahnelerini kullanır. Bu sayfadaki split görüntü ise
diagram-pcf-soft-split.js içindeki küçük laboratuvar ( zemin + kule + kaide ) ile aynı geometride yalnızca PCF | PCFSoft filtresini yan yana koyar; sabitler bölüm 6 tablosunda, şehir/organik geometrinin tam sayıları PCF sayfasındadır.

Teknik yapı: neden daha yumuşak?

Çekirdek genişleyince ne değişir?

PCFSoft, gölge testinde komşu örneklerin ortalamasını alır; çekirdek (kernel) PCF’e göre genişletilmiş veya ağırlıklandırılmış bir yumuşatma hissi verir. Düşük mapSize’ta bile sert basamaklar, çözünürlüğü tek başına şişirmeden daha sinematik bir tona yaklaşabilir.

  • Çoklu örnekleme: Kenar civarında tek ikili karar yerine ara tonlar.
  • Penumbra değil: Bu yumuşaklık çoğunlukla harita uzayındaki filtrelemedir; mesafeye bağlı yarı gölgeyi birebir simüle etmek zorunda değildir.
  • Map size ile birlikte düşün: 256² gibi sert veride PCFSoft blokluluğu sihirle yok etmez; «testere dişi»ni ise genelde daha iyi maskeler.

Split demo: iki sahne, iki gölge türü

Bu sayfadaki yarım ekran karşılaştırma, tek karede iki tam sahne çizimi yapar: sol ve sağ aynı geometriyi paylaşsa da shadowMap.type her yarı için ayrı atanır. Bu, öğretim için mükemmel bir «A/B»dır; üretimde ise genelde tek renderer türü ve tek geçiş bütçesi hedeflenir — split’i “bedava iki gölge” sanmamak gerekir.

light.shadow.radius ve PCFSoft

Radius neden çoğu kurulumda «sessiz» kalır?

PCF modunda shadow.radius komşu örnekleme yarıçapını belirleyerek kenarı bulanıklaştırmada belirgin rol oynayabilir. PCFSoftShadowMap kendi sabit filtre çekirdeğine dayandığından, birçok sürüm ve sahne kombinasyonunda radius değişiminin gözle görülür etkisi yok denecek kadar az kalır — bu modda radius’u evrensel bir ince ayar kolu gibi varsaymamak gerekir.

Split demo’da radius

Bölüm 5’teki split görüntüde aynı radius değeri her iki ışığa da yazılır; sol (PCF) kenarda fark üretirken sağ (PCFSoft) çoğu sürümde neredeyse tepkisiz kalır — “aha” anı budur.

Önce harita, sonra radius beklentisi

PCFSoft’ta kenar çoğu zaman çekirdekten geldiği için, düşük mapSize’ta radius’u şişirmek yerine önce haritayı ve gölge kutusunu iyileştirmek daha sık işe yarar. Radius’u «ince ayar kolu» olarak PCF tarafında kalibre et; sağ yarıdaki sessizliği normal kabul et.

Avantajlar

Ne zaman tercih edilir?

  • Görsel maskeleme: Aliasing’i büyük ölçüde azaltır; düşük çözünürlükte bile kabul edilebilir kenar.
  • MapSize baskısı: 512–1024 bandında PCF’ye göre genelde daha tok bir gölge hissi (sahneye bağlı).
  • Sahne okuması: Işığın doğal dağılıyormuş gibi bir izlenim vererek derinlik algısını güçlendirir — yine de filtre uzayı etkisidir.

PCF mi, PCFSoft mu?

Kısa kural: kenar estetiği ve iç mekân dramı önde ise PCFSoft sık öne çıkar; çok ışık + sıkı FPS baskısı varsa önce PCF ve seçici castShadow ile profil çıkar, sonra yumuşaklığa geç. Her iki türün de genel tablo satırı vardır.

Dezavantaj: performans

Maliyet sırası

Kalite arttıkça GPU maliyeti de artar. Aşağıdaki tablo yalnızca bu üçlü içinde kabaca göreli sırayı özetler; kesin FPS farkı sahne, ışık sayısı ve donanıma bağlıdır.

Gölge türü · görsel kalite ve maliyet (özet)
Gölge türü Görsel kalite GPU maliyeti (kabaca)
BasicShadowMap Düşük (sert / tırtıklı) En düşük
PCFShadowMap Orta (yumuşatılmış) Orta
PCFSoftShadowMap Yüksek (daha yumuşak kenar) En yüksek (bu üçlü içinde)

Ölçüm: tek sahne bütçesi

Üretimde maliyeti gerçekçi görmek için split demosunu değil, hedef sahneyi profil et; çoklu ışık ve çözünürlük katmanları için gölge performansı rehberine bak.

Oynatıcı: PCF | PCFSoft split

Aynı geometride iki filtre

Görüntü aynı laboratuvar sahnesini (ince kule + zemin, düşük güneş, uzun gölge) iki kez çizer: sol renderer.shadowMap.type = PCFShadowMap, sağ PCFSoftShadowMap. Haritayı özellikle 256² tutunca soldaki testere kenarı ile sağdaki yumuşak geçiş genelde tek bakışta ayrılır. Radius sürgüsü sol yarıda belirginleşir; sağda çoğu kurulumda neredeyse tepkisiz kalır — böylece bölüm 2’de anlatılan radius davranışı somutlaşır.

Technical · şehir ve Organic · eğriler yalnızca PCFShadowMap oynatıcısında bulunur. Split sahnesinin sayısal özeti bölüm 6 tablosundadır.

Sabit doğrulama: split sahnesindeki tüm kilit rakamlar diagram-pcf-soft-split.js ile aynıdır; HUD yalnızca mapSize ve shadow.radius’u her iki yarıya yazar — farkı gözlemlemek için önce haritayı 256² bırakıp sol kenara bakmak en net A/B’dir.

Split · PCF | PCFSoft
PCFShadowMap radius belirgin
PCFSoftShadowMap kernel yumuşatır

Tek WebGLRenderer: önce sol yarıda PCFShadowMap, sonra sağda PCFSoftShadowMap ile aynı kamera ve geometri yeniden çizilir. İki ayrı sahne ve iki yönsel ışık kullanılır; her yarı kendi shadowMap.type değerini doğru uygular. HUD’daki harita ve radius her iki yarıya da yazılır; fark çoğunlukla sol kenarda okunur.

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

// Önce mapSize / bias ile oyna; radius PCFSoft’ta sıklıkla “sessiz” kalır.
directionalLight.shadow.mapSize.set(1024, 1024);
directionalLight.shadow.bias = -0.0001;
directionalLight.shadow.normalBias = 0.02;

HoloDepth ipucu

Çok yumuşak gölge isteyip FPS düşüyorsa: PCFSoft + daha düşük mapSize denemek, bazen PCF + çok yüksek mapSize kombinasyonundan daha iyi kalite / performans dengesi verir — her sahne için profil çıkarmak gerekir.

Demo Sabitleri Tablosu (split laboratuvar)

Split sabitleri tablosu neyi doğrular?

Tablo diagram-pcf-soft-split.js içindeki split laboratuvarın sayısal özetidir (zemin + kule + kaide). PCF sayfasındaki şehir / organik geometri burada yoktur; Tür sütunu HUD ile değişenleri dosyada kilitli kalanlardan ayırır. Technical / Organic tam sabitleri için PCF sayfası Demo Sabitleri bağlantısını kullanın.

Tablodaki ctor değerleri (bias, normalBias, başlangıç mapSize, güneş pozu, kamera) doğrudan makeKeyLight / setSunPose ve sahne doldurma fonksiyonlarıyla eşlenir; HTML’deki seçim ve sürgüler bu tablodaki «Dinamik (HUD)» satırlarını oynatır.

HUD’dan hangi parametreler akıyor?

  • mapSize — her iki yarıda aynı gölge haritası çözünürlüğü (HUD seçenekleri)
  • shadow.radius — her iki ışığa yazılır; sol (PCF) kenarda belirgin, sağ (PCFSoft) çoğu kurulumda daha sessiz
diagram-pcf-soft-split.js: split laboratuvar sabitleri — bu HTML bölüm 5–6 ile eşleşen değerler
Sahne / rol Parametre Değer Tür
Ortak · hedef LIGHT_TARGET (yönsel) (0, 0.32, 0.08) 🔒 Sabit
Geometri · fillLabScene Zemin PlaneGeometry 20 × 20 · 0x283242, roughness 0.9, metalness 0.05 🔒 Sabit
Kule BoxGeometry 0.26 × 1.42 × 0.26 · konum (0.38, 0.71, −0.12) 🔒 Sabit
Kaide BoxGeometry 0.55 × 0.2 × 0.55 · konum (−0.52, 0.1, 0.22) 🔒 Sabit
Dolgu AmbientLight 0xffffff, yoğunluk 0.038 🔒 Sabit
HemisphereLight 0x8a9eb8 / 0x080a10, yoğunluk 0.11 🔒 Sabit
makeKeyLight (her iki yarı) DirectionalLight 0xfff6ee · yoğunluk 1.78 🔒 Sabit
Gölge kamera (ortho) left/right/top/bottom ±4.5 · near 0.65 · far 24 🔒 Sabit
Gölge tabanı (ctor; HUD ile güncellenir) mapSize / bias / normalBias Başlangıç 256² · −0.00007 · 0.03 🔄 Dinamik (HUD) / 🔒 ctor
shadow.radius Ctor 2.5; HUD 08 (adım 0.25) · applyShadowSettings ile clamp(0, 10) 🔄 Dinamik (HUD)
Işık konumu setSunPose(light, 108, 16, 19.5) (° + mesafe) 🔒 Sabit
Renderer Ton / arka plan ACESFilmicToneMapping, exposure 1.04 · temizleme 0x05060c 🔒 Sabit
Çift çizim Sol viewport: renderer.shadowMap.type = PCFShadowMap · sağ: PCFSoftShadowMap · tek kamera, iki sahne 🔒 Sabit
Kamera · orbit PerspectiveCamera + OrbitControls FOV 42, clip 0.0860; başlangıç poz (4.1, 2.85, 5.2), lookAt yaklaşık (0.15, 0.28, −0.12); hedef (0.12, 0.22, −0.08); zoom 3.214; pan kapalı 🔒 Sabit
HUD başlangıç Harita / radius Harita 256 · radius sürgüsü 2.5 🔄 Dinamik (HUD)
// diagram-pcf-soft-split.js — okuma sırası (geometri tabloda)

// 1. Renderer (çift çizimde her yarı için shadowMap.type değişir)
renderer.shadowMap.enabled = true;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.04;

// 2. Yönsel ışık (iki kopya: sceneL / sceneR — aynı ctor)
const LIGHT_TARGET = new THREE.Vector3(0, 0.32, 0.08);
const light = new THREE.DirectionalLight(0xfff6ee, 1.78);
light.castShadow = true;
light.target.position.copy(LIGHT_TARGET);
light.shadow.mapSize.set(256, 256);
light.shadow.bias = -0.00007;
light.shadow.normalBias = 0.03;
light.shadow.radius = 2.5;

// 3. Çizim: önce sol yarıda PCFShadowMap, sonra sağda PCFSoftShadowMap
// renderer.shadowMap.type = THREE.PCFShadowMap;  // sol
// renderer.shadowMap.type = THREE.PCFSoftShadowMap; // sağ

Sırada ne var?

VSM ve özet tablo

Bir sonraki adım: VSMShadowMap ve gölge türleri tablosu. Önceki basamak: PCFShadowMap.

Artefakt ve bias dili için Bias & shadow acne; büyük resim için gölge girişi.