WebGL Senčenje s Preslikavo: Obsežen Vodnik za Upodabljanje v Realnem Času

V svetu 3D računalniške grafike le malo elementov prispeva k realizmu in potopitvi bolj kot sence. Zagotavljajo ključne vizualne znake o prostorskih odnosih med predmeti, lokaciji svetlobnih virov in splošni geometriji prizora. Brez senc se 3D svetovi lahko zdijo ploski, nepovezani in umetni. Za spletne 3D aplikacije, ki jih poganja WebGL, je implementacija visokokakovostnih senc v realnem času znak profesionalnih izkušenj. Ta vodnik ponuja poglobljen vpogled v najosnovnejšo in najpogosteje uporabljeno tehniko za doseganje tega: Senčenje s Preslikavo.

Ne glede na to, ali ste izkušen programer grafike ali spletni razvijalec, ki se podaja v tretjo dimenzijo, vas bo ta članek opremil z znanjem za razumevanje, implementacijo in odpravljanje težav s sencami v realnem času v vaših projektih WebGL. Potovali bomo od osnovne teorije do praktičnih podrobnosti implementacije, raziskovali pogoste pasti in napredne tehnike, ki se uporabljajo v sodobnih grafičnih pogonih.

Poglavje 1: Osnove Senčenja s Preslikavo

V svojem bistvu je senčenje s preslikavo pametna in elegantna tehnika, ki določa, ali je točka v prizoru v senci, tako da postavi preprosto vprašanje: "Ali lahko to točko vidi vir svetlobe?" Če je odgovor ne, to pomeni, da nekaj blokira svetlobo in mora biti točka v senci. Za programsko odgovor na to vprašanje uporabljamo dvopasovni pristop upodabljanja.

Kaj je Senčenje s Preslikavo? Osnovni Koncept

Celotna tehnika se vrti okoli dvakratnega upodabljanja prizora, vsakič z drugega zornega kota:

• Pas 1: Globinski Pas (Perspektiva Svetlobe). Najprej upodobimo celoten prizor z natančne pozicije in orientacije vira svetlobe. Vendar nam v tem pasu ni mar za barve ali teksture. Edina informacija, ki jo potrebujemo, je globina. Za vsak upodobljen predmet zabeležimo njegovo oddaljenost od vira svetlobe. Ta zbirka vrednosti globine je shranjena v posebni teksturi, imenovani karta senc ali globinska karta. Vsaka slikovna pika v tej karti predstavlja razdaljo do najbližjega predmeta z vidika svetlobe v določeni smeri.
• Pas 2: Pas Prizora (Perspektiva Kamere). Nato prizor upodobimo tako, kot bi ga običajno, iz perspektive glavne kamere. Toda za vsako posamezno slikovno piko, ki jo rišemo, izvedemo dodatni izračun. Določimo položaj te slikovne pike v 3D prostoru in nato vprašamo: "Kako daleč je ta točka od vira svetlobe?" Nato to razdaljo primerjamo z vrednostjo, shranjeno v naši karti senc (iz Pasa 1) na ustrezni lokaciji.

Logika je preprosta:

• Če je trenutna razdalja slikovne pike od svetlobe večja od razdalje, shranjene v karti senc, to pomeni, da je vzdolž iste vidne linije še en predmet bližje svetlobi. Zato je trenutna slikovna pika v senci.
• Če je razdalja slikovne pike manjša ali enaka razdalji v karti senc, to pomeni, da je nič ne blokira in je slikovna pika popolnoma osvetljena.

Nastavitev Prizora

Za implementacijo senčenja s preslikavo v WebGL potrebujete več ključnih komponent:

