WebGL Shadow Mapping: Un ghid complet pentru randarea în timp real

În lumea graficii computerizate 3D, puține elemente contribuie mai mult la realism și imersiune decât umbrele. Ele oferă indicii vizuale cruciale despre relațiile spațiale dintre obiecte, locația surselor de lumină și geometria generală a unei scene. Fără umbre, lumile 3D pot părea plate, deconectate și artificiale. Pentru aplicațiile web 3D alimentate de WebGL, implementarea umbrelor de înaltă calitate, în timp real, este o marcă a experiențelor de nivel profesional. Acest ghid oferă o analiză aprofundată a celei mai fundamentale și utilizate tehnici pentru realizarea acestui lucru: Shadow Mapping.

Indiferent dacă sunteți un programator grafic experimentat sau un dezvoltator web care se aventurează în a treia dimensiune, acest articol vă va oferi cunoștințele necesare pentru a înțelege, implementa și depana umbrele în timp real în proiectele dvs. WebGL. Vom călători de la teoria de bază la detalii practice de implementare, explorând capcanele comune și tehnicile avansate utilizate în motoarele grafice moderne.

Capitolul 1: Fundamentele Shadow Mapping-ului

În esență, shadow mapping este o tehnică ingenioasă și elegantă care determină dacă un punct dintr-o scenă se află în umbră, punând o întrebare simplă: „Poate fi văzut acest punct de către sursa de lumină?” Dacă răspunsul este nu, înseamnă că ceva blochează lumina și punctul trebuie să fie în umbră. Pentru a răspunde la această întrebare programatic, folosim o abordare de randare în două etape.

Ce este Shadow Mapping-ul? Conceptul de bază

Întreaga tehnică se bazează pe randarea scenei de două ori, de fiecare dată dintr-un punct de vedere diferit:

• Etapa 1: Etapa de profunzime (Perspectiva luminii). Mai întâi, randăm întreaga scenă din poziția și orientarea exactă a sursei de lumină. Cu toate acestea, în această etapă nu ne interesează culorile sau texturile. Singura informație de care avem nevoie este profunzimea. Pentru fiecare obiect randat, înregistrăm distanța sa față de sursa de lumină. Această colecție de valori de profunzime este stocată într-o textură specială numită hartă de umbre sau hartă de profunzime. Fiecare pixel din această hartă reprezintă distanța până la cel mai apropiat obiect din punctul de vedere al luminii într-o anumită direcție.
• Etapa 2: Etapa scenei (Perspectiva camerei). Apoi, randăm scena așa cum am face-o în mod normal, din perspectiva camerei principale. Dar pentru fiecare pixel care este desenat, efectuăm un calcul suplimentar. Determinăm poziția acelui pixel în spațiul 3D și apoi întrebăm: „Cât de departe este acest punct de sursa de lumină?” Apoi comparăm această distanță cu valoarea stocată în harta noastră de umbre (din Etapa 1) la locația corespunzătoare.

Logica este simplă:

• Dacă distanța curentă a pixelului față de lumină este mai mare decât distanța stocată în harta de umbre, înseamnă că un alt obiect este mai aproape de lumină pe aceeași linie de vedere. Prin urmare, pixelul curent este în umbră.
• Dacă distanța pixelului este mai mică sau egală cu distanța din harta de umbre, înseamnă că nimic nu îl blochează, iar pixelul este complet iluminat.

Configurarea scenei

Pentru a implementa shadow mapping-ul în WebGL, aveți nevoie de mai multe componente cheie:

• O sursă de lumină: Aceasta poate fi o lumină direcțională (cum ar fi soarele), o lumină punctuală (cum ar fi un bec) sau un reflector. Tipul luminii va determina tipul de matrice de proiecție utilizat în timpul etapei de profunzime.
• Un obiect Framebuffer (FBO): WebGL redă în mod normal către framebuffer-ul implicit al ecranului. Pentru a crea harta noastră de umbre, avem nevoie de o țintă de randare în afara ecranului. Un FBO ne permite să randăm într-o textură în loc de ecran. FBO-ul nostru va fi configurat cu o atașare de textură de profunzime.
• Două seturi de shadere: Veți avea nevoie de un program shader pentru etapa de profunzime (unul foarte simplu) și de altul pentru etapa finală a scenei (care va conține logica de calcul al umbrei).
• Matrici: Veți avea nevoie de matricile standard de model, vizualizare și proiecție pentru cameră. Crucial, veți avea nevoie și de o matrice de vizualizare și proiecție pentru sursa de lumină, adesea combinate într-o singură „matrice de spațiu de lumină”.

