Three.js · Işık ve materyaller · Ortam
Environment & HDRI: sahnenin dolaylı ışık mühendisliği
Gerçekçilik yalnızca sahneye koyduğun ışık objelerinden değil; çevreden gelen yansıma ve dolaylı aydınlatmadan da üretilir.
Modern 3B web sahnelerinde ortam haritası (environment) ve HDRI, objelerin sahne ile fiziksel bir bağ kurmasını sağlar; “havada asılı” hissini azaltır, PBR materyallerin doğru çalışması için sıklıkla şart sayılır.
Bağlam: Işığın doğası, Materyal girişi, Gölge performansı, Doku temelleri (bir sonraki modül adımı).
HDRI ve IBL (Image Based Lighting)
HDRI (High Dynamic Range Imaging), klasik bir JPEG/PNG dokusundan farklı olarak parlaklık bilgisini geniş bir aralıkta taşır.
Doğrudan ışık değildir
HDRI, tek başına doğrudan (direct) bir ışık kaynağı değildir. Sahneye IBL üzerinden şunları taşır:
- Dolaylı aydınlatma (ortam / ambiyans)
- Yansıma bilgisi (specular reflection)
| Biçim | Parlaklık aralığı | Not |
|---|---|---|
| LDR (JPEG / PNG) | Sınırlı (ör. 0–255) | Tek tip “orta gri” gökyüzü; parlak güneş körlüğü |
HDRI (.hdr / .exr) |
Çok geniş | Güneş gibi parlak bölgeler ile derin gölgeler aynı haritada |
Dolaylı IBL ile doğrudan gölge aynı iş değildir
Ortam haritası dolaylı dolgu ve yansıma verir; zeminde keskin kontur gölgesi için yine de yönsel / spot / nokta ışığı ve shadow map pass’leri gerekir (Gölge girişi, Pass maliyeti). İkisi birbirinin yerine geçmez; HDRI «stüdyo / gökyüzü refleksiyonu», gölgeler «ışık engeli» katmanıdır.
Hafif dolgu ihtiyacı için düşük yoğunluklu HemisphereLight veya Ambient yeterli olabilir; metal ve cam sınıfında ise ortam haritası sıklıkla zorunludur — bkz. PBR içgörü.
Three.js ve PMREM pipeline
Three.js, yüklenen HDRI dokusunu doğrudan piksel piksel örneklemez; önce işlenir.
PMREM (Prefiltered Mipmapped Radiance Environment Map)
Ortam radyansı kabaca şu adımlardan geçer:
- Farklı roughness seviyeleri için önceden filtrelenir.
- Mipmap benzeri katmanlar oluşturulur.
- GPU dostu, örnekleme dostu bir temsil elde edilir.
Sonuç: Çalışma anında daha hızlı ve stabil yansımalar; PBR için daha pürüzsüz sonuçlar.
Maliyet davranışı
PMREM üretimi yükleme anında maliyetlidir; hazırlandıktan sonra çalışma zamanı (runtime) tarafı genelde daha ucuzdır. Kısaca: yükleme pahalı → render daha ucuz.
PMREM, görüntü zincirinin bir aşamasıdır
Ortam hazırlandıktan sonra son görünüm; ton eşlemesi, pozlama ve piksel başına örnekleme ayarlarıyla aynı hatta okunur (Renderer · kritik parametreler). Bu sayfa ortam verisini anlatır; kare başına ek maliyet çoğunlukla materyal karmaşıklığı ve ışık sayısından gelir — PMREM üretimi ise tipik olarak yük / yeniden üretim anına yakındır.
PBR materyaller ve ortam etkileşimi
Ortam haritası, PBR (Physically Based Rendering) akışında yansıma ve dolaylı ışık için referans verisidir.
Metalness
Metal yüzeyler ortamı doğrudan yansıtır. Ortam yoksa metal yüzeyler çoğu zaman karanlık / ölü görünür.
Roughness (pürüzlülük)
Roughness arttıkça yansıma daha geniş açıdan örneklenir; detay yumuşar ve görsel olarak bulanıklaşır. Bu, yüzeyin mikro ölçekte ışığı farklı yönlere dağıtmasının sonucudur.
Kritik içgörü
HDRI / ortam haritası olmadan PBR materyaller eksik kalır; özellikle metal ve cam sınıfı yüzeylerde fark belirgindir.
Roughness ve doku örnekleme
Roughness arttıkça yansıma daha geniş açıdan örneklenir; bu düşünce doku temellerindeki filtre / mip fikriyle aynı ailedendir — fakat burada konu yüzey parametresi ile PMREM’in birlikte ürettiği ön filtreli ortam temsilidir, tek bir albedo dokusu değildir.
Tone mapping: HDR → ekran
HDR verisi, tipik ekranın gösterebileceği aralıktan geniştir. Bu yüzden tone mapping neredeyse her zaman gereklidir.
Aşırı pozlama (overexposure)
Tone mapping yoksa veya uyumsuzsa sahne aşırı parlak görünebilir; renk dengesi bozulur, yüksek ışıkta detay kaybolur.
ACESFilmic (önerilen)
Çoğu modern Three.js projesinde varsayılan tercih olarak ACESFilmic tone mapping kullanılır: daha doğal kontrast, dengeli highlight rolloff, sinematik bir görünüm.
HDR ile gölge tonu aynı problem değildir
Aşırı parlaklık genelde HDR + pozlama + tone mapping düzleminde çözülür; gölgede görülen acne veya sızıntı ise harita ve bias düzlemindedir (Bias & Shadow Acne). İki sınıf artefakti aynı sürgüyle düzeltmeye çalışmak çoğu zaman döngü üretir — önce hangi katmanda bozulduğunu ayırın.
Environment ve background (kritik ayrım)
scene.background→ Yalnızca görünen arka plan (gökyüzü / stüdyo rengi / doku).scene.environment→ Aydınlatma ve yansıma kaynağı olarak kullanılan ortam haritası.
Pratik: Çoğu üretim sahnesinde ikisini birlikte tutmak veya yalnızca
environment ile “stüdyo” hissi vermek yaygındır; ihtiyaca göre arka planı
gizleyip yalnızca yansıma/ışığı kullanmak da mümkündür.
Arka plan doku sözleşmesi
scene.background için kullanılan equirectangular veya küp görselleri, yükleme
ve bellek sözleşmesi olarak yine doku dosyalarıdır; örnekleme ve sıkıştırma tarafını
doku
temelleri sayfasıyla ilişkilendirin. scene.environment ise aydınlatma
için PMREM’e giden yolu açar — ikisi aynı nesne olmak zorunda
değildir.
Performans ve optimizasyon
Çözünürlük
1K–2K çoğu web sahnesi için yeterlidir; 4K+ görsel kazanç sıklıkla sınırlı, VRAM maliyeti ise belirgindir. HDRI büyük bir dokudur — çözünürlük seçimini bilinçli yap.
Environment intensity
Dolaylı ışığın gücünü ölçekler; çok yükseltmek sahneyi yıkanmış / düz gösterebilir.
// Örnek — sahne ortamının parlaklık ölçeği (Three.js sürümüne göre API adı değişebilir)
scene.environmentIntensity = 1.0;
PMREM ve yükleme stratejisi
HDRI yüklenince PMREM üretilir; bu yüzden gecikmeli yükleme (lazy loading) ve net bir yükleme ekranı kullanmak mantıklıdır.
Gölge maliyeti ile ortam maliyeti dik açıdır
HDRI çözünürlüğü ve PMREM üretimi bellek ve yükleme baskısı taşır; gölge üreten her ışık ise ekstra render pass taşır (Gölge hiyerarşisi). Birini düşürürken diğerini unutmayın — profil raporunda ikisi ayrı satır olarak görünür.
HoloDepth notu ve checklist
HoloDepth içgörüsü
Gölgenin davranışı arkasındaki gölge kamerasından geliyorsa, materyalin gerçekçiliği de büyük ölçüde arkasındaki PMREM / ortam verisinden gelir. Yansımalar donuksa veya metal yüzeyler “ölü” görünüyorsa önce şunları kontrol et: tone mapping, environmentIntensity, doğru ortam ataması — çözünürlüğü büyütmeden önce.
Checklist
- HDRI yüklendi ve PMREM hatasız üretildi mi?
- ACESFilmic tone mapping aktif mi?
- HDRI çözünürlüğü (1K–2K) sahne için uygun mu?
scene.environmentdoğru atanıyor mu?environmentIntensitydengeli mi?
Sıradaki modül: doku hattı
Ortam ve PBR köprüsünü kurduktan sonra, yüzeylere bağlanan albedo / normal / metal-rough dokuları için Texture temelleri sayfasına geçmek doğal devamdır; materyal API ayrıntıları için Materyal girişini el altında tutun.