Skip navigation

Fények, anyagok, árnyékok

Témakörök

Az előző példaprogramjaink nem voltak túl látványosak. Drótvázas, vagy csupa egyszínű lapokból felépülő felszínek nem adják jól vissza a 3D hatást. A kettő kombinációja már jobb, de mesterséges hatást kelt.

A valóságot jobban közelítő technika az, amikor fényeket modellezünk, a tárgyainkhoz pedig anyagjellemzőket rendelünk. A megjelenő tárgy lapjainak színe a fény és az anyag kölcsönhatásából alakul ki. Itt már számít többek között a fény színe, intenzitása, az anyag reagálása a fényre, csillogási képessége, valamint a fény beesési iránya a felszínre. Mint látni fogjuk, sokféle paramétert adhatunk meg és nem minden kombináció fog látványos eredményt adni, gyakorlat és tapasztalat kell hozzá.

A fény természetes velejárója az árnyék. Egyszerűnek tűnhet, de a gyakorlatban nagyon számításigényes a generálása, ezért külön gondoskodnunk kell a megfelelő beállításokról.

Az alábbi témaköröket érintjük.

Fényforrások

  • Ambiens (környezeti) fény
  • Pontfény
  • Reflektorfény
  • Irányfény (távoli fény)

Anyagjellemzők

  • Alap (egyszerű) anyag
  • Diffúz (Lambert árnyalással)
  • Spekuláris (Phong árnyalással)
  • Fémes-érdes fizikai alapú modell

Árnyékhatás beállítása

  • Teendők a renderelő, a fényforrások és az anyagok esetén.

A Three.js számos további, összetettebb lehetőséggel bír, mint például az átlátszóság, területi kiterjedéssel rendelkező fényforrások, illetve saját magunk is írhatunk kódot különféle fényhatások elérésére. Ezeket itt nem tárgyaljuk.

Fizikai alapú leképezés

Fontos megjegyezni, hogy a Three.js r155 kiadásától jelentősen átalakult a megvilágítás működése!

A korábbi, egyszerűbb számítási mód helyett kizárólagosan átálltak a manapság iparági sztenderdnek számító fizikai alapú leképezésre (physical based rendering -- PBR). Így más rendszerekkel (Blender, Unity, Unreal, az Autodesk cég termékei, stb.) kompatibilisebb fényforrás definíciókat tudunk használni.

A változás lényege, hogy korábban a fényforrás intenzitás paramétere egy [0.0, 1.0] közötti százalékos értéket jelentett. A 0.0 érték esetén a fénynek nem volt hatása, az 1.0 érték a maximálisnak felelt meg. Lehetőségünk volt az 1.0 értéknél nagyobbat megadni, azzal túltelített fényt tudtunk létrehozni.

Az új változatban az intenzitás paraméter fizikai jelentéssel bír, a fényforrás fényerősségét jelenti fizikai mennyiségként, mértékegysége a kandela.

Ez a változás azzal jár, hogy a fényforrás objektumok létrehozásakor oda kell figyelnünk az intenzitás paraméter megfelelő megadására, amiben szerepet játszik, hogy a fényforrás és a megvilágítandó objektumok a modellező térben milyen távolságra vannak egymástól. Nagyobb távolság esetén magasabb fényerőértéket kell megadnunk. Az alapértelmezett 1.0 érték általában túlságosan sötét eredményt ad. Távolságtól függően százas, ezres, de akár milliós értékek is szóba jöhetnek.

A modellezés során az objektumok távolságára és méretére vonatkozóan a javaslat az, hogy 1 modellezési egység a fizikai valóságban 1 méternek feleljen meg. Ettől természetesen eltérhetünk.

Bővebb információ angol nyelven:

Sugárkövetés

Fontos megérteni, hogy a Three.js (de ugyanez igaz az alapját képző WebGL, OpenGL szabványokra is) modellezés lényege a gyorsan változó interaktív animáció modellezése. Vagyis másodpercenként sokszor szükséges a folyamatosan változó paraméterek szerint újragenerálni a látványt. Ehhez gyorsan számítható matematikai egyenletek szükségesek. Ezek használatával viszont csak a valóság egy nem túl pontos közelítését kapjuk.

A fizikai folyamatok pontosabb modellezésével szebb eredményt kapunk. Matematikailag leírható a közeghatárokon a fénytörés, felszínről való visszaverődés pontosabb modellezése, pontosabb árnyékhatások, a tükröződő fény megvilágíthat további objektumokat, stb. Ezen a hatásokat például a sugárkövetés (ray-tracing) technikával oldhatjuk meg. A 2010-es években ezek a számítások még sok időt igényeltek, de a GPU-k fejlődésével manapság már valós időben is elérhető a sugárkövetés bizonyos elemeinek támogatása.

Történtek kísérletek Three.js-ben is sugárkövetéses renderer megvalósításra, de a fejlesztésük befejeződött, elavultak. Érdekességként ezekről az alábbi linkeken tájékozódhatunk.