• Vir Svetlobe: To je lahko usmerjena svetloba (kot sonce), točkovna svetloba (kot žarnica) ali reflektor. Vrsta svetlobe bo določila vrsto projekcijske matrike, ki se uporablja med globinskim pasom.
• Objekt Okvirnega Medpomnilnika (FBO): WebGL običajno upodablja v privzeti okvirni medpomnilnik zaslona. Za ustvarjanje naše karte senc potrebujemo cilj upodabljanja izven zaslona. FBO nam omogoča, da upodabljamo v teksturo namesto na zaslon. Naš FBO bo konfiguriran s priponko globinske teksture.
• Dva Niza Senčilnikov: Potrebovali boste en program senčilnika za globinski pas (zelo preprost) in drugega za končni pas prizora (ki bo vseboval logiko izračuna senc).
• Matrike: Potrebovali boste standardne matrike modela, pogleda in projekcije za kamero. Ključnega pomena je, da boste potrebovali tudi matriko pogleda in projekcije za vir svetlobe, ki se pogosto združita v eno samo "matriko svetlobnega prostora".

Poglavje 2: Dvopasovni Cevovod za Upodabljanje Podrobno

Razčlenimo oba pasa upodabljanja korak za korakom in se osredotočimo na vloge matrik in senčilnikov.

Pas 1: Globinski Pas (Iz Perspektive Svetlobe)

Cilj tega pasa je zapolniti našo globinsko teksturo. Evo, kako deluje:

1. Povežite FBO: Pred risanjem naročite WebGL, da upodablja v vaš FBO po meri namesto na platno.
2. Konfigurirajte Vidno Polje: Nastavite dimenzije vidnega polja tako, da se ujemajo z velikostjo vaše teksture karte senc (npr. 1024x1024 slikovnih pik).
3. Počistite Globinski Medpomnilnik: Zagotovite, da je globinski medpomnilnik FBO počiščen pred upodabljanjem.
4. Ustvarite Svetlobne Matrike:
   • Matrika Pogleda Svetlobe: Ta matrika pretvori svet v vidik svetlobe. Za usmerjeno svetlobo se to običajno ustvari s funkcijo `lookAt`, kjer je "oko" položaj svetlobe, "cilj" pa smer, v katero kaže.
   • Matrika Projekcije Svetlobe: Za usmerjeno svetlobo, ki ima vzporedne žarke, se uporablja ortografska projekcija. Za točkovne luči ali reflektorje se uporablja perspektivna projekcija. Ta matrika definira prostornino v prostoru (škatlo ali frustum), ki bo vrgla sence.
5. Uporabite Program Senčilnika Globine: To je minimalen senčilnik. Edina naloga senčilnika oglišča je, da pomnoži položaj oglišča z matriko pogleda in projekcije svetlobe. Senčilnik fragmentov je še preprostejši: samo zapiše vrednost globine fragmenta (njegovo koordinato z) v globinsko teksturo. V sodobnem WebGL pogosto sploh ne potrebujete senčilnika fragmentov po meri, saj je FBO mogoče konfigurirati tako, da samodejno zajame globinski medpomnilnik.
6. Upodobite Prizor: Narišite vse predmete, ki mečejo senco, v vašem prizoru. FBO zdaj vsebuje našo dokončano karto senc.

Pas 2: Pas Prizora (Iz Perspektive Kamere)

Zdaj upodobimo končno sliko, pri čemer uporabimo karto senc, ki smo jo pravkar ustvarili, za določanje senc.

1. Odvežite FBO: Preklopite nazaj na upodabljanje v privzeti okvirni medpomnilnik platna.
2. Konfigurirajte Vidno Polje: Nastavite vidno polje nazaj na dimenzije platna.
3. Počistite Zaslon: Počistite barvne in globinske medpomnilnike platna.
4. Uporabite Program Senčilnika Prizora: Tu se zgodi čarovnija. Ta senčilnik je bolj zapleten.
   • Senčilnik Ogljišč: Ta senčilnik mora storiti dve stvari. Najprej izračuna končni položaj oglišča z uporabo kamerinih matrik modela, pogleda in projekcije kot običajno. Drugič, mora tudi izračunati položaj oglišča z vidika svetlobe z uporabo matrike svetlobnega prostora iz Pasa 1. Ta druga koordinata se prenese v senčilnik fragmentov kot spreminjajoča se.
   • Senčilnik Fragmentov: To je jedro logike senc. Za vsak fragment:
     1. Prejmite interpolirani položaj v svetlobnem prostoru iz senčilnika oglišča.
     2. Izvedite perspektivno delitev na tej koordinati (delite x, y, z z w). To jo pretvori v Normalizirane Koordinat Zaslona (NDC), ki segajo od -1 do 1.
     3. Preoblikujte NDC v teksturne koordinate (ki segajo od 0 do 1), da lahko vzorčimo našo karto senc. To je preprosta operacija skaliranja in odmika: `texCoord = ndc * 0.5 + 0.5;`.
     4. Uporabite te teksturne koordinate za vzorčenje teksture karte senc, ustvarjene v Pasu 1. To nam da `depthFromShadowMap`.
     5. Trenutna globina fragmenta z vidika svetlobe je njegova z-komponenta iz preoblikovane koordinate svetlobnega prostora. Poimenujmo jo `currentDepth`.
     6. Primerjajte globine: Če je `currentDepth > depthFromShadowMap`, je fragment v senci. K temu preverjanju bomo morali dodati majhen odmik, da se izognemo artefaktu, imenovanemu "akne senc", o katerem bomo razpravljali naslednjič.
     7. Na podlagi primerjave določite faktor sence (npr. 1.0 za osvetljeno, 0.3 za zasenčeno).
     8. Uporabite ta faktor sence za končni izračun barve (npr. pomnožite komponente ambientalne in difuzne osvetlitve s faktorjem sence).
