WebGL Shadow Mapping: En omfattande guide till realtidsrendering

I 3D-datorgrafikens värld är det få element som bidrar mer till realism och immersion än skuggor. De ger avgörande visuella ledtrådar om spatiala förhållanden mellan objekt, ljuskällors placering och den övergripande geometrin i en scen. Utan skuggor kan 3D-världar kännas platta, osammanhängande och artificiella. För webbaserade 3D-applikationer som drivs av WebGL är implementering av högkvalitativa realtidsskuggor ett kännetecken för professionella upplevelser. Denna guide ger en djupdykning i den mest grundläggande och använda tekniken för att uppnå detta: Shadow Mapping.

Oavsett om du är en erfaren grafikprogrammerare eller en webbutvecklare som ger dig in i den tredje dimensionen, kommer denna artikel att ge dig kunskapen för att förstå, implementera och felsöka realtidsskuggor i dina WebGL-projekt. Vi kommer att resa från den grundläggande teorin till praktiska implementeringsdetaljer, utforska vanliga fallgropar och de avancerade tekniker som används i moderna grafikmotorer.

Kapitel 1: Grunderna i Shadow Mapping

I grund och botten är shadow mapping en smart och elegant teknik som avgör om en punkt i en scen är i skugga genom att ställa en enkel fråga: "Kan denna punkt ses av ljuskällan?" Om svaret är nej, betyder det att något blockerar ljuset, och punkten måste vara i skugga. För att besvara denna fråga programmatiskt använder vi en renderingsmetod i två steg (two-pass).

Vad är Shadow Mapping? Kärnkonceptet

Hela tekniken kretsar kring att rendera scenen två gånger, varje gång från en annan synvinkel:

• Steg 1: Djupsteget (Ljusets perspektiv). Först renderar vi hela scenen från ljuskällans exakta position och orientering. Vi bryr oss dock inte om färger eller texturer i detta steg. Den enda informationen vi behöver är djup. För varje objekt som renderas registrerar vi dess avstånd från ljuskällan. Denna samling av djupvärden lagras i en speciell textur som kallas en shadow map eller depth map (skuggkarta eller djupkarta). Varje pixel i denna karta representerar avståndet till det närmaste objektet från ljusets synvinkel i en specifik riktning.
• Steg 2: Scensteget (Kamerans perspektiv). Därefter renderar vi scenen som vi normalt skulle göra, från huvudkamerans perspektiv. Men för varje enskild pixel som ritas utför vi en extra beräkning. Vi bestämmer pixelns position i 3D-rymden och frågar sedan: "Hur långt är denna punkt från ljuskällan?" Vi jämför sedan detta avstånd med värdet som lagras i vår shadow map (från Steg 1) på motsvarande plats.

Logiken är enkel:

• Om pixelns nuvarande avstånd från ljuset är större än avståndet som lagras i skuggkartan, betyder det att det finns ett annat objekt närmare ljuset längs samma siktlinje. Därför är den aktuella pixeln i skugga.
• Om pixelns avstånd är mindre än eller lika med avståndet i skuggkartan, betyder det att inget blockerar den, och pixeln är fullt upplyst.

Att sätta upp scenen

För att implementera shadow mapping i WebGL behöver du flera nyckelkomponenter:

• En ljuskälla: Detta kan vara ett riktat ljus (som solen), ett punktljus (som en glödlampa) eller en spotlight. Ljustypen avgör vilken typ av projektionsmatris som används under djupsteget.
• Ett Framebuffer Object (FBO): WebGL renderar normalt till skärmens standard-framebuffer. För att skapa vår shadow map behöver vi ett renderingsmål utanför skärmen (off-screen). En FBO låter oss rendera till en textur istället för skärmen. Vår FBO kommer att konfigureras med en ansluten djuptextur (depth texture attachment).
• Två uppsättningar shaders: Du behöver ett shader-program för djupsteget (ett mycket enkelt) och ett annat för det slutliga scensteget (som kommer att innehålla logiken för skuggberäkning).
• Matriser: Du behöver standardmatriserna för modell, vy och projektion för kameran. Avgörande är att du också behöver en vy- och projektionsmatris för ljuskällan, ofta kombinerade till en enda "light space matrix".

Kapitel 2: Renderingsprocessen i två steg i detalj

Låt oss gå igenom de två renderingsstegen steg för steg, med fokus på matrisernas och shaders roll.

Steg 1: Djupsteget (Från ljusets perspektiv)

Målet med detta steg är att fylla vår djuptextur. Så här fungerar det:

