WebGL árnyéktérképezés: Átfogó útmutató a valós idejű rendereléshez

A 3D számítógépes grafika világában kevés elem járul hozzá jobban a realizmushoz és az immerzióhoz, mint az árnyékok. Kulcsfontosságú vizuális jelzéseket adnak az objektumok közötti térbeli viszonyokról, a fényforrások helyzetéről és a jelenet általános geometriájáról. Árnyékok nélkül a 3D világok laposnak, szétesőnek és mesterségesnek tűnhetnek. A WebGL által hajtott web-alapú 3D alkalmazások esetében a magas minőségű, valós idejű árnyékok megvalósítása a professzionális szintű élmények fémjele. Ez az útmutató mélyrehatóan bemutatja ennek eléréséhez a legalapvetőbb és legszélesebb körben használt technikát: az árnyéktérképezést.

Legyen szó tapasztalt grafikus programozóról vagy a harmadik dimenzióba merészkedő webfejlesztőről, ez a cikk felvértezi Önt azzal a tudással, amellyel megértheti, implementálhatja és hibakereséssel javíthatja a valós idejű árnyékokat WebGL projektjeiben. Az alapvető elmélettől a gyakorlati megvalósítás részleteiig vezetjük, feltárva a gyakori buktatókat és a modern grafikus motorokban használt haladó technikákat.

1. fejezet: Az árnyéktérképezés alapjai

Lényegét tekintve az árnyéktérképezés egy okos és elegáns technika, amely egy egyszerű kérdés feltevésével dönti el, hogy egy pont a jelenetben árnyékban van-e: „Látja-e ezt a pontot a fényforrás?” Ha a válasz nem, az azt jelenti, hogy valami blokkolja a fényt, és a pontnak árnyékban kell lennie. Ahhoz, hogy ezt a kérdést programozottan megválaszoljuk, egy kétmenetes renderelési megközelítést alkalmazunk.

Mi az az árnyéktérképezés? Az alapkoncepció

Az egész technika a jelenet kétszeri renderelésén alapul, minden alkalommal más nézőpontból:

• 1. menet: A mélységi menet (A fényforrás nézőpontja). Először az egész jelenetet a fényforrás pontos pozíciójából és orientációjából rendereljük. Ebben a menetben azonban nem törődünk a színekkel vagy textúrákkal. Az egyetlen információ, amire szükségünk van, a mélység. Minden renderelt objektum esetében rögzítjük annak távolságát a fényforrástól. Ezt a mélységi értékekből álló gyűjteményt egy speciális textúrában tároljuk, amelyet árnyéktérképnek vagy mélységtérképnek nevezünk. Ennek a térképnek minden pixele a fényforrás nézőpontjából, egy adott irányban a legközelebbi objektum távolságát képviseli.
• 2. menet: A jelenet menete (A kamera nézőpontja). Ezután a jelenetet a szokásos módon rendereljük, a fő kamera nézőpontjából. De minden egyes kirajzolt pixel esetében egy további számítást végzünk. Meghatározzuk a pixel 3D-s térbeli pozícióját, majd feltesszük a kérdést: „Milyen messze van ez a pont a fényforrástól?” Ezt a távolságot aztán összehasonlítjuk az árnyéktérképünkben (az 1. menetből) a megfelelő helyen tárolt értékkel.

A logika egyszerű:

• Ha a pixel jelenlegi távolsága a fénytől nagyobb, mint az árnyéktérképben tárolt távolság, az azt jelenti, hogy egy másik objektum közelebb van a fényhez ugyanazon látóvonal mentén. Ezért a jelenlegi pixel árnyékban van.
• Ha a pixel távolsága kisebb vagy egyenlő, mint az árnyéktérképben lévő távolság, az azt jelenti, hogy semmi sem blokkolja, és a pixel teljesen meg van világítva.

A jelenet beállítása

Az árnyéktérképezés WebGL-ben történő implementálásához több kulcsfontosságú komponensre van szükség:

