holodepth

Three.js · Işık ve materyaller · Ortam

Environment & HDRI: sahnenin dolaylı ışık mühendisliği

Metal yalnızca “metal renginden” gelmez. Gerçekçilik yalnızca sahneye koyduğun ışık objelerinden değil; çevreden gelen yansıma ve dolaylı aydınlatmadan da üretilir. MeshStandardMaterial ile parlak bir yüzey tasarladınız ama sonuç hâlâ düz ve karanlık mı? Çoğu zaman eksik parça, doğrudan lamba değil; ortam verisidir.

Modern 3B web sahnelerinde ortam haritası (scene.environment) ve HDRI, objelerin sahne ile fiziksel bir bağ kurmasını sağlar; “havada asılı” hissini azaltır. PBR materyallerin metal, cam ve yarı mat yüzeylerde anlamlı görünmesi için ortam katmanı sıklıkla zorunlu sayılır; felsefi çerçeve Materyal girişi · çevre yansıması bölümünde, uygulama ve aç/kapa demosu MeshStandardMaterial sayfasındadır.

Bağlam: Işığın doğası, AmbientLight (yönsüz dolgu; IBL ile çift dolgu riski), HemisphereLight, Gölge girişi, Doku temelleri (sıradaki modül adımı).

Bu sayfa «neden çevre gerekir?» sorusunu Materyal girişinde bırakıp HDRI → PMREM → scene.environment → tone mapping hattını okutmak için yazıldı; uygulama tarafında ortam laboratuvarı (holodepth-env-relic.glb) ile IBL / background ayrımını sahada deneyebilirsiniz; metalness sürgüsü ve tam PBR parametreleri MeshStandardMaterial demosunda kalır.

Sahne, ortam ve materyal (hatırlatıcı)

Bileşen Teknik karşılık Bu sayfayla ilişki
Ortam ataması scene.environment PMREM işlenmiş kübik doku; sahne genelinde IBL kaynağı. Konum taşımaz; tüm uygun materyaller aynı çevreyi okur.
Ön işleme PMREMGenerator Ham HDR / equirectangular dokuyu roughness katmanlarına ayırır; yükleme anında maliyet, runtime’da ucuz örnekleme.
Materyal MeshStandardMaterial / MeshPhysicalMaterial metalness ve roughness ortam yansımasını birlikte okur; ortam yoksa metal “ölü”, cam “siyah” kalır.
Arka plan scene.background Yalnızca görünen gökyüzü / stüdyo rengi; aydınlatma zorunluluğu yok. Ortam ile aynı doku olmak zorunda değildir (aşağıda ayrım).

Bu tablo kurulum sırasını değil, çalışma anında hangi sahne alanının ne iş gördüğünü hatırlatır. AmbientLight veya HemisphereLight yönsüz dolgu verirken ortam haritası yönlü yansıma bilgisi taşır; ikisi birlikte kullanıldığında parlaklık yıkaması riski doğar ( Ambient · IBL çift dolgu).

HDRI ve IBL (Image Based Lighting)

Zihin modeli: stüdyo aynası, lamba değil

  • Kaynak: 360° ortam fotoğrafı veya prosedürel stüdyo sahnesi (HDR / equirectangular).
  • Yön: Her yönden gelen dolaylı radyans; güneş diski gibi tek vektör taşımaz.
  • Gölge: Üretmez; zemin kontur gölgesi için yine DirectionalLight + shadow map gerekir.
  • Amaç: Metal/cam yansıması, difüz dolgu ve “sahnenin bir yerde durduğu” hissi.

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)
Dinamik aralık: LDR ve HDRI
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ü.

Ambient / Hemisphere ile karıştırma

AmbientLight ve HemisphereLight hızlı, ucuz ve yönsüz dolgu verir; öğretim sahnelerinde ve hafif web vitrinlerinde yeterli olabilir. IBL ise çevrenin renk ve parlaklık dağılımını taşır; metalik yüzeylerde fark gece gündüzdür. Üretim hedefi foto-realistik PBR ise çoğu ekip düz gri ambient yerine HDRI + düşük şiddetli tamamlayıcı ışıklara geçer ( Ambient · modern alternatif, Hemisphere ≠ IBL).

Holodepth sırası: önce yönsüz dolgu ışıklarını ( Ambient, Hemisphere), sonra ana yönsel ışıklar, ardından bu sayfadaki ortam hattı; böylece «gölge içi neden siyah?» ile «metal neden cansız?» soruları ayrı katmanlarda çözülü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.

Ortam nereden gelir?