5. Upodobite Prizor: Narišite vse predmete v prizoru.

Poglavje 3: Pogoste Težave in Rešitve

Implementacija osnovnega senčenja s preslikavo bo hitro razkrila več pogostih vizualnih artefaktov. Razumevanje in odpravljanje teh je ključnega pomena za doseganje visokokakovostnih rezultatov.

Akne Senc (Artefakti Samo-Senčenja)

Težava: Morda boste videli nenavadne, nepravilne vzorce temnih črt ali vzorce, podobne Moiréju, na površinah, ki bi morale biti popolnoma osvetljene. To se imenuje "akne senc". Pojavi se, ker sta vrednost globine, shranjena v karti senc, in vrednost globine, izračunana med pasom prizora, za isto površino. Zaradi netočnosti plavajoče vejice in omejene ločljivosti karte senc lahko majhne napake povzročijo, da fragment napačno ugotovi, da je za seboj, kar povzroči samo-senčenje.

Rešitev: Globinski Odmik. Najpreprostejša rešitev je, da v `currentDepth` uvedemo majhen odmik pred primerjavo. Če se fragment zdi nekoliko bližje svetlobi, kot je v resnici, ga potisnemo "ven" iz lastne sence.

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

Iskanje prave vrednosti odmika je občutljivo ravnotežje. Premajhen in akne ostanejo. Prevelik in dobite naslednjo težavo.

Peter Pan

Težava: Ta artefakt, poimenovan po liku, ki je lahko letel in izgubil senco, se kaže kot viden presledek med predmetom in njegovo senco. Zaradi tega se zdi, da predmeti lebdijo ali so odklopljeni od površin, na katerih bi morali počivati. To je neposreden rezultat uporabe prevelikega globinskega odmika.

Rešitev: Globinski Odmik Naklona. Bolj robustna rešitev kot konstantni odmik je, da odmik postane odvisen od strmine površine glede na svetlobo. Bolj strmi poligoni so bolj nagnjeni k aknam in zahtevajo večji odmik. Bolj ravni poligoni potrebujejo manjši odmik. Večina grafičnih API-jev, vključno z WebGL, ponuja funkcionalnost za samodejno uporabo te vrste odmika med globinskim pasom, kar je na splošno boljše od ročnega odmika v senčilniku fragmentov.

Perspektivno Prelisavanje (Nazobčani Robovi)

Težava: Robovi vaših senc so videti kockasti, nazobčani in pikselski. To je oblika prelisavanja. To se zgodi, ker je ločljivost karte senc končna. Ena sama slikovna pika (ali tekstel) v karti senc lahko pokriva veliko območje na površini v končnem prizoru, zlasti za površine blizu kamere ali tiste, ki jih gledamo pod kotom. To neskladje v ločljivosti povzroči značilen kockast videz.

Rešitev: Povečanje ločljivosti karte senc (npr. s 1024x1024 na 4096x4096) lahko pomaga, vendar ima to precejšnje stroške glede pomnilnika in zmogljivosti ter ne reši v celoti temeljne težave. Prave rešitve so v bolj naprednih tehnikah.

