holodepth

Three.js · Işık ve görünürlük

Işığın doğası ve dijital illüzyon

3D dünyada hiçbir nesne, üzerine düşen bir enerji kaynağı olmadan "görülebilir" değildir. Dijital evrende ise "ışık" dediğimiz şey fotonların dansı değil; karmaşık matematiksel denklemlerin pikseller üzerindeki sonucudur.

Fizikten piksele: ışık nasıl hesaplanır?

Fiziksel evrende ışık nedir?

Işık, hem bir parçacık (foton) hem de bir elektromanyetik dalga olarak modellenebilen, evrenin hız limitini belirleyen temel bir enerji biçimidir.

  • Fotonların yolculuğu: Işık bir kaynaktan çıkar, yüzeylere çarpar; bir kısmı emilir (absorpsiyon), bir kısmı yansır (reflection), bir kısmı kırılır (refraksiyon).
  • Uzayda ışık: Uzayın kendisi karanlıktır; çünkü ışığın çarpıp saçılacağı yoğun bir atmosfer veya madde yoktur. Bir astronotun kaskındaki parlamayı görmemizin nedeni, Güneş'ten gelen ışığın kaskın materyaliyle etkileşmesidir.

Bilgisayar grafikleri ve Three.js'te ışık

Yazılım dünyasında ışık, trilyonlarca foton gönderen bir fizik simülasyonu değildir. Ray tracing gibi teknikler, ışığın gerçek dünyadaki yolunu daha doğru simüle etmeyi hedefler; buna karşılık gerçek zamanlı raster hatlarında (WebGL / Three.js'in tipik kullanımı) bu maliyetli yol izleme yerine yaklaşık modeller tercih edilir.

  • Matematiksel veri: Dijital ışık, GPU'ya gönderilen yön (direction), konum (gerektiğinde), renk / yoğunluk (color, intensity) gibi parametrelerle temsil edilir.
  • Aydınlanma hesabı (Lambert): Bu aydınlanma hesabı, yüzey normali (N) ile ışık yönü (L) arasındaki dot product (N · L) işlemiyle yapılır; iki vektör aynı yarım uzayda hizalı oldukça N · L büyür, dikleştikçe küçülür (genelde max(0, N·L) ile negatif taraflar kesilir). Bu temel diffuse modele Lambert yansıması denir.

Bu tür yüzey rengini ışık ve geometriden türetme süreci genel olarak shading (gölgelendirme / aydınlanma hesabı) olarak adlandırılır.

Gerçek ışık ve sanal (raster) ışık

Dijital dünyada gerçekliği taklit etmek için sık sık kısayol ve hiyerarşik modeller kullanırız. Aşağıdaki tablo, temel farkları özetler.

Özellik Gerçek dünyada ışık Sanal (raster) ışık
Yansıma (bounce) Işık çarptığı yüzeylerden çoğalarak ortamı dolaylı olarak aydınlatır. Çoğu gerçek zamanlı hattta ışık "çarptığı yerde" hesaplanır; dolaylı aydınlanma için ek teknikler (GI, IBL, light probe…) gerekir.
Hız Vakumda yaklaşık 299,792,458 m/s. Anlık kabul edilir; fragment shader'da çarpma ve toplama işlemleriyle üretilir.
Gölge Işığın engellendiği bölgelerde doğal olarak oluşur. Genelde shadow map gibi ekstra dokular ve ek pass ile taklit edilir; maliyetlidir.
Sınır Pratikte sayısız foton. Sahne performansı için genelde sınırlı sayıda aktif ışık (ör. birkaç doğrudan kaynak) ile çalışılır.

PBR ve enerji korunumu

Modern gerçek zamanlı grafikte PBR (Physically Based Rendering), sanal ışığın tutarlı görünmesi için enerji korunumu ilkesini taklit eder: bir yüzeyden yansıyan ışık, gelen ışıktan daha parlak olamaz. Three.js bu tür hesapları MeshStandardMaterial gibi PBR materyallerde sizin yerinize birleştirir.

Holodepth notu: Neden ışıksız sahne karanlıktır?

MeshBasicMaterial dışındaki çoğu materyal (MeshStandardMaterial, MeshPhongMaterial, MeshLambertMaterial vb.) aydınlanma denklemi için ışık kaynağı veya uygun çevre / emisyon verisi ister. Sahnede ışık yoksa ilgili terimler pratikte sıfıra yaklaşır ve sonuç siyah pikseller olur. Sanal evrende "varlık", ışığın matematiksel onayıyla görünür hale gelir.

Soruna cevap: Işıkları görsel olarak nasıl gösterebiliriz?

Işıkları yalnızca kodda değil, dökümantasyonda ve hata ayıklamada anlaşılır kılmak için şu yöntemler sık kullanılır:

  • Helper'lar: Three.js'in yerleşik PointLightHelper, DirectionalLightHelper, SpotLightHelper gibi araçlarıyla kaynağın konumu ve yönü sahnede çizgisel olarak gösterilebilir.
  • Vektör diyagramları: Yüzey normali N ile ışık yönü L arasındaki açı θ (theta) diyagramlarla gösterildiğinde, diffuse aydınlanmanın geometrisi netleşir.
  • Karşılaştırmalı render: Aynı sahneyi farklı ışık türleriyle (ör. ortam + yönlü, yalnız spot) yan yana göstermek, her kaynağın "karakterini" hızlıca kavratır.

Three.js'te bu matematiksel modeli farklı şekillerde kullanan ışık türleri şu sırayla ele alınır (önce en basit ortam katmanından başlayıp yönlü ve konumsal kaynaklara doğru ilerleriz): AmbientLight, HemisphereLight, DirectionalLight, PointLight, SpotLight ve RectAreaLight. Bir sonraki adım Ortam ışığı (AmbientLight); kenar çubuğundaki Işık kaynakları ağacı da aynı düzeni izler.