• Fényforrás: Ez lehet egy irányított fény (mint a nap), egy pontfény (mint egy villanykörte), vagy egy spotlámpa. A fény típusa határozza meg, hogy milyen típusú projekciós mátrixot használunk a mélységi menet során.
• Framebuffer Object (FBO): A WebGL általában a képernyő alapértelmezett framebufferére renderel. Az árnyéktérképünk létrehozásához szükségünk van egy képernyőn kívüli renderelési célra. Az FBO lehetővé teszi, hogy a képernyő helyett egy textúrába rendereljünk. Az FBO-nk egy mélységi textúra csatolásával lesz konfigurálva.
• Két shader készlet: Szükség lesz egy shader programra a mélységi menethez (egy nagyon egyszerűre) és egy másikra a végső jelenet menethez (amely az árnyékszámítási logikát fogja tartalmazni).
• Mátrixok: Szükség lesz a szokásos modell-, nézeti- és projekciós mátrixokra a kamera számára. Kulcsfontosságú, hogy a fényforráshoz is szüksége lesz egy nézeti és projekciós mátrixra, amelyeket gyakran egyetlen „fény-tér mátrixba” vonnak össze.

2. fejezet: A kétmenetes renderelési folyamat részletesen

Bontsuk le a két renderelési menetet lépésről lépésre, a mátrixok és shaderek szerepére fókuszálva.

1. menet: A mélységi menet (A fényforrás nézőpontjából)

Ennek a menetnek a célja a mélységi textúránk feltöltése. Így működik:

1. Az FBO bekötése: Rajzolás előtt utasítjuk a WebGL-t, hogy a vászon helyett a saját FBO-nkba rendereljen.
2. A nézetablak beállítása: A nézetablak méreteit az árnyéktérkép textúrájának méretéhez igazítjuk (pl. 1024x1024 pixel).
3. A mélységi puffer törlése: Győződjünk meg róla, hogy az FBO mélységi puffere törölve van a renderelés előtt.
4. A fényforrás mátrixainak létrehozása:
   • Fény nézeti mátrix: Ez a mátrix a világot a fényforrás nézőpontjába transzformálja. Irányított fény esetén ezt általában egy `lookAt` függvénnyel hozzuk létre, ahol a „szem” a fény pozíciója, a „cél” pedig az az irány, amerre mutat.
   • Fény projekciós mátrix: Egy irányított fény esetében, amelynek párhuzamos sugarai vannak, ortografikus projekciót használunk. Pontfények vagy spotlámpák esetében perspektivikus projekciót használunk. Ez a mátrix határozza meg a tér azon térfogatát (egy dobozt vagy egy csonka gúlát), amely árnyékot vet.
5. A mélységi shader program használata: Ez egy minimális shader. A vertex shader egyetlen feladata, hogy a vertex pozícióját megszorozza a fény nézeti és projekciós mátrixaival. A fragment shader még egyszerűbb: csak beírja a fragment mélységi értékét (a z-koordinátáját) a mélységi textúrába. Modern WebGL-ben gyakran nincs is szükség egyedi fragment shaderre, mivel az FBO beállítható úgy, hogy automatikusan rögzítse a mélységi puffert.
6. A jelenet renderelése: Rajzoljuk ki az összes árnyékot vető objektumot a jelenetben. Az FBO most már tartalmazza a kész árnyéktérképünket.

2. menet: A jelenet menete (A kamera nézőpontjából)

Most rendereljük a végső képet, felhasználva az imént létrehozott árnyéktérképet az árnyékok meghatározásához.

1. Az FBO kikötése: Váltsunk vissza az alapértelmezett vászon framebufferre való renderelésre.
2. A nézetablak beállítása: Állítsuk vissza a nézetablakot a vászon méreteire.
3. A képernyő törlése: Töröljük a vászon szín- és mélységi puffereit.
4. A jelenet shader program használata: Itt történik a varázslat. Ez a shader bonyolultabb.
   • Vertex Shader: Ennek a shadernek két dolgot kell tennie. Először is, kiszámítja a végső vertex pozíciót a kamera modell-, nézeti- és projekciós mátrixainak felhasználásával, a szokásos módon. Másodszor, ki kell számítania a vertex pozícióját a fényforrás nézőpontjából is, az 1. menetből származó fény-tér mátrix segítségével. Ezt a második koordinátát egy `varying` változóként továbbítja a fragment shadernek.
   • Fragment Shader: Ez az árnyéklogika magja. Minden fragment esetében:
     1. Megkapja az interpolált pozíciót fény-térben a vertex shadertől.
     2. Elvégez egy perspektivikus osztást ezen a koordinátán (az x, y, z elosztása w-vel). Ez átalakítja azt Normalizált Eszköz Koordinátákká (NDC), amelyek -1 és 1 között mozognak.
     3. Átalakítja az NDC-t textúra koordinátákká (amelyek 0 és 1 között mozognak), hogy mintát vehessünk az árnyéktérképünkből. Ez egy egyszerű skálázási és eltolási művelet: `texCoord = ndc * 0.5 + 0.5;`.
     4. Ezekkel a textúra koordinátákkal mintát veszünk az 1. menetben létrehozott árnyéktérkép textúrából. Ezzel megkapjuk a `depthFromShadowMap` értéket.
     5. A fragment jelenlegi mélysége a fény nézőpontjából az átalakított fény-tér koordináta z-komponense. Nevezzük ezt `currentDepth`-nek.
     6. A mélységek összehasonlítása: Ha `currentDepth > depthFromShadowMap`, a fragment árnyékban van. Ehhez az ellenőrzéshez egy kis biaszt (eltolást) kell hozzáadnunk, hogy elkerüljük az „árnyék aknénak” nevezett hibát, amit a következőkben tárgyalunk.
     7. Az összehasonlítás alapján határozzunk meg egy árnyékfaktort (pl. 1.0 a megvilágított, 0.3 az árnyékolt esetében).
     8. Alkalmazzuk ezt az árnyékfaktort a végső színkalkulációra (pl. szorozzuk meg az ambient és diffúz világítási komponenseket az árnyékfaktorral).