Poglavje 4: Napredne Tehnike Senčenja s Preslikavo

Osnovno senčenje s preslikavo zagotavlja temelj, vendar profesionalne aplikacije uporabljajo bolj prefinjene algoritme za premagovanje njegovih omejitev, zlasti prelisavanja.

Filtriranje Bližine Odstotkov (PCF)

PCF je najpogostejša tehnika za mehčanje robov senc in zmanjšanje prelisavanja. Namesto da bi vzeli en sam vzorec iz karte senc in sprejeli binarno odločitev (v senci ali ne v senci), PCF vzame več vzorcev iz območja okoli ciljne koordinate.

Koncept: Za vsak fragment ne vzorčimo karte senc samo enkrat, temveč v mrežnem vzorcu (npr. 3x3 ali 5x5) okoli projektirane teksturne koordinate fragmenta. Za vsakega od teh vzorcev izvedemo primerjavo globine. Končna vrednost sence je povprečje vseh teh primerjav. Na primer, če so 4 od 9 vzorcev v senci, bo fragment zasenčen 4/9, kar bo povzročilo gladko penumbro (mehak rob sence).

Izvedba: To se naredi v celoti v senčilniku fragmentov. Vključuje zanko, ki se ponavlja nad majhnim jedrom, vzorči karto senc pri vsakem odmiku in kopiči rezultate. WebGL 2 ponuja strojno podporo (`texture` s `sampler2DShadow`), ki lahko učinkoviteje izvaja primerjavo in filtriranje.

Prednost: Drastično izboljša kakovost senc z zamenjavo trdih, prelisanih robov z gladkimi, mehkimi.

Strošek: Zmogljivost se zmanjšuje s številom vzorcev, ki so vzeti na fragment.

Kaskadne Karte Senc (CSM)

CSM je industrijski standard za upodabljanje senc iz enega samega usmerjenega vira svetlobe (kot je sonce) nad zelo velikim prizorom. Neposredno obravnava problem perspektivnega prelisavanja.

Koncept: Osrednja ideja je, da predmeti blizu kamere potrebujejo veliko višjo ločljivost sence kot predmeti, ki so oddaljeni. CSM razdeli vidni frustum kamere na več odsekov ali "kaskad" vzdolž njegove globine. Ločena, visokokakovostna karta senc se nato upodobi za vsako kaskado. Kaskada, ki je najbližje kameri, pokriva majhno območje svetovnega prostora in ima zato zelo visoko efektivno ločljivost. Kaskade, ki so bolj oddaljene, pokrivajo progresivno večja območja z isto velikostjo teksture, kar je sprejemljivo, ker so te podrobnosti manj vidne igralcu.

Izvedba: To je precej bolj zapleteno.

1. V CPE razdelite frustum kamere na 2-4 kaskade.
2. Za vsako kaskado izračunajte ortografsko projekcijsko matriko, ki se tesno prilega svetlobi in popolnoma obdaja ta odsek frustuma.
3. V zanki upodabljanja izvedite globinski pas večkrat - enkrat za vsako kaskado in upodabljajte v različno karto senc (ali regijo atlasa teksture).
4. V končnem senčilniku fragmentov prizora določite, kateri kaskadi pripada trenutni fragment na podlagi njegove oddaljenosti od kamere.
5. Vzorčite karto senc ustrezne kaskade za izračun sence.

Prednost: Zagotavlja dosledno visoko ločljivost senc na velikih razdaljah, zaradi česar je idealen za zunanja okolja.

Variance Shadow Maps (VSM)

VSM je še ena tehnika za ustvarjanje mehkih senc, vendar uporablja drugačen pristop kot PCF.

Koncept: Namesto da bi v karti senc shranjevali samo globino, VSM shrani dve vrednosti: globino (prvi moment) in kvadrat globine (drugi moment). Ti dve vrednosti nam omogočata izračun variance porazdelitve globine. Z uporabo matematičnega orodja, imenovanega Čebišovova neenakost, lahko nato ocenimo verjetnost, da je fragment v senci. Ključna prednost je, da je mogoče teksturo VSM zamegliti s standardnim strojno pospešenim linearnim filtriranjem in mipmappingom, kar je matematično neveljavno za standardno globinsko karto. To omogoča zelo velike, mehke in gladke penumbre senc s fiksnimi stroški zmogljivosti.