Capitolul 2: Pipeline-ul de randare în două etape în detaliu

Să descompunem cele două etape de randare pas cu pas, concentrându-ne pe rolurile matricilor și shaderelor.

Etapa 1: Etapa de profunzime (Din perspectiva luminii)

Scopul acestei etape este popularea texturii de profunzime. Iată cum funcționează:

1. Legarea FBO-ului: Înainte de a desena, instruiți WebGL să redea în FBO-ul dvs. personalizat în loc de canvas.
2. Configurarea viewport-ului: Setați dimensiunile viewport-ului pentru a se potrivi cu dimensiunea texturii hărții de umbre (de exemplu, 1024x1024 pixeli).
3. Golirea buffer-ului de profunzime: Asigurați-vă că buffer-ul de profunzime al FBO-ului este golit înainte de randare.
4. Crearea matricilor luminii:
   • Matricea de vizualizare a luminii: Această matrice transformă lumea în perspectiva luminii. Pentru o lumină direcțională, aceasta este de obicei creată cu o funcție `lookAt`, unde „ochiul” este poziția luminii și „ținta” este direcția în care indică.
   • Matricea de proiecție a luminii: Pentru o lumină direcțională, care are raze paralele, se utilizează o proiecție ortografică. Pentru lumini punctuale sau reflectoare, se utilizează o proiecție perspectivă. Această matrice definește volumul din spațiu (o cutie sau un frustum) care va arunca umbre.
5. Utilizarea programului shader de profunzime: Acesta este un shader minimal. Singura sarcină a shader-ului de vârf este să înmulțească poziția vârfului cu matricile de vizualizare și proiecție ale luminii. Shader-ul de fragment este și mai simplu: doar scrie valoarea profunzimii fragmentului (coordonata sa z) în textura de profunzime. În WebGL modern, adesea nu aveți nevoie nici măcar de un shader de fragment personalizat, deoarece FBO-ul poate fi configurat pentru a captura automat buffer-ul de profunzime.
6. Randarea scenei: Desenați toate obiectele care aruncă umbre din scena dvs. FBO-ul conține acum harta noastră de umbre completată.

Etapa 2: Etapa scenei (Din perspectiva camerei)

Acum randăm imaginea finală, folosind harta de umbre pe care tocmai am creat-o pentru a determina umbrele.

1. Deconectarea FBO-ului: Reveniți la randarea către framebuffer-ul implicit al canvas-ului.
2. Configurarea viewport-ului: Setați viewport-ul înapoi la dimensiunile canvas-ului.
3. Golirea ecranului: Goliți bufferele de culoare și profunzime ale canvas-ului.
4. Utilizarea programului shader de scenă: Aici se întâmplă magia. Acest shader este mai complex.
   • Shader de vârf: Acest shader trebuie să facă două lucruri. În primul rând, calculează poziția finală a vârfului folosind matricile de model, vizualizare și proiecție ale camerei, ca de obicei. În al doilea rând, trebuie de asemenea să calculeze poziția vârfului din perspectiva luminii, folosind matricea de spațiu de lumină din Etapa 1. Această a doua coordonată este transmisă shader-ului de fragment ca o variabilă.
   • Shader de fragment: Acesta este nucleul logicii umbrelor. Pentru fiecare fragment:
     1. Recepționați poziția interpolată în spațiul luminii de la shader-ul de vârf.
     2. Efectuați o împărțire perspectivă a acestei coordonate (împărțiți x, y, z la w). Aceasta o transformă în coordonate normalizate ale dispozitivului (NDC), variind de la -1 la 1.
     3. Transformați NDC în coordonate de textură (care variază de la 0 la 1) pentru a putea eșantiona harta noastră de umbre. Aceasta este o operație simplă de scalare și deplasare: `texCoord = ndc * 0.5 + 0.5;`.
     4. Utilizați aceste coordonate de textură pentru a eșantiona textura hărții de umbre creată în Etapa 1. Aceasta ne dă `depthFromShadowMap`.
     5. Profunzimea curentă a fragmentului față de perspectiva luminii este componenta sa z din coordonata transformată a spațiului luminii. Să o numim `currentDepth`.
     6. Comparați profunzimile: Dacă `currentDepth > depthFromShadowMap`, fragmentul este în umbră. Va trebui să adăugăm o mică deplasare la această verificare pentru a evita un artefact numit „acnee de umbră”, pe care îl vom discuta în continuare.
     7. În funcție de comparație, determinați un factor de umbră (de exemplu, 1.0 pentru luminat, 0.3 pentru umbrit).
     8. Aplicați acest factor de umbră la calculul final al culorii (de exemplu, înmulțiți componentele de iluminare ambientală și difuză cu factorul de umbră).
