Mint már említettük, a tárgyak színe a fény és az anyag kölcsönhatásából áll elő. A fényekkel megismerkedtünk az előző részben, ahol érintőlegesen már találkoztunk az anyagokkal. Most részletesebben tárgyaljuk ezek közül az alábbiakat.

• Material ősosztály és alap anyagjellemző (MeshBasicMaterial).
• Lambert (diffúz) megvilágítás képpontonkénti (per-fragment) árnyalással (MeshLambertMaterial).
• Phong (diffúz + spekuláris) megvilágítás képpontonkénti (per-fragment) Phong árnyalással (MeshPhongMaterial).
• Fizikai alapú leképezésre épülő, fémes-érdes megvilágítás számítás képpontonkénti árnyalással (MeshStandardMaterial).

A megértést segíti, ha tisztában vagyunk a megvilágítási modell és árnyalás fogalmakkal. Ezeket az oldal végén, a kiegészítő anyagrészben mutatjuk be.

Fontos!

A MeshLambertMaterial működése alapvetően megváltozott az r144 kiadásban! A korábbi csúcspont-alapú (per-vertex) árnyalásról képpontonkénti (per-fragment) árnyalásra írták át! A korábbi működésnek megfelelő anyag osztályt elérhetjük a példák között található MeshGouraudMaterial.js fájlban. Ha használni szeretnénk, a fájlt külön importálni kell a programunkba. Erre a 03_02_ThreeJsMaterialTester.html programban találhatunk példát. Akkor érdemes ezt a régi megközelítést használnuk, ha a megvilágítási számítások miatt nagyon lelassulna a programunk futása, ugyanis a per-vertex megközelítés sokkal kevesebb számítást igényel, és szerencsés esetben nem látunk nagy különbséget a MeshLambertMaterial-hoz képest.

A Three.js Material oszálynevekben keveredik az árnyalási algoritmus és a megvilágítási algoritmus megjelenése. A Gouraud árnyalás, a Lambert megvilágítási egyenlet, a Phong pedig mindkettő. MeshLambertGouraudMaterial (vagy MeshLambertPerVertexMaterial), MeshLambertPhongMaterial (vagy MeshLambertPerFragmentMaterial) és MeshPhongPhongMaterial (vagy MeshPhongPerFragmentMaterial) egyértelműbb megnevezések lennének.

Nagyon fontos tudni, hogy az egyszerű megvilágítási egyenletek nem veszik figyelembe, hogy a fényforrás és az objektum adott pontja között van-e más objektum. Így a fény mintha akadálytalanul "áthatolna" minden tárgyon, ami erősen sértheti a valósághűséget. Ha a takarásokat használni szeretnénk, akkor az árnyékolást be kell kapcsolni!

A megvilágítási modell definiálja a számításokat, matematikai képleteket, amelyekkel kialakul egy objektumpont képernyőn megjelenő színe. Gyors megjelenítést igénylő esetekben jellemzően az alábbi három klasszikus modellt valósítják meg.

• Az ambiens megvilágítás a legegyszerűbb modell, amelyben csak a fényforrás és az anyag színe játszik szerepet, a fény beérkezési iránya nem. Környezeti, szórt fénynek felel meg, amikor a fény nem közvetlenül érkezik az anyagra, hanem valamilyen közegen szóródva, többféle irányból (pl. a Nap fénye a felhőkön átjutva egy borult napon). Ezzel önmagában nem fogunk szép eredményt elérni, de a többi megvilágítási komponenst kiegészítheti egy globális fényhatással.
  
  
  
  
• A diffúz megvilágítás esetén az egyenletben megjelenik a fény színe, az anyag színe és a fény felszínre esési szöge. Több fényforrás esetén minden fényre kiértékelődik az egyenlet, és az így kapott színeket elegyíti a rendszer. Az ambiens komponenssel kombinálva Lambert megvilágításnak nevezik.
  
  
  
  
• A Phong megvilágítás a Lambertnél leírtak mellett figyelembe veszi azt is, hogy a megfigyelő (a kamera) hol található a felszínről visszaverődő fényirányhoz képest, és hogy milyen az anyag csillogási fényvisszaverő képessége. Amennyiben a visszaverődő fény a kamerába jut (a β szög 0 fok körüli), a visszaverődő fény színét látjuk, növekvő β szögek esetén egyre inkább a Lambert megvilágítás színe érvényesül. Egy csillogási paraméterrel szabályzhatjuk a β szögtől való függést.
  
  
  
  

A megvilágítási modellek tehát azt mondják meg, hogy egy adott pontban milyen szín alakul ki. Kérdés még, hogy ezeket az egyenleteket milyen pontokban, és ott milyen paraméterekkel értékeljük ki? Ez az árnyalás témaköre. Itt háromféle megoldás jelenik meg.

• Egyszínű árnyalás esetén minden háromszöghöz 1 darab színt határozunk meg, például a háromszöget definiáló csúcspontok közül az elsőhöz tartozót, a három csúcsponthoz rendelt színek átlagát, vagy a háromszöget egy objektumként kezelve az objektumhoz rendelt színt, és ezt a színt használjuk a háromszög belső pontjainak kiszínezéséhez. Kevés számítást igénylő, nagyon gyors módszer, de az eredmény csak akkor elfogadható, ha eleve egyszínű háromszögeket szeretnénk modellezni.
• A csúcspont-alapú, vagy angol terminológiával per-vertex árnyalás esetén a megvilágítási egyenleteket csak a háromszög csúcspontjaiban számítjuk ki, a háromszög belső képpontjai a csúcspontokban meghatározott színek alapján valamilyen számítási módszerrel előálló színt kapják. Vagyis a szín itt már képpontonként változhat. Egy klasszikus per-vertex algoritmus a Gouraud árnyalás, amikor a háromszög belső képpontjai a csúcspontokban számított színek interpoláltjaként számítódnak, vagyis a csúcspontoktól való távolság függvényében a három szín elegye adja a kitöltési színt. Nagy méretű háromszögek esetén a lokális fényhatások (például reflektorfény) torzulhatnak.
• Jellemzően a képpontonkénti, per-fragment árnyalás adja a legszebb eredményt, de jóval több számítás árán. Ebben az esetben a belső képpontok mindegyikére kiszámítjuk a megvilágítási egyenleteket. Ha belegondolunk, egy háromszöghöz három csúcspont tartozik, belső képpont viszont lehet több ezer vagy millió darab is! Egy klaszikus per-fragment algoritmus a Phong árnyalás, ahol a fény felszínre esési szögének számítása történik a csúcspontokban definiált normálvektorok interpoláltjait használva. Normálvektorokkal a következő témakörben foglalkozunk majd.