Üretimde en yaygın yol: diskten .hdr / .exr yükleyip PMREMGenerator.fromEquirectangular(...) ile işlemek ( RGBELoader veya eşdeğeri). Öğretim ve hızlı prototipte Three.js ekosisteminde sık görülen alternatif, küçük bir prosedürel stüdyo sahnesinden PMREMGenerator.fromScene(...) ile ortam üretmektir; bu yol MeshStandardMaterial demosunda IBL aç/kapa karşılaştırması için kullanılır. İkisi de aynı scene.environment alanına yazar; fark veri kaynağı ve yükleme maliyetindedir, materyal denkleminde değil.

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. Harita tabanlı roughness için Roughness map sayfasına; canlı materyal sürgüleri için MeshStandardMaterial demosuna geçin; burada yalnızca ortam katmanının PBR denklemindeki rolü sabitlenir.

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.

Tone mapping eğrilerinin (Reinhard, Filmic, ACES) karşılaştırmalı derinliği, bloom ile sıra ilişkisi ve exposure sürgüleri Tone mapping sayfasında ele alınır; ortam sayfasında yalnızca HDR ortam verisi → LDR ekran köprüsünü hatırlatırız: HDRI yükledikten sonra renderer tarafında uyumsuz eğri kalmışsa metal highlight’lar patlar.

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. 

// Kavramsal ayrım — aynı PMREM dokusu iki role de atanabilir
const envMap = pmrem.fromEquirectangular(hdrTexture).texture;
scene.environment = envMap;   // IBL: aydınlatma + yansıma
scene.background = envMap;    // Görünen gökyüzü (isteğe bağlı)
// scene.background = null;   // Yalnız IBL, arka plan düz renk / post-FX

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.

İnteraktif: Ortam laboratuvarı

Referans model holodepth-env-relic (Meshy · yerel assets/models/gltf/) fırçalanmış taban, ayna boyun ve facet’li üst gövde ile aynı scene.environment altında farklı yansıma okur. Üst panelden scene.environment’ı kapatıp açın; arka plan modunu (düz renk / ortam ile aynı / null) değiştirerek bölüm 5’teki ayrımı gözle doğrulayın. Ortam preset’leri harici .hdr dosyası yüklemeden prosedürel PMREM üretir; üretim akışında aynı slot’a diskten HDR bağlanır.

Readout satırı anlık durumu özetler; model dosyası ~27 MB olduğu için ilk yüklemede gecikme normaldir ( lazy loading notu). Sayısal sabitler demo tablosunda diagram-environment-hdri-lab.js ile eşlenir.

Referans sahne · holodepth-env-relic.glb · IBL / background Başlatılıyor…
—

Ortam: PMREMGenerator.fromScene · preset warm/cool · ACESFilmicToneMapping exposure 1.08. IBL kapalıyken fillBoost ile ambient / directional / nokta dolgu güçlenir. Hafif DirectionalLight shadow map kontur için açık. Model GLB materyalleri korunur; emissive üst sınır kodda ~1.15. Orbit + yavaş dönüş; zemin Holodepth halka vitrini. Harici HDR URL bu lab’de yok; slot aynıdır.

Demo sabitleri tablosu (ortam laboratuvarı)

initEnvironmentHdriLab · GLB yükleme + otomatik ölçek / taban hizası · iki prosedürel PMREM · IBL aç/kapa · background modu · intensity sürgüsü.

initEnvironmentHdriLab · holodepth-env-relic lab
Sahne / rol Parametre Değer Tür
Model GLTFLoader assets/models/gltf/holodepth-env-relic.glb · hedef yükseklik 1.35 · emissive clamp ≤ 1.15 🔒 Sabit
Renderer WebGLRenderer ACESFilmicToneMapping · exposure 1.08 · gölge PCFSoft · arka plan varsayılan 0x070a12 🔒 Sabit
PMREM · warm fromScene σ 0.022 · sıcak/soğuk directional + nokta + emissive küre 🔒 + ↔ UI
PMREM · cool fromScene σ 0.028 · turkuaz / mor Holodepth palette 🔒 + ↔ UI
IBL açık scene.environment seçili preset dokusu · environmentIntensity sürgü 0–3 (varsayılan 1.65) · dolgu fillLow 🔒 + ↔ UI
IBL kapalı scene.environment null · dolgu fillBoost (ambient 0.42, key 1.45, rim 0.62, accent 0.95) 🔒 + ↔ UI
Arka plan modu scene.background düz renk · ortam dokusu · null ↔ UI
Kamera OrbitControls fov 38 · hedef (0, 0.72, 0) · mesafe 1.85–8.5 🔒 Sabit

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.environment doğru atanıyor mu?
  • environmentIntensity dengeli 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.