5. Randarea scenei: Desenați toate obiectele din scenă.

Capitolul 3: Probleme comune și soluții

Implementarea shadow mapping-ului de bază va dezvălui rapid mai multe artefacte vizuale comune. Înțelegerea și corectarea acestora este crucială pentru obținerea unor rezultate de înaltă calitate.

Acnee de umbră (Artefacte de auto-umbrire)

Problema: Puteți vedea modele ciudate, incorecte de linii întunecate sau modele asemănătoare Moiré pe suprafețele care ar trebui să fie complet iluminate. Aceasta se numește „acnee de umbră”. Apare deoarece valoarea profunzimii stocată în harta de umbre și valoarea profunzimii calculate în timpul etapei scenei sunt pentru aceeași suprafață. Datorită impreciziilor în virgulă mobilă și rezoluției limitate a hărții de umbre, erorile minuscule pot face ca un fragment să determine incorect că se află în spatele său, rezultând auto-umbrire.

Soluția: Deplasare de profunzime. Cea mai simplă soluție este introducerea unei mici deplasări la `currentDepth` înainte de comparație. Făcând fragmentul să pară puțin mai aproape de lumină decât este de fapt, îl „scoatem” din propria sa umbră.

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

Găsirea valorii corecte a deplasării este un echilibru delicat. Prea mic, și acneea persistă. Prea mare, și veți obține următoarea problemă.

Peter Panning

Problema: Acest artefact, numit după personajul care putea zbura și și-a pierdut umbra, se manifestă printr-un spațiu vizibil între un obiect și umbra sa. Face ca obiectele să pară că plutesc sau sunt deconectate de suprafețele pe care ar trebui să fie așezate. Este rezultatul direct al utilizării unei deplasări de profunzime prea mari.

Soluția: Deplasare de profunzime cu scară de pantă. O soluție mai robustă decât o deplasare constantă este de a face deplasarea dependentă de înclinația suprafeței în raport cu lumina. Poligoanele mai abrupte sunt mai predispuse la acnee și necesită o deplasare mai mare. Poligoanele mai plate necesită o deplasare mai mică. Majoritatea API-urilor grafice, inclusiv WebGL, oferă funcționalități pentru a aplica acest tip de deplasare automat în timpul etapei de profunzime, ceea ce este, în general, preferabil unei deplasări manuale în shader-ul de fragment.

Aliasare Perspectivă (Margini zimțate)

Problema: Marginile umbrelor dvs. arată blocate, zimțate și pixelate. Aceasta este o formă de aliasare. Se întâmplă deoarece rezoluția hărții de umbre este finită. Un singur pixel (sau texel) din harta de umbre poate acoperi o zonă mare pe o suprafață din scena finală, în special pentru suprafețele apropiate de cameră sau cele vizualizate la un unghi de grazing. Acest nepotrivire de rezoluție cauzează aspectul caracteristic blocat.