5. A jelenet renderelése: Rajzoljuk ki az összes objektumot a jelenetben.

3. fejezet: Gyakori problémák és megoldások

Az alapvető árnyéktérképezés implementálása során hamar felfedezhető több gyakori vizuális hiba. Ezek megértése és javítása kulcsfontosságú a magas minőségű eredmények eléréséhez.

Árnyék akne (önárnyékolási hibák)

A probléma: Furcsa, hibás sötét vonalakból vagy Moiré-szerű mintázatokból álló mintákat láthat olyan felületeken, amelyeknek teljesen megvilágítottnak kellene lenniük. Ezt „árnyék aknénak” nevezik. Azért fordul elő, mert az árnyéktérképben tárolt mélységi érték és a jelenet menete során számított mélységi érték ugyanarra a felületre vonatkozik. A lebegőpontos pontatlanságok és az árnyéktérkép korlátozott felbontása miatt apró hibák okozhatják, hogy egy fragment helytelenül úgy ítéli meg, hogy saját maga mögött van, ami önárnyékoláshoz vezet.

A megoldás: Mélységi biasz (eltolás). A legegyszerűbb megoldás egy kis biasz bevezetése a `currentDepth` értékhez az összehasonlítás előtt. Azzal, hogy a fragmentet egy kicsit közelebbinek tüntetjük fel a fényhez, mint amilyen valójában, „kitoljuk” a saját árnyékából.

float shadow = currentDepth > depthFromShadowMap + bias ? 0.3 : 1.0;

A megfelelő biasz érték megtalálása kényes egyensúlyozás. Ha túl kicsi, az akne megmarad. Ha túl nagy, a következő problémát kapjuk.

Peter Panning

A probléma: Ez a hiba, amely a repülni tudó és árnyékát elvesztő karakterről kapta a nevét, látható résként jelenik meg egy objektum és az árnyéka között. Emiatt az objektumok lebegni vagy elszakadni látszanak a felületektől, amelyeken pihenniük kellene. Ez a túl nagy mélységi biasz közvetlen következménye.

A megoldás: Lejtő-skálázott mélységi biasz. Egy konstans biasznál robusztusabb megoldás, ha a biaszt a felület fényhez viszonyított meredekségétől tesszük függővé. A meredekebb poligonok hajlamosabbak az aknéra és nagyobb biaszt igényelnek. A laposabb poligonoknak kisebb biaszra van szükségük. A legtöbb grafikus API, beleértve a WebGL-t is, lehetőséget biztosít az ilyen típusú biasz automatikus alkalmazására a mélységi menet során, ami általában előnyösebb, mint egy manuális biasz a fragment shaderben.

Perspektivikus aliasing (recés élek)

A probléma: Az árnyékok élei kockásak, recések és pixelesek. Ez az aliasing egy formája. Azért történik, mert az árnyéktérkép felbontása véges. Az árnyéktérkép egyetlen pixele (vagy texele) nagy területet fedhet le a végső jelenet egy felületén, különösen a kamerához közeli vagy lapos szögben nézett felületek esetében. Ez a felbontásbeli eltérés okozza a jellegzetes kockás megjelenést.

A megoldás: Az árnyéktérkép felbontásának növelése (pl. 1024x1024-ről 4096x4096-ra) segíthet, de ez jelentős memória- és teljesítményköltséggel jár, és nem oldja meg teljesen a mögöttes problémát. Az igazi megoldások a haladóbb technikákban rejlenek.

