holodepth

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

BasicShadowMap: keskin kenarlı gölge çekirdeği

Bu eşik, gölge haritasında tek örneklemeli derinlik karşılaştırması yapar: yumuşatma yok, komşu texel taraması yok — sonuç ya tam gölge ya tam ışıktır. «Hard shadow» davranışını saf haliyle okumak için ideal bir başlangıçtır; üretimde ise düşük gecikme, düşük bellek veya bilinçli stil seçimiyle örtüşür.

Önce gölge girişi, ardından gölge haritası mantığı ve türler özeti üzerinden oturun; köşeli kenarları «yanlış ayar» sanıp gereksiz teşhise düşmeyi böylece engellersiniz.

Aşağıdaki oynatıcı, genel Shadow Map playground geometrisinden kasıtlı olarak ayrılır: ince çubuk ızgarası, eğik düzlem ve yüksek kontrast, Basic’e özgü aliasing dersini öne çıkarır. Komşu piksel filtresiyle aynı kavramı GOLD sahnesinde görmek için PCFShadowMap sayfasına geçebilirsiniz.

Teknik yapı: filtresiz derinlik testi

Ardışık adım olarak ne yapılır?

BasicShadowMap, gölgeyi hesaplarken yumuşatma (blur) veya komşu piksel kontrolü yapmaz. Süreç kabaca şöyledir:

  1. Işığın derinlik haritasındaki (shadow map) her değer, ana sahnedeki örneklemeyle birebir karşılaştırılır.
  2. Sonuç dijitaldir: piksel ya gölgede ya da aydınlıkta; ara gri ton veya yumuşak geçiş üretilmez.

Sert eşik: içeride ne eksik?

Bu «iç / dış» kararı tek bir harita örneklemesiyle verilir; komşu texel taraması, yarım penumbra veya gürültü azaltma yoktur. Bu yüzden Basic’te gördüğün tırtıklar çoğu zaman tasarım hatası değil, algoritmanın doğasıdır — yumuşak kenar istiyorsan bir sonraki basamak PCFShadowMap veya PCFSoft çizgisine geçilir.

Neden tırtıklı görünüyor? (Aliasing)

Köken: çözünürlük ve projeksiyon

Kenarlarda merdiven basamağı görmenizin nedeni, haritanın sınırlı çözünürlüğü ve sabit texel başına düşen dünya alanıdır. Her örnek belirli bir zemin parçasını temsil eder; çözünürlük yetmediğinde kenar «basamaklanır», filtresiz eşik de bunu sert biçimde çizer.

Projeksiyon + harita: iki büyüteç

Aynı mapSize, ışığın gölge kamerasında ne kadar geniş dünya alanına yayıldığına göre farklı okunur: frustum genişledikçe texel başına düşen metre artar, basamaklar büyür. Basic’te tek «kurtarıcı» çoğu zaman haritayı büyütmek veya kutuyu sıkı tutmaktır — filtre yokluğu yüzünden bu ilişki daha acımasız görünür. Shadow map: frustum sığdırma notuyla birlikte düşün.

Avantajlar: neden kullanılır?

Ne kazandırır?

  • Maksimum performans: GPU yükü gölge filtreleri arasında en düşük olanıdır; VR veya düşük donanımlı mobilde 60 FPS hedefi için uygundur.
  • Düşük bellek kullanımı: Ekstra yumuşatma katmanları gerektirmediği için VRAM baskısı minimal kalır.
  • Keskin görsel stil: Teknik çizim, cel shading veya sert gölge (hard shadow) gerektiren sahnelerde net silüet verir.

Kare bütçesi ve ölçek

Düşük gecikmeli vitrin, WebXR veya çok mesh’li bir blokta «gölgeyi tamamen kapatmak yerine ucuz tutmak» gerekiyorsa Basic hâlâ anlamlı bir seçenektir: filtre maliyeti sıfıra yakındır. Bedeli görsel yumuşaklıktır; bu yüzden ürün kararı çoğu zaman «stil mi, fiziksel yumuşaklık mı?» sorusuna indirgenir.

Dezavantajlar: bilinmesi gereken sınırlar

Nelere alışmak gerekir?

  • Aliasing (merdiven efekti): Kenarlar piksellidir ve pürüzsüz değildir.
  • Gerçekçilik kaybı: Doğadaki birçok ışık kaynağı yumuşak penumbra üretir; Basic bu doğallıktan uzaktır.

Acne ve bias: Basic kurtarmaz

Filtre eksikliği, z-tampon çakışması veya yüzey acne’sini «yok etmez»; yalnızca kenarı sert çizer. bias / normalBias yine gerekir; kötü kombinasyonda Basic hatta artefaktı daha gürültülü gösterebilir. Teşhis akışı için Bias & shadow acne sayfasına bak.

Kalite kontrolü: shadow.mapSize