Slabost: Glavna slabost VSM je "krvavitev svetlobe", kjer se lahko zdi, da svetloba pronica skozi predmete v situacijah s prekrivajočimi se okluderji, saj se lahko statistična aproksimacija pokvari.

Poglavje 5: Praktični Nasveti za Izvedbo in Zmogljivost

Izbira Ločljivosti Karte Senc

Ločljivost vaše karte senc je neposredno kompromis med kakovostjo in zmogljivostjo. Večja tekstura zagotavlja ostrejše sence, vendar porabi več video pomnilnika in traja dlje za upodabljanje in vzorčenje. Pogoste velikosti vključujejo:

• 1024x1024: Dobra osnova za številne aplikacije.
• 2048x2048: Ponuja opazno izboljšanje kakovosti za namizne aplikacije.
• 4096x4096: Visoka kakovost, ki se pogosto uporablja za glavna sredstva ali v pogonih z robustnim odstranjevanjem.

Upoštevajte, da se poraba pomnilnika povečuje kvadratno; tekstura 4096x4096 porabi 16-krat več pomnilnika kot tekstura 1024x1024.

Optimizacija Svetlobnega Frustuma

Če želite kar najbolje izkoristiti vsako slikovno piko v vaši karti senc, je ključnega pomena, da je projekcijska prostornina svetlobe (njena ortografska škatla ali perspektivni frustum) čim bolj tesno nameščena na elemente prizora, ki potrebujejo sence. Za usmerjeno svetlobo to pomeni, da njeno ortografsko projekcijo prilagodite tako, da obdaja samo vidni del frustuma kamere. Vsak izgubljeni prostor v karti senc je izgubljena ločljivost.

Razširitve in Različice WebGL

WebGL 1 proti WebGL 2: Čeprav je senčenje s preslikavo mogoče v WebGL 1, je v WebGL 2 veliko lažje in učinkovitejše. WebGL 1 zahteva razširitev `WEBGL_depth_texture` za ustvarjanje globinske teksture. WebGL 2 ima to funkcionalnost vgrajeno. Poleg tega WebGL 2 omogoča dostop do vzorčevalnikov senc (`sampler2DShadow`), ki lahko izvajajo strojno pospešeni PCF, kar ponuja znatno povečanje zmogljivosti v primerjavi z ročnimi zankami PCF v senčilniku.

Odpravljanje Težav s Sencami

Sence je lahko izjemno težko odpraviti. Najbolj uporabna tehnika je vizualizacija karte senc. Začasno spremenite svojo aplikacijo, da upodobite globinsko teksturo iz določenega vira svetlobe neposredno na štirikotnik na zaslonu. To vam omogoča, da natančno vidite, kaj "vidi" svetloba. To lahko takoj razkrije težave z matricami vaše svetlobe, odstranjevanjem frustuma ali upodabljanjem predmetov med globinskim pasom.

Zaključek

Senčenje s preslikavo v realnem času je temelj sodobne 3D grafike, ki spreminja ploske, nežive prizore v verjetne in dinamične svetove. Čeprav je koncept upodabljanja iz perspektive svetlobe preprost, doseganje visokokakovostnih rezultatov brez artefaktov zahteva globoko razumevanje osnovne mehanike, od dvopasovnega cevovoda do nians globinskega odmika in prelisavanja.

Če začnete z osnovno implementacijo, se lahko progresivno spopadete s pogostimi artefakti, kot so akne senc in nazobčani robovi. Od tam lahko izboljšate svoje vizualne elemente z naprednimi tehnikami, kot je PCF za mehke sence ali kaskadne karte senc za obsežna okolja. Potovanje v senčno upodabljanje je popoln primer mešanice umetnosti in znanosti, zaradi katere je računalniška grafika tako prepričljiva. Spodbujamo vas, da eksperimentirate s temi tehnikami, premikate njihove meje in vnesete novo raven realizma v svoje projekte WebGL.