4. fejezet: Haladó árnyéktérképezési technikák

Az alap árnyéktérképezés alapot nyújt, de a professzionális alkalmazások kifinomultabb algoritmusokat használnak a korlátainak, különösen az aliasingnak a leküzdésére.

Percentage-Closer Filtering (PCF)

A PCF a leggyakoribb technika az árnyékélek lágyítására és az aliasing csökkentésére. Ahelyett, hogy egyetlen mintát venne az árnyéktérképből és egy bináris (árnyékban van vagy nincs árnyékban) döntést hozna, a PCF több mintát vesz a célkoordináta körüli területről.

A koncepció: Minden fragment esetében nem csak egyszer, hanem egy rácsmintában (pl. 3x3 vagy 5x5) veszünk mintát az árnyéktérképből a fragment vetített textúra koordinátája körül. Ezen minták mindegyikénél elvégezzük a mélység-összehasonlítást. A végső árnyékérték ezen összehasonlítások átlaga lesz. Például, ha 9 mintából 4 árnyékban van, a fragment 4/9-ed részben lesz árnyékolt, ami egy sima penumbrát (az árnyék lágy szélét) eredményez.

Implementáció: Ez teljes egészében a fragment shaderen belül történik. Egy ciklust foglal magában, amely egy kis kernelt iterál végig, mintát véve az árnyéktérképből minden eltolásnál és összegezve az eredményeket. A WebGL 2 hardveres támogatást kínál (`texture` egy `sampler2DShadow`-val), amely hatékonyabban képes elvégezni az összehasonlítást és a szűrést.

Előny: Drasztikusan javítja az árnyékminőséget azáltal, hogy a kemény, recés éleket sima, lágy élekre cseréli.

Költség: A teljesítmény csökken a fragmentenként vett minták számával.

Kaszkádolt árnyéktérképek (CSM)

A CSM az ipari szabvány megoldás az árnyékok renderelésére egyetlen irányított fényforrásból (mint a nap) egy nagyon nagy jelenet felett. Közvetlenül a perspektivikus aliasing problémáját célozza meg.

A koncepció: Az alapötlet az, hogy a kamerához közeli objektumoknak sokkal nagyobb árnyékfelbontásra van szükségük, mint a távoli objektumoknak. A CSM a kamera látóterét (view frustum) több szakaszra, vagy „kaszkádra” osztja a mélysége mentén. Ezután minden kaszkádhoz külön, magas minőségű árnyéktérképet renderelünk. A kamerához legközelebbi kaszkád a világ-tér egy kis területét fedi le, így nagyon magas effektív felbontással rendelkezik. A távolabbi kaszkádok fokozatosan nagyobb területeket fednek le ugyanazzal a textúramérettel, ami elfogadható, mivel ezek a részletek kevésbé láthatók a játékos számára.

Implementáció: Ez jelentősen bonyolultabb.

1. A CPU-n osszuk fel a kamera látóterét 2-4 kaszkádra.
2. Minden kaszkádhoz számítsunk ki egy szorosan illeszkedő ortografikus projekciós mátrixot a fényforrás számára, amely tökéletesen magába foglalja a látótér adott szakaszát.
3. A renderelési ciklusban végezzük el a mélységi menetet többször — minden kaszkádhoz egyszer, egy másik árnyéktérképre (vagy egy textúra atlasz egy régiójára) renderelve.
4. A végső jelenet menetének fragment shaderében határozzuk meg, hogy a jelenlegi fragment melyik kaszkádhoz tartozik a kamerától való távolsága alapján.
5. Vegyünk mintát a megfelelő kaszkád árnyéktérképéből az árnyék kiszámításához.

Előny: Konzisztensen magas felbontású árnyékokat biztosít hatalmas távolságokon, így tökéletes kültéri környezetekhez.

Variancia árnyéktérképek (VSM)

A VSM egy másik technika lágy árnyékok létrehozására, de más megközelítést alkalmaz, mint a PCF.

A koncepció: Ahelyett, hogy csak a mélységet tárolná az árnyéktérképben, a VSM két értéket tárol: a mélységet (az első momentum) és a mélység négyzetét (a második momentum). Ez a két érték lehetővé teszi számunkra, hogy kiszámítsuk a mélységeloszlás varianciáját. A Csebisev-egyenlőtlenség nevű matematikai eszköz segítségével megbecsülhetjük annak valószínűségét, hogy egy fragment árnyékban van. A legfőbb előnye, hogy egy VSM textúra elmosható a szabványos hardveresen gyorsított lineáris szűréssel és mipmappinggel, ami matematikailag érvénytelen egy standard mélységtérkép esetében. Ez nagyon nagy, lágy és sima árnyék penumbrákat tesz lehetővé fix teljesítményköltséggel.