Boyutu büyütmek neyi değiştirir?

BasicShadowMap kalitesi doğrudan light.shadow.mapSize ile belirlenir; bu algoritmada kaliteyi artırmak için pratikte başvurduğunuz ana parametre harita boyutudur. Boyutu yükselttiğinizde (örneğin 2048) tırtıklar küçülür; karşılığında GPU maliyeti ve bellek baskısı artar. 

renderer.shadowMap.type = THREE.BasicShadowMap;

2048 ve ötesi: ne zaman mantıklı?

Basic’te haritayı şişirmek kenarı inceltir; fakat mobilde 2048 ve üzeri her ışık için bellek ve bant genişliğinde hissedilir. Çoğu ekip önce gölge kamerası kutusunu sıkılaştırır, hâlâ tırtık varsa mapSize’ı artırır — sırayı tersine çevirmek genelde pahalıdır. Performans rehberi ile birlikte oku.

Oynatıcı: Basic’e özel sahne

Önce hangi sinyali izlemelisiniz?

Aşağıdaki blok renderer.shadowMap.type olarak yalnızca BasicShadowMap kullanır; amaç, filtresiz eşiğin sahneye nasıl yansıdığını elle hissettirmektir. İnce çubuk ızgarası ve eğik düzlem, haritayı zorlayıp kenarları okunur kılar; koyu zemin ve yüksek kontrast da basamakları ayırt etmeyi kolaylaştırır. Harita boyutu ve (Spot’ta) ışık mesafesi gibi sürgülerle «blokluluk» ile maliyet arasındaki gerilimi kendiniz üretin; Grid açıkken düşük çözünürlükte kareleşmeyi zeminde de takip edebilirsiniz.

BasicShadowMap · Shadow Playground —
Işık

Harita: düşük = hızlı / gölge kaba · yüksek = net / GPU daha çok.

Sürükle: dönüş ve zoom (pan kapalı). Genel Shadow Map makalesindeki küre–panel–küp yerine burada yalnızca bu sahne vardır. BasicShadowMap türü kilitlidir. Yönsel modda Işık mesafesi sürgüsü devre dışıdır; Spot’a geçince açılır. Kötü ayar örneği: harita 512², bias ve normal bias 0 — shadow acne için zorlayıcı profil. Kenarları vurgula odak halkasını çubuk gölgelerine yaklaştırır; kapatınca kamera önceki yörüngesine döner. Spot kapsamı (zemin) yalnız Spot’ta külah izdüşümü ve mesafe bandını zeminde gösterir.


Kod yolu: diagram-shadow-map.js içinde data-shadow-variant="basic" dalı; geometri sabitleri BASIC_ALIASING adıyla toplanır. Aşağıdaki tablo, bu varyantın sayısal «haritası»dır — Tür sütunu HUD üzerinden değişenleri dosyada kilitli kalanlardan ayırır; tablodaki rakamlar ile oynatıcıyı yan yana tutmak hata ayıklamayı hızlandırır.

Sabit doğrulama: tablodaki BASIC_ALIASING, basic varyant ışık yoğunlukları (1.92 / 108), dolgu, renderer (BasicShadowMap, exposure 1.02, arka plan 0x030305) ve kamera başlangıcı, canlı sahne ile aynı diagram-shadow-map.js dalından gelir. HUD ile oynanan harita / bias / yön satırları «Dinamik» etiketiyle ayrılır.

HUD’dan hangi parametreler akıyor?

  • mapSize — Basic’de başlıca aliasing düzeyi; kalite ile GPU yükü arasında doğrudan takas
  • bias — Shadow acne ve z-tampon çakışmalarına karşı ince telafi
  • normalBias — yüzey normaline bağlı gölge kaydırması
  • Azimut ve yükseklik — ışın yönü; içeride setLightPose ile güncellenir
  • Mesafe — yalnızca SpotLight için anlamlıdır; DirectionalLight paralel ışın kullandığından yönsel modda sürgü gizlenir
