Skip navigation

Csillogó (spekuláris) megvilágítás Phong árnyalással

Jellemzői és használata

A spekuláris megvilágítással csillogó objektumok modellezésére van lehetőség, amit a MeshPhongMaterial objektummal tehetünk meg.

A spekuláris megvilágítás esetén a diffúz megvilágításnál látottak mellett az is számít, hogy a kamera nézeti iránya hogyan helyezkedik el a fény felszínről való visszatükröződésének irányától. Ha a tárgy jó fényvisszaverő képességgel rendelkezik (pl. fémes tárgyak, tükör, stb.), akkor ha a kamera a vetítési iránya a visszatükröződés irányának közelében van, akkor a fényforrás színét látjuk. Ahogy ez a szög növekszik, egyre inkább a tárgy diffúz megvilágított színe jelenik meg. Matt objektumok esetén a visszaverődés irányában lévő kamera sem fogja a fény színét látni, mert a fény a felszínen több irányban szóródik.

A specular attribútummal a csillogás színét, a shininess attribútummal pedig a csillogás mértékét adhatjuk meg [0,100] tartományban (matt-fényes). A specular anyagszín is kölcsönhatásba lép a fény színével. Ha a metal attribútumot igazra állítjuk, akkor kicsit másként számolódik a szín, hogy fémszerűbb hatást kapjunk. Nagy különbséget nem igen fogunk észrevenni.

A Phong árnyalás azt jelenti, hogy a megvilágítási egyenleteket a síkidom minden belső képpontjában is kiértékeli, nem csak a csúcspontokban. A beesési szög számításához szükséges normálvektor irányt a csúcspontok normálvektorainak interpolációjával számítja ki. Számításigényesebb, mint a diffúz-Lambert modell, de látványosabb is.

Használata

var material = new THREE.MeshPhongMaterial( {
color: 0xa0adaf,
shininess: 80,
specular: 0x111111,
side: THREE.FrontSide,
wireframe: false
} );

Dokumentáció interaktív példával

Megjegyzés

Fontos különbséget tenni a megvilágítási modell és az árnyalás között. Lenne értelme pl. diffúz megvilágítás esetén is Phong árnyalást használni, de a Three.js erre nem ad objektumot. Természetesen megírhatjuk magunknak, ha szeretnénk...

Feladatok

Próbáljuk ki a Learning Three.js könyv 3.2 példaprogramját!

  • Link: http://www.smartjava.org/ltjs/chapter-03/02-point-light.html.
  • Egy térben mozgó pontszerű fényforrást látunk, amely megvilágítja a három másik objektumot.
  • Változtassuk az ambiens színt is!
    • Ha az intensity paramétert 0-ra állítjuk, akkor csak az ambiens fény hatását látjuk!
  • Figyeljük meg, hogy a síklap objektum megvilágítása nem helyes!
    • A fény a sarkok közelébe érve fényes hatást fejt ki, de onnan távolodva nem világítja meg a belső pontokat!
    • A probléma az, hogy a megvilágítási egyenletek csak a síkidomok csúcspontjaiban értékelődnek ki, a belső pontok ezek interpolált színértékét kapják. A síklapot pedig két háromszögből (irányonként 1 sáv) rakták össze, vagyis csak a négy sarokpontban lesz korrekt megvilágítás!
      • var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
    • Megoldás: a síklap létrehozásakor sűrítsük meg a sávok számát, pl.:
      • var planeGeometry = new THREE.PlaneGeometry(60, 20, 30, 10);
  • Tanulság
    • Lambert anyagmodell esetén akkor kapunk szép megvilágítási eredményt, ha a felszínháló pontjai elég sűrűn helyezkednek el.
    • Használhatunk Phong anyagmodellt is, az a belső pontokban is számol megvilágított színt, viszont a felszín csillogó hatású lesz.

Javított példaprogram verziók

Modellezés paraméterei

  • Talaj anyagjellemzők: sárga szín (0xffff00), fehér spekuláris szín (0xffffff), magas csillogási érték (80).
  • Pontfény jellemzők: fehéres szín (0xccffcc), talajhoz közeli elhelyezkedés (3, 5, 3).
  • Ambiens fény: sötétszürke (0x404040).