Hátrány: A VSM fő gyengesége a „fényátszivárgás” (light bleeding), ahol a fény átlátszhat az objektumokon átfedő takaró objektumok esetén, mivel a statisztikai közelítés meghibásodhat.

5. fejezet: Gyakorlati implementációs tippek és teljesítmény

Az árnyéktérkép felbontásának kiválasztása

Az árnyéktérkép felbontása közvetlen kompromisszum a minőség és a teljesítmény között. A nagyobb textúra élesebb árnyékokat biztosít, de több videómemóriát fogyaszt, és tovább tart a renderelése és a mintavételezése. Gyakori méretek:

• 1024x1024: Jó kiindulási alap sok alkalmazáshoz.
• 2048x2048: Észrevehető minőségjavulást kínál asztali alkalmazásokhoz.
• 4096x4096: Magas minőség, gyakran használják kiemelt objektumokhoz vagy robusztus szelektálással rendelkező motorokban.

Ne feledjük, hogy a memóriahasználat négyzetesen skálázódik; egy 4096x4096-os textúra 16-szor több memóriát használ, mint egy 1024x1024-es.

A fényforrás látóterének optimalizálása

Ahhoz, hogy az árnyéktérkép minden pixelét a lehető legjobban kihasználjuk, kulcsfontosságú, hogy a fény projekciós térfogata (az ortografikus doboza vagy perspektivikus csonka gúlája) a lehető legszorosabban illeszkedjen a jelenet árnyékot igénylő elemeihez. Egy irányított fény esetében ez azt jelenti, hogy az ortografikus projekcióját úgy kell illeszteni, hogy az csak a kamera látóterének látható részét foglalja magába. Az árnyéktérképben minden elvesztegetett hely elvesztegetett felbontás.

WebGL kiterjesztések és verziók

WebGL 1 vs. WebGL 2: Bár az árnyéktérképezés lehetséges WebGL 1-ben is, sokkal könnyebb és hatékonyabb WebGL 2-ben. A WebGL 1 a `WEBGL_depth_texture` kiterjesztést igényli a mélységi textúra létrehozásához. A WebGL 2-ben ez a funkcionalitás beépített. Továbbá a WebGL 2 hozzáférést biztosít az árnyék mintavevőkhöz (`sampler2DShadow`), amelyek hardveresen gyorsított PCF-et képesek végrehajtani, jelentős teljesítménynövekedést kínálva a shaderben végzett manuális PCF ciklusokhoz képest.

Az árnyékok hibakeresése

Az árnyékok hibakeresése hírhedten nehéz lehet. A leghasznosabb technika az árnyéktérkép vizualizálása. Ideiglenesen módosítsa az alkalmazást, hogy egy adott fényforrás mélységi textúráját közvetlenül egy négyszögre renderelje a képernyőn. Ez lehetővé teszi, hogy pontosan lássa, mit „lát” a fény. Ez azonnal felfedheti a fény mátrixaival, a látótér szelektálásával vagy az objektumok renderelésével kapcsolatos problémákat a mélységi menet során.

Összegzés

A valós idejű árnyéktérképezés a modern 3D grafika egyik sarokköve, amely a lapos, élettelen jeleneteket hihető és dinamikus világokká alakítja. Bár a fényforrás nézőpontjából történő renderelés koncepciója egyszerű, a magas minőségű, hibamentes eredmények elérése mély megértést igényel a mögöttes mechanizmusokról, a kétmenetes folyamattól a mélységi biasz és az aliasing árnyalataiig.

Egy alapvető implementációval kezdve fokozatosan megküzdhet a gyakori hibákkal, mint például az árnyék akne és a recés élek. Innen tovább emelheti vizuális minőségét olyan haladó technikákkal, mint a PCF a lágy árnyékokért vagy a Kaszkádolt árnyéktérképek a nagyméretű környezetekhez. Az árnyékrenderelésbe való utazás tökéletes példája a művészet és a tudomány ötvözetének, amely a számítógépes grafikát oly lenyűgözővé teszi. Arra bátorítjuk, hogy kísérletezzen ezekkel a technikákkal, feszegesse határaikat, és hozzon új szintű realizmust WebGL projektjeibe.