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 | 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.
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
| 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 0–8 (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.08–60; 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.2–14; 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.