1. Bind FBO: Innan du ritar, instruerar du WebGL att rendera till din anpassade FBO istället för till canvasen.
2. Konfigurera viewport: Ställ in viewport-dimensionerna så att de matchar storleken på din shadow map-textur (t.ex. 1024x1024 pixlar).
3. Rensa djupbufferten: Se till att FBO:ns djupbuffert rensas innan rendering.
4. Skapa ljusets matriser:
   • Ljusets vymatris (View Matrix): Denna matris transformerar världen till ljusets synvinkel. För ett riktat ljus skapas denna vanligtvis med en `lookAt`-funktion, där "ögat" är ljusets position och "målet" är den riktning det pekar.
   • Ljusets projektionsmatris (Projection Matrix): För ett riktat ljus, som har parallella strålar, används en ortografisk projektion. För punktljus eller spotlights används en perspektivprojektion. Denna matris definierar den volym i rymden (en låda eller en frustum) som kommer att kasta skuggor.
5. Använd djup-shader-programmet: Detta är en minimal shader. Vertex-shaderns enda uppgift är att multiplicera hörnpositionen (vertex position) med ljusets vy- och projektionsmatriser. Fragment-shadern är ännu enklare: den skriver bara fragmentets djupvärde (dess z-koordinat) till djuptexturen. I modern WebGL behöver du ofta inte ens en anpassad fragment-shader, eftersom FBO kan konfigureras för att automatiskt fånga djupbufferten.
6. Rendera scenen: Rita alla skuggkastande objekt i din scen. FBO:n innehåller nu vår färdiga shadow map.

Steg 2: Scensteget (Från kamerans perspektiv)

Nu renderar vi den slutliga bilden och använder den shadow map vi just skapade för att bestämma skuggor.

1. Avbind FBO: Växla tillbaka till att rendera till canvasens standard-framebuffer.
2. Konfigurera viewport: Ställ tillbaka viewporten till canvasens dimensioner.
3. Rensa skärmen: Rensa färg- och djupbuffertarna för canvasen.
4. Använd scen-shader-programmet: Det är här magin sker. Denna shader är mer komplex.
   • Vertex Shader: Denna shader måste göra två saker. För det första beräknar den den slutliga hörnpositionen med hjälp av kamerans modell-, vy- och projektionsmatriser som vanligt. För det andra måste den också beräkna hörnpositionen från ljusets perspektiv med hjälp av light space-matrisen från Steg 1. Denna andra koordinat skickas till fragment-shadern som en `varying`.
   • Fragment Shader: Detta är kärnan i skugglogiken. För varje fragment:
     1. Ta emot den interpolerade positionen i ljusrymden (light space) från vertex-shadern.
     2. Utför en perspektivdivision på denna koordinat (dividera x, y, z med w). Detta transformerar den till normaliserade enhetskoordinater (NDC, Normalized Device Coordinates), som sträcker sig från -1 till 1.
     3. Transformera NDC till texturkoordinater (som sträcker sig från 0 till 1) så att vi kan sampla vår shadow map. Detta är en enkel skalnings- och bias-operation: `texCoord = ndc * 0.5 + 0.5;`.
     4. Använd dessa texturkoordinater för att sampla den shadow map-textur som skapades i Steg 1. Detta ger oss `depthFromShadowMap`.
     5. Fragmentets nuvarande djup från ljusets perspektiv är dess z-komponent från den transformerade light space-koordinaten. Låt oss kalla det `currentDepth`.
     6. Jämför djupen: Om `currentDepth > depthFromShadowMap`, är fragmentet i skugga. Vi måste lägga till en liten bias till denna kontroll för att undvika en artefakt som kallas "shadow acne", som vi kommer att diskutera härnäst.
     7. Baserat på jämförelsen, bestäm en skuggfaktor (t.ex. 1.0 för upplyst, 0.3 för skuggad).
     8. Applicera denna skuggfaktor på den slutliga färgberäkningen (t.ex. multiplicera de ambienta och diffusa belysningskomponenterna med skuggfaktorn).
5. Rendera scenen: Rita alla objekt i scenen.

Kapitel 3: Vanliga problem och lösningar

Implementering av grundläggande shadow mapping kommer snabbt att avslöja flera vanliga visuella artefakter. Att förstå och åtgärda dem är avgörande för att uppnå högkvalitativa resultat.

Shadow Acne (Självskuggande artefakter)

Problemet: Du kan se konstiga, felaktiga mönster av mörka linjer eller Moiré-liknande mönster på ytor som borde vara fullt upplysta. Detta kallas "shadow acne". Det uppstår eftersom djupvärdet som lagras i shadow map och djupvärdet som beräknas under scensteget är för samma yta. På grund av flyttalsfel och den begränsade upplösningen i shadow map kan små fel få ett fragment att felaktigt avgöra att det ligger bakom sig själv, vilket resulterar i självskuggning.