diagram-shadow-map.js: BASIC_ALIASING geometrisi ve basic varyantı — bu HTML sayfasındaki oynatıcı ile eşleşen sabitler
Sahne / rol Parametre Değer Tür
Ortak · hedef LIGHT_TARGET (yönsel hedef) (0, 0.58, 0) 🔒 Sabit
SpotLight.target (spot dalı) (0, 0.52, 0) — setLightPose 🔒 Sabit
BASIC_ALIASING · geometri Zemin PlaneGeometry groundSize 22 · renk 0x050508, roughness 0.99, metalness 0.02 🔒 Sabit
İnce çubuk ızgarası (InstancedMesh) rod 0.032 × 1.48 × 0.032 · ızgara 10 × 8 · gridSpacing 0.44 · çubuk 0xf4f7fc 🔒 Sabit
Eğik düzlem (PlaneGeometry) w × h 9 × 6.5 · konum (0.38, 0.5, −0.22) · renk 0x1a222e · rotation sırası YXZ, x/y/z ≈ −π/2+0.36, 0.48, 0.26 🔒 Sabit
BASIC_ALIASING · odak focusRing (Kenarları vurgula) Merkez (0.1, 0.06), yarıçap 1.02 (zemin) 🔒 Sabit
focusOrbit Kamera (2.35, 1.48, 2.62) → hedef (0.22, 0.045, 0.16), FOV 28, min/max 0.68 / 5.6 🔒 Sabit
Ana ışık (basic yükleme) color + yoğunluk (yönsel / spot) 0xffffff · yönsel 1.92 · Spot 108 (radyo ile yeniden kurulumda) 🔒 Sabit (varyant)
DirectionalLight gölge kamerası (ortho) left/right/top/bottom ±5.2 · near 0.8 · far 26 🔒 Sabit
SpotLight (makeSpot + basic) Ctor + basic renk / yoğunluk distance 30 · angle Math.PI / 5.2 · penumbra 0.22 · decay 1.2 · basic’de color 0xffffff, intensity 108 🔒 Sabit
Spot gölge kamera near 0.25 · far 38 · shadow.focus 1 🔒 Sabit
GOOD_DEFAULT / BAD mapSize / bias / normalBias (normal) Başlangıç HUD ile 1024 · −0.0001 · 0.02 · “Kötü ayar” açıkken BAD: 512, 0, 0 🔄 Dinamik (HUD)
shadow.radius Basic / shadow-map: applyShadowParams ile 1 (PCF varyantı değil) 🔒 Sabit (kod)
Dolgu (basic sahne) AmbientLight 0xffffff, yoğunluk 0.02 🔒 Sabit
HemisphereLight 0x8899aa / 0x040508, yoğunluk 0.085 🔒 Sabit
Renderer / kamera (basic) Ton / gölge / arka plan ACESFilmicToneMapping, exposure 1.02 · BasicShadowMap · 0x030305 🔒 Sabit
PerspectiveCamera + OrbitControls Başlangıç poz (6.25, 4.9, 7.45), bakış (0.06, 0.22, 0.05); hedef aynı; zoom 3.8– 13.5; pan kapalı 🔒 Sabit
Yardımcı çizimler Tel / çizgi / grid Yönsel: sarı Line; Spot: koni LineSegments (DirectionalLightHelper / SpotLightHelper yok). Grid açıkken GridHelper(20, 40, 0x2a3848, 0x121820) 🔒 Sabit + HUD (görünürlük)
HUD başlangıç (basic-shadow-map.html) Sürgü / seçim Harita 1024; bias −10 → −0.0001; normal bias 20 → 0.02; azimut 118°, yükseklik 38°, mesafe 20.5 🔄 Dinamik (HUD)
Yönsel başlangıç konumu setLightPose Yaklaşık (14.27, 13.20, −7.58) = LIGHT_TARGET + offset (118°, 38°, 20.5) 🔄 Dinamik (HUD) 
// diagram-shadow-map.js — basic varyant okuma sırası (BASIC_ALIASING geometri tabloda)
// 🔑 BasicShadowMap’te kaliteyi belirleyen ana parametreler

// 1. Renderer (BasicShadowMap — bu sayfanın konusu)
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.BasicShadowMap;

// 2. Işık kurulumu (basic: renk / yoğunluk varyantta beyazlaştırılır)
const LIGHT_TARGET = new THREE.Vector3(0, 0.58, 0);
const light = new THREE.DirectionalLight(0xffffff, 1.92);
light.castShadow = true;
light.target.position.copy(LIGHT_TARGET);
scene.add(light);
scene.add(light.target);

// Spot örneği: ctor aynı gövde; basic’de intensity 108 — tabloya bak
// scene.add(spot); scene.add(spot.target);

// 3. Gölge ayarı (önemli kısım)
light.shadow.mapSize.set(1024, 1024);
light.shadow.bias = -0.0001;
light.shadow.normalBias = 0.02;

İleri seviye not

Basic neden «taban katman» sayılır?

BasicShadowMap, PCF ve benzeri filtrelerin çıktısını besleyen sert ikili testin kendisidir: komşu örnekleme veya çekirdek yumuşatması çoğu zaman bu sonucun üzerine ek matematik koyar. GOLD sahne ve komşu piksel anlatımı için PCFShadowMap sayfasına geçin. PCFSoft ve VSM metinleri farklı vurgular taşır; her türe özgü sahne ayrı tutulduğundan öğrenme hattı net kalır.

Genel tür tablosu ve GOLD sahne için Shadow map — türler (bölüm 8); BasicShadowMap satırı bu sayfanın önündeki özet köprüsüdür.