Soluția: Creșterea rezoluției hărții de umbre (de exemplu, de la 1024x1024 la 4096x4096) poate ajuta, dar vine cu un cost semnificativ de memorie și performanță și nu rezolvă complet problema fundamentală. Soluțiile reale constau în tehnici mai avansate.

Capitolul 4: Tehnici avansate de Shadow Mapping

Shadow mapping-ul de bază oferă o fundație, dar aplicațiile profesionale folosesc algoritmi mai sofisticați pentru a depăși limitările sale, în special aliasarea.

Filtrare procentuală mai apropiată (PCF)

PCF este cea mai comună tehnică pentru înmuierea marginilor umbrelor și reducerea aliasării. În loc să preia o singură eșantion din harta de umbre și să ia o decizie binară (în umbră sau nu în umbră), PCF preia mai multe eșantioane din zona din jurul coordonatei țintă.

Conceptul: Pentru fiecare fragment, eșantionăm harta de umbre nu doar o dată, ci într-un model de grilă (de exemplu, 3x3 sau 5x5) în jurul coordonatei de textură proiectate a fragmentului. Pentru fiecare dintre aceste eșantioane, efectuăm comparația de profunzime. Valoarea finală a umbrei este media tuturor acestor comparații. De exemplu, dacă 4 din 9 eșantioane sunt în umbră, fragmentul va fi umbrit în proporție de 4/9, rezultând o penumbră netedă (marginea moale a unei umbre).

Implementare: Aceasta se face în întregime în shader-ul de fragment. Implică o buclă care iterează peste un kernel mic, eșantionând harta de umbre la fiecare deplasare și acumulând rezultatele. WebGL 2 oferă suport hardware (`texture` cu un `sampler2DShadow`) care poate efectua comparația și filtrarea mai eficient.

Beneficiu: Îmbunătățește dramatic calitatea umbrelor prin înlocuirea marginilor dure, aliate cu cele netede și moi.

Cost: Performanța scade odată cu numărul de eșantioane prelevate pe fragment.

Hărți de umbre în cascadă (CSM)

CSM este soluția standard din industrie pentru randarea umbrelor de la o singură sursă de lumină direcțională (cum ar fi soarele) pe o scenă foarte mare. Abordează direct problema aliasării perspective.

Conceptul: Ideea principală este că obiectele apropiate de cameră necesită o rezoluție a umbrelor mult mai mare decât obiectele îndepărtate. CSM împarte frustum-ul de vizualizare al camerei în mai multe secțiuni sau „cascade” pe adâncimea sa. O hartă de umbre separată, de înaltă calitate, este apoi randată pentru fiecare cascadă. Cascada cea mai apropiată de cameră acoperă o zonă mică de spațiu mondial și, prin urmare, are o rezoluție efectivă foarte mare. Cascadele mai îndepărtate acoperă zone progresiv mai mari cu aceeași dimensiune a texturii, ceea ce este acceptabil, deoarece acele detalii sunt mai puțin vizibile pentru jucător.

Implementare: Aceasta este semnificativ mai complexă.

1. În CPU, împărțiți frustum-ul camerei în 2-4 cascade.
2. Pentru fiecare cascadă, calculați o matrice de proiecție ortografică strânsă pentru lumină care înconjoară perfect acea secțiune a frustum-ului.
3. În bucla de randare, efectuați etapa de profunzime de mai multe ori - o dată pentru fiecare cascadă, randând într-o hartă de umbre diferită (sau o regiune a unei foi de texturi).
4. În shader-ul de fragment al etapei finale a scenei, determinați la ce cascadă aparține fragmentul curent pe baza distanței sale față de cameră.
5. Eșantionați harta de umbre a cascadei corespunzătoare pentru a calcula umbra.

Beneficiu: Oferă umbre de rezoluție constant înaltă pe distanțe mari, făcându-l perfect pentru mediile exterioare.

Hărți de umbre cu varianță (VSM)

VSM este o altă tehnică pentru crearea de umbre moi, dar abordează diferit de PCF.