Lösningen: Djup-bias (Depth Bias). Den enklaste lösningen är att introducera en liten bias till `currentDepth` före jämförelsen. Genom att få fragmentet att verka något närmare ljuset än det faktiskt är, knuffar vi det "ut" ur sin egen skugga.

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

Att hitta rätt bias-värde är en känslig balansgång. För litet, och acnen kvarstår. För stort, och du får nästa problem.

Peter Panning

Problemet: Denna artefakt, döpt efter karaktären som kunde flyga och tappade sin skugga, yttrar sig som ett synligt glapp mellan ett objekt och dess skugga. Det får objekt att se ut som om de svävar eller är frånkopplade från ytorna de borde vila på. Det är ett direkt resultat av att använda en för stor djup-bias.

Lösningen: Lutningsskalad djup-bias (Slope-Scale Depth Bias). En mer robust lösning än en konstant bias är att göra biasen beroende av ytans branthet i förhållande till ljuset. Brantare polygoner är mer benägna att drabbas av acne och kräver en större bias. Plattare polygoner behöver en mindre bias. De flesta grafik-API:er, inklusive WebGL, tillhandahåller funktionalitet för att applicera denna typ av bias automatiskt under djupsteget, vilket generellt är att föredra framför en manuell bias i fragment-shadern.

Perspektiv-aliasing (taggiga kanter)

Problemet: Kanterna på dina skuggor ser blockiga, taggiga och pixliga ut. Detta är en form av aliasing. Det händer eftersom upplösningen på shadow map är ändlig. En enda pixel (eller texel) i shadow map kan täcka ett stort område på en yta i den slutliga scenen, särskilt för ytor nära kameran eller de som ses från en snäv vinkel. Denna skillnad i upplösning orsakar det karaktäristiska blockiga utseendet.

Lösningen: Att öka shadow map-upplösningen (t.ex. från 1024x1024 till 4096x4096) kan hjälpa, men det medför en betydande kostnad i minne och prestanda och löser inte helt det underliggande problemet. De verkliga lösningarna ligger i mer avancerade tekniker.

Kapitel 4: Avancerade tekniker för Shadow Mapping

Grundläggande shadow mapping utgör en grund, men professionella applikationer använder mer sofistikerade algoritmer för att övervinna dess begränsningar, särskilt aliasing.

Percentage-Closer Filtering (PCF)

PCF är den vanligaste tekniken för att mjuka upp skuggkanter och minska aliasing. Istället för att ta ett enda sampel från shadow map och fatta ett binärt beslut (i skugga eller inte i skugga), tar PCF flera sampel från området runt målkoordinaten.

Konceptet: För varje fragment samplar vi shadow map inte bara en gång, utan i ett rutnätsmönster (t.ex. 3x3 eller 5x5) runt fragmentets projicerade texturkoordinat. För vart och ett av dessa sampel utför vi djupjämförelsen. Det slutliga skuggvärdet är genomsnittet av alla dessa jämförelser. Till exempel, om 4 av 9 sampel är i skugga, kommer fragmentet att vara 4/9 skuggat, vilket resulterar i en mjuk penumbra (den mjuka kanten av en skugga).

Implementation: Detta görs helt och hållet i fragment-shadern. Det involverar en loop som itererar över en liten kärna (kernel), samplar shadow map vid varje förskjutning och ackumulerar resultaten. WebGL 2 erbjuder hårdvarustöd (`texture` med en `sampler2DShadow`) som kan utföra jämförelsen och filtreringen mer effektivt.

Fördel: Förbättrar skuggkvaliteten drastiskt genom att ersätta hårda, aliaserade kanter med mjuka, lena kanter.

Kostnad: Prestandan minskar med antalet sampel som tas per fragment.

Cascaded Shadow Maps (CSM)

CSM är branschstandardlösningen för att rendera skuggor från en enda riktad ljuskälla (som solen) över en mycket stor scen. Den tar direkt itu med problemet med perspektiv-aliasing.

Konceptet: Kärnidén är att objekt nära kameran behöver mycket högre skuggupplösning än objekt långt borta. CSM delar upp kamerans synfrustum i flera sektioner, eller "kaskader", längs dess djup. En separat, högkvalitativ shadow map renderas sedan för varje kaskad. Kaskaden närmast kameran täcker ett litet område i världsrymden och har därmed mycket hög effektiv upplösning. Kaskader längre bort täcker progressivt större områden med samma texturstorlek, vilket är acceptabelt eftersom dessa detaljer är mindre synliga för spelaren.

Implementation: Detta är betydligt mer komplext.

1. I CPU:n, dela upp kamerans frustum i 2-4 kaskader.
2. För varje kaskad, beräkna en tättslutande ortografisk projektionsmatris för ljuset som perfekt omsluter den sektionen av frustumet.
3. I renderingsloopen, utför djupsteget flera gånger—en gång för varje kaskad, och rendera till en annan shadow map (eller en region i en texturatlas).
4. I det slutliga scenstegets fragment-shader, avgör vilken kaskad det aktuella fragmentet tillhör baserat på dess avstånd från kameran.
5. Sampla den lämpliga kaskadens shadow map för att beräkna skuggan.

Fördel: Ger konsekvent högupplösta skuggor över stora avstånd, vilket gör den perfekt för utomhusmiljöer.

Variance Shadow Maps (VSM)

VSM är en annan teknik för att skapa mjuka skuggor, men den har ett annat tillvägagångssätt än PCF.

Konceptet: Istället för att bara lagra djupet i shadow map, lagrar VSM två värden: djupet (det första momentet) och djupet i kvadrat (det andra momentet). Dessa två värden låter oss beräkna variansen i djupfördelningen. Med hjälp av ett matematiskt verktyg som kallas Tjebysjovs olikhet kan vi sedan uppskatta sannolikheten för att ett fragment är i skugga. Den största fördelen är att en VSM-textur kan suddas ut med standard hårdvaruaccelererad linjär filtrering och mipmapping, något som är matematiskt ogiltigt för en standard djupkarta. Detta möjliggör mycket stora, mjuka och jämna skuggpenumbror med en fast prestandakostnad.

Nackdel: VSM:s största svaghet är "light bleeding", där ljus kan se ut att läcka igenom objekt i situationer med överlappande ockluderare, eftersom den statistiska uppskattningen kan fallera.

Kapitel 5: Praktiska implementeringstips & prestanda

Att välja upplösning på din Shadow Map

Upplösningen på din shadow map är en direkt avvägning mellan kvalitet och prestanda. En större textur ger skarpare skuggor men förbrukar mer videominne och tar längre tid att rendera och sampla. Vanliga storlekar inkluderar:

• 1024x1024: En bra baslinje för många applikationer.
• 2048x2048: Erbjuder en märkbar kvalitetsförbättring för datorapplikationer.
• 4096x4096: Hög kvalitet, används ofta för huvudobjekt (hero assets) eller i motorer med robust culling.

Kom ihåg att minnesanvändningen skalar kvadratiskt; en 4096x4096-textur använder 16 gånger mer minne än en 1024x1024-textur.

Optimera ljusets frustum

För att få ut det mesta av varje pixel i din shadow map är det avgörande att ljusets projektionsvolym (dess ortografiska låda eller perspektiviska frustum) är så tätt anpassad som möjligt till de scenelement som behöver skuggor. För ett riktat ljus innebär detta att anpassa dess ortografiska projektion så att den endast omsluter den synliga delen av kamerans frustum. Allt slösat utrymme i shadow map är förlorad upplösning.

WebGL-tillägg och versioner

WebGL 1 vs. WebGL 2: Även om shadow mapping är möjligt i WebGL 1, är det mycket enklare och effektivare i WebGL 2. WebGL 1 kräver tillägget `WEBGL_depth_texture` för att skapa en djuptextur. WebGL 2 har denna funktionalitet inbyggd. Dessutom ger WebGL 2 tillgång till shadow samplers (`sampler2DShadow`), som kan utföra hårdvaruaccelererad PCF, vilket ger en betydande prestandaökning jämfört med manuella PCF-loopar i shadern.

Felsökning av skuggor

Skuggor kan vara notoriskt svåra att felsöka. Den absolut mest användbara tekniken är att visualisera shadow map. Modifiera tillfälligt din applikation för att rendera djuptexturen från en specifik ljuskälla direkt på en fyrkant (quad) på skärmen. Detta låter dig se exakt vad ljuset "ser". Detta kan omedelbart avslöja problem med ditt ljus matriser, frustum culling eller objektrendering under djupsteget.

Slutsats

Realtidsskuggmappning (shadow mapping) är en hörnsten i modern 3D-grafik som förvandlar platta, livlösa scener till trovärdiga och dynamiska världar. Även om konceptet att rendera från ett ljus perspektiv är enkelt, kräver högkvalitativa, artefaktfria resultat en djup förståelse för den underliggande mekaniken, från renderingsprocessen i två steg till nyanserna av djup-bias och aliasing.

Genom att börja med en grundläggande implementering kan du successivt ta itu med vanliga artefakter som shadow acne och taggiga kanter. Därifrån kan du höja din visuella kvalitet med avancerade tekniker som PCF för mjuka skuggor eller Cascaded Shadow Maps för storskaliga miljöer. Resan in i skuggrendering är ett perfekt exempel på blandningen av konst och vetenskap som gör datorgrafik så fängslande. Vi uppmuntrar dig att experimentera med dessa tekniker, tänja på deras gränser och ge dina WebGL-projekt en ny nivå av realism.