Conceptul: În loc să stocheze doar profunzimea în harta de umbre, VSM stochează două valori: profunzimea (primul moment) și profunzimea la pătrat (al doilea moment). Aceste două valori ne permit să calculăm varianța distribuției profunzimii. Folosind un instrument matematic numit inegalitatea lui Cebîșev, putem estima probabilitatea ca un fragment să fie în umbră. Avantajul cheie este că o textură VSM poate fi estompată folosind filtrarea liniară accelerată hardware standard și mipmapping, ceva ce este matematic invalid pentru o hartă de profunzime standard. Acest lucru permite penumbre foarte mari, moi și netede, cu un cost de performanță fix.

Dezavantaj: Principalul dezavantaj al VSM este „scurgerea luminii”, unde lumina poate părea să se scurgă prin obiecte în situații cu ocluzori suprapuși, deoarece aproximarea statistică se poate defecta.

Capitolul 5: Sfaturi practice de implementare și performanță

Alegerea rezoluției hărții de umbre

Rezoluția hărții de umbre este un compromis direct între calitate și performanță. O textură mai mare oferă umbre mai clare, dar consumă mai multă memorie video și durează mai mult să fie randată și eșantionată. Dimensiuni comune includ:

• 1024x1024: O bază bună pentru multe aplicații.
• 2048x2048: Oferă o îmbunătățire vizibilă a calității pentru aplicațiile desktop.
• 4096x4096: Calitate înaltă, adesea utilizată pentru active hero sau în motoare cu culling robust.

Rețineți că utilizarea memoriei scalează pătratic; o textură 4096x4096 folosește de 16 ori mai multă memorie decât una 1024x1024.

Optimizarea frustum-ului luminii

Pentru a profita la maximum de fiecare pixel din harta de umbre, este crucial ca volumul de proiecție al luminii (cutia sa ortografică sau frustum-ul său perspectiv) să fie cât mai strâns posibil pe elementele scenei care necesită umbre. Pentru o lumină direcțională, aceasta înseamnă potrivirea proiecției sale ortografice pentru a înconjura doar porțiunea vizibilă a frustum-ului camerei. Orice spațiu irosit în harta de umbre este o rezoluție irosită.

Extensii și versiuni WebGL

WebGL 1 vs. WebGL 2: Deși shadow mapping-ul este posibil în WebGL 1, este mult mai ușor și mai eficient în WebGL 2. WebGL 1 necesită extensia `WEBGL_depth_texture` pentru a crea o textură de profunzime. WebGL 2 are această funcționalitate încorporată. Mai mult, WebGL 2 oferă acces la eșantionatoare de umbre (`sampler2DShadow`), care pot efectua PCF accelerat hardware, oferind un impuls semnificativ de performanță față de buclele PCF manuale în shader.

Depanarea umbrelor

Umbrele pot fi notoriu greu de depanat. Cea mai utilă tehnică este vizualizarea hărții de umbre. Modificați temporar aplicația dvs. pentru a reda textura de profunzime dintr-o sursă de lumină specifică direct pe un quad pe ecran. Acest lucru vă permite să vedeți exact ce „vede” lumina. Acest lucru poate dezvălui imediat probleme cu matricile luminii, culling-ul frustum-ului sau randarea obiectelor în timpul etapei de profunzime.

Concluzie

Shadow mapping-ul în timp real este o piatră de temelie a graficii 3D moderne, transformând scenele plate, lipsite de viață, în lumi credibile și dinamice. Deși conceptul de randare din perspectiva luminii este simplu, obținerea unor rezultate de înaltă calitate, lipsite de artefacte, necesită o înțelegere profundă a mecanismelor subiacente, de la pipeline-ul în două etape la nuanțele deplasării de profunzime și aliasării.

Începând cu o implementare de bază, puteți aborda progresiv artefactele comune, cum ar fi acneea de umbră și marginile zimțate. De acolo, puteți îmbunătăți-vă vizualul cu tehnici avansate, cum ar fi PCF pentru umbre moi sau Hărți de Umbre în Cascadă pentru medii la scară largă. Călătoria în randarea umbrelor este un exemplu perfect de amestec de artă și știință care face grafica computerizată atât de captivantă. Vă încurajăm să experimentați cu aceste tehnici, să le depășiți limitele și să aduceți un nou nivel de realism proiectelor dvs. WebGL.