WebGL Shadow Mapping: Een Uitgebreide Gids voor Real-Time Rendering

In de wereld van 3D computer graphics zijn er weinig elementen die meer bijdragen aan realisme en immersie dan schaduwen. Ze bieden cruciale visuele aanwijzingen over de ruimtelijke relaties tussen objecten, de locatie van lichtbronnen en de algehele geometrie van een scène. Zonder schaduwen kunnen 3D-werelden vlak, onsamenhangend en kunstmatig aanvoelen. Voor webgebaseerde 3D-applicaties die draaien op WebGL, is het implementeren van hoogwaardige, real-time schaduwen een kenmerk van professionele ervaringen. Deze gids duikt diep in de meest fundamentele en wijdverbreide techniek om dit te bereiken: Shadow Mapping.

Of u nu een doorgewinterde grafische programmeur bent of een webontwikkelaar die de derde dimensie verkent, dit artikel zal u de kennis verschaffen om real-time schaduwen in uw WebGL-projecten te begrijpen, implementeren en problemen op te lossen. We zullen een reis maken van de kerntheorie naar praktische implementatiedetails, waarbij we veelvoorkomende valkuilen en de geavanceerde technieken die in moderne grafische engines worden gebruikt, verkennen.

Hoofdstuk 1: De Grondbeginselen van Shadow Mapping

In de kern is shadow mapping een slimme en elegante techniek die bepaalt of een punt in een scène in de schaduw ligt door een simpele vraag te stellen: "Kan dit punt gezien worden door de lichtbron?" Als het antwoord nee is, betekent dit dat iets het licht blokkeert en het punt in de schaduw moet liggen. Om deze vraag programmatisch te beantwoorden, gebruiken we een rendering-aanpak in twee stappen (two-pass).

Wat is Shadow Mapping? Het Kernconcept

De hele techniek draait om het twee keer renderen van de scène, telkens vanuit een ander gezichtspunt:

• Stap 1: De Diepte-Pass (Het Perspectief van het Licht). Eerst renderen we de volledige scène vanuit de exacte positie en oriëntatie van de lichtbron. We geven in deze stap echter niet om kleuren of texturen. De enige informatie die we nodig hebben, is de diepte. Voor elk gerenderd object registreren we de afstand tot de lichtbron. Deze verzameling dieptewaarden wordt opgeslagen in een speciale textuur, een shadow map of depth map genoemd. Elke pixel in deze map vertegenwoordigt de afstand tot het dichtstbijzijnde object vanuit het gezichtspunt van het licht in een specifieke richting.
• Stap 2: De Scène-Pass (Het Perspectief van de Camera). Vervolgens renderen we de scène zoals we normaal zouden doen, vanuit het perspectief van de hoofdcamera. Maar voor elke afzonderlijke pixel die wordt getekend, voeren we een extra berekening uit. We bepalen de positie van die pixel in de 3D-ruimte en vragen dan: "Hoe ver is dit punt van de lichtbron?" Vervolgens vergelijken we deze afstand met de waarde die is opgeslagen in onze shadow map (uit Stap 1) op de overeenkomstige locatie.

De logica is eenvoudig:

• Als de huidige afstand van de pixel tot het licht groter is dan de afstand die in de shadow map is opgeslagen, betekent dit dat er een ander object dichter bij het licht is langs dezelfde gezichtslijn. Daarom is de huidige pixel in de schaduw.
• Als de afstand van de pixel kleiner is dan of gelijk is aan de afstand in de shadow map, betekent dit dat niets het blokkeert en de pixel volledig verlicht is.

De Scène Opzetten

Om shadow mapping in WebGL te implementeren, hebt u verschillende belangrijke componenten nodig:

• Een Lichtbron: Dit kan een directioneel licht (zoals de zon), een puntlicht (zoals een gloeilamp) of een spotlight zijn. Het type licht bepaalt het soort projectiematrix dat tijdens de diepte-pass wordt gebruikt.
• Een Framebuffer Object (FBO): WebGL rendert normaal gesproken naar de standaard framebuffer van het scherm. Om onze shadow map te creëren, hebben we een off-screen renderdoel nodig. Een FBO stelt ons in staat om naar een textuur te renderen in plaats van naar het scherm. Onze FBO zal worden geconfigureerd met een dieptetextuur als bijlage (attachment).
• Twee Sets Shaders: U hebt één shaderprogramma nodig voor de diepte-pass (een zeer eenvoudige) en een ander voor de uiteindelijke scène-pass (die de logica voor schaduwberekening bevat).
• Matrices: U hebt de standaard model-, view- en projectiematrices voor de camera nodig. Cruciaal is dat u ook een view- en projectiematrix voor de lichtbron nodig hebt, vaak gecombineerd tot één "light space matrix".

Hoofdstuk 2: De Two-Pass Rendering Pipeline in Detail

Laten we de twee rendering-stappen stap voor stap uiteenzetten, met de focus op de rollen van de matrices en shaders.

Stap 1: De Diepte-Pass (Vanuit het Perspectief van het Licht)

Het doel van deze stap is om onze dieptetextuur te vullen. Zo werkt het:

1. Bind de FBO: Voordat u tekent, geeft u WebGL de opdracht om naar uw aangepaste FBO te renderen in plaats van naar het canvas.
2. Configureer de Viewport: Stel de viewport-afmetingen in zodat deze overeenkomen met de grootte van uw shadow map-textuur (bijv. 1024x1024 pixels).
3. Wis de Dieptebuffer: Zorg ervoor dat de dieptebuffer van de FBO wordt gewist voordat er gerenderd wordt.
4. Creëer de Matrices van het Licht:
   • Light View Matrix: Deze matrix transformeert de wereld naar het gezichtspunt van het licht. Voor een directioneel licht wordt dit doorgaans gemaakt met een `lookAt`-functie, waarbij het "oog" de positie van het licht is en het "doel" de richting waarin het wijst.
   • Light Projection Matrix: Voor een directioneel licht, dat parallelle stralen heeft, wordt een orthografische projectie gebruikt. Voor puntlichten of spotlights wordt een perspectiefprojectie gebruikt. Deze matrix definieert het volume in de ruimte (een doos of een frustum) dat schaduwen zal werpen.
5. Gebruik het Diepte-Shaderprogramma: Dit is een minimale shader. De enige taak van de vertex shader is om de vertexpositie te vermenigvuldigen met de view- en projectiematrices van het licht. De fragment shader is nog eenvoudiger: deze schrijft alleen de dieptewaarde van het fragment (zijn z-coördinaat) naar de dieptetextuur. In modern WebGL hebt u vaak niet eens een aangepaste fragment shader nodig, omdat de FBO kan worden geconfigureerd om de dieptebuffer automatisch vast te leggen.
6. Render de Scène: Teken alle objecten in uw scène die schaduw werpen. De FBO bevat nu onze voltooide shadow map.

Stap 2: De Scène-Pass (Vanuit het Perspectief van de Camera)

Nu renderen we het uiteindelijke beeld, waarbij we de zojuist gemaakte shadow map gebruiken om schaduwen te bepalen.

1. Ontkoppel de FBO: Schakel terug naar het renderen naar de standaard canvas-framebuffer.
2. Configureer de Viewport: Stel de viewport terug naar de afmetingen van het canvas.
3. Maak het Scherm Leeg: Wis de kleur- en dieptebuffers van het canvas.
4. Gebruik het Scène-Shaderprogramma: Hier gebeurt de magie. Deze shader is complexer.
   • Vertex Shader: Deze shader moet twee dingen doen. Ten eerste berekent hij zoals gebruikelijk de uiteindelijke vertexpositie met behulp van de model-, view- en projectiematrices van de camera. Ten tweede moet hij ook de positie van de vertex vanuit het perspectief van het licht berekenen met behulp van de light space matrix uit Stap 1. Dit tweede coördinaat wordt als een 'varying' doorgegeven aan de fragment shader.
   • Fragment Shader: Dit is de kern van de schaduwlogica. Voor elk fragment:
     1. Ontvang de geïnterpoleerde positie in 'light space' van de vertex shader.
     2. Voer een perspectiefdeling uit op dit coördinaat (deel x, y, z door w). Dit transformeert het naar Normalized Device Coordinates (NDC), met een bereik van -1 tot 1.
     3. Transformeer de NDC naar textuurcoördinaten (die van 0 tot 1 lopen) zodat we onze shadow map kunnen samplen. Dit is een eenvoudige schaal- en bias-operatie: `texCoord = ndc * 0.5 + 0.5;`.
     4. Gebruik deze textuurcoördinaten om de shadow map-textuur te samplen die in Stap 1 is gemaakt. Dit geeft ons `depthFromShadowMap`.
     5. De huidige diepte van het fragment vanuit het perspectief van het licht is de z-component van het getransformeerde light space-coördinaat. Laten we dit `currentDepth` noemen.
     6. Vergelijk de diepten: Als `currentDepth > depthFromShadowMap`, bevindt het fragment zich in de schaduw. We moeten een kleine bias toevoegen aan deze controle om een artefact genaamd "shadow acne" te vermijden, dat we hierna zullen bespreken.
     7. Bepaal op basis van de vergelijking een schaduwfactor (bijv. 1.0 voor verlicht, 0.3 voor in schaduw).
     8. Pas deze schaduwfactor toe op de uiteindelijke kleurberekening (bijv. vermenigvuldig de omgevings- en diffuse lichtcomponenten met de schaduwfactor).
5. Render de Scène: Teken alle objecten in de scène.

Hoofdstuk 3: Veelvoorkomende Problemen en Oplossingen

Het implementeren van basis shadow mapping zal snel verschillende veelvoorkomende visuele artefacten onthullen. Het begrijpen en oplossen ervan is cruciaal voor het bereiken van hoogwaardige resultaten.

Shadow Acne (Zelf-schaduw Artefacten)

Het Probleem: U ziet mogelijk vreemde, onjuiste patronen van donkere lijnen of Moiré-achtige patronen op oppervlakken die volledig verlicht zouden moeten zijn. Dit wordt "shadow acne" genoemd. Het treedt op omdat de dieptewaarde die is opgeslagen in de shadow map en de dieptewaarde die wordt berekend tijdens de scène-pass voor hetzelfde oppervlak zijn. Door onnauwkeurigheden in drijvende-kommagetallen en de beperkte resolutie van de shadow map, kunnen kleine fouten ervoor zorgen dat een fragment onjuist vaststelt dat het achter zichzelf ligt, wat resulteert in zelf-schaduw.

De Oplossing: Depth Bias. De eenvoudigste oplossing is om een kleine bias toe te voegen aan de `currentDepth` vóór de vergelijking. Door het fragment iets dichter bij het licht te laten lijken dan het in werkelijkheid is, duwen we het "uit" zijn eigen schaduw.

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

Het vinden van de juiste bias-waarde is een delicate evenwichtsoefening. Te klein, en de acne blijft. Te groot, en u krijgt het volgende probleem.

Peter Panning

Het Probleem: Dit artefact, vernoemd naar het personage dat kon vliegen en zijn schaduw verloor, manifesteert zich als een zichtbare opening tussen een object en zijn schaduw. Het laat objecten lijken alsof ze zweven of losgekoppeld zijn van de oppervlakken waarop ze zouden moeten rusten. Het is het directe gevolg van het gebruik van een te grote depth bias.

De Oplossing: Slope-Scale Depth Bias. Een robuustere oplossing dan een constante bias is om de bias afhankelijk te maken van de steilheid van het oppervlak ten opzichte van het licht. Steilere polygonen zijn gevoeliger voor acne en vereisen een grotere bias. Vlakkere polygonen hebben een kleinere bias nodig. De meeste grafische API's, inclusief WebGL, bieden functionaliteit om dit soort bias automatisch toe te passen tijdens de diepte-pass, wat over het algemeen de voorkeur heeft boven een handmatige bias in de fragment shader.

Perspectief Aliasing (Gekartelde Randen)

Het Probleem: De randen van uw schaduwen zien er blokkerig, gekarteld en gepixeld uit. Dit is een vorm van aliasing. Het gebeurt omdat de resolutie van de shadow map eindig is. Een enkele pixel (of texel) in de shadow map kan een groot gebied op een oppervlak in de uiteindelijke scène beslaan, vooral voor oppervlakken dicht bij de camera of die onder een scherpe hoek worden bekeken. Deze mismatch in resolutie veroorzaakt het karakteristieke blokkerige uiterlijk.

De Oplossing: Het verhogen van de shadow map-resolutie (bijv. van 1024x1024 naar 4096x4096) kan helpen, maar dit gaat gepaard met aanzienlijke geheugen- en prestatiekosten en lost het onderliggende probleem niet volledig op. De echte oplossingen liggen in meer geavanceerde technieken.

Hoofdstuk 4: Geavanceerde Shadow Mapping Technieken

Basis shadow mapping biedt een fundament, maar professionele applicaties gebruiken meer geavanceerde algoritmen om de beperkingen ervan, met name aliasing, te overwinnen.

Percentage-Closer Filtering (PCF)

PCF is de meest gebruikelijke techniek om schaduwranden te verzachten en aliasing te verminderen. In plaats van een enkele sample uit de shadow map te nemen en een binaire (in schaduw of niet in schaduw) beslissing te nemen, neemt PCF meerdere samples uit het gebied rond het doelcoördinaat.

Het Concept: Voor elk fragment samplen we de shadow map niet slechts één keer, maar in een rasterpatroon (bijv. 3x3 of 5x5) rond het geprojecteerde textuurcoördinaat van het fragment. Voor elk van deze samples voeren we de dieptevergelijking uit. De uiteindelijke schaduwwaarde is het gemiddelde van al deze vergelijkingen. Als bijvoorbeeld 4 van de 9 samples in de schaduw liggen, zal het fragment voor 4/9e in de schaduw zijn, wat resulteert in een vloeiende penumbra (de zachte rand van een schaduw).

Implementatie: Dit wordt volledig binnen de fragment shader gedaan. Het omvat een lus die over een kleine 'kernel' itereert, de shadow map op elke offset sampelt en de resultaten accumuleert. WebGL 2 biedt hardwareondersteuning (`texture` met een `sampler2DShadow`) die de vergelijking en filtering efficiënter kan uitvoeren.

Voordeel: Verbetert de schaduwkwaliteit drastisch door harde, gealiaste randen te vervangen door vloeiende, zachte randen.

Kosten: De prestaties nemen af met het aantal samples dat per fragment wordt genomen.

Cascaded Shadow Maps (CSM)

CSM is de industriestandaard oplossing voor het renderen van schaduwen van een enkele directionele lichtbron (zoals de zon) over een zeer grote scène. Het pakt het probleem van perspectief aliasing direct aan.

Het Concept: Het kernidee is dat objecten dicht bij de camera een veel hogere schaduwresolutie nodig hebben dan objecten ver weg. CSM verdeelt de view frustum van de camera in verschillende secties, of "cascades," langs de diepte. Vervolgens wordt voor elke cascade een aparte, hoogwaardige shadow map gerenderd. De cascade die het dichtst bij de camera ligt, beslaat een klein gebied van de wereldruimte en heeft daardoor een zeer hoge effectieve resolutie. Cascades verder weg beslaan progressief grotere gebieden met dezelfde textuurgrootte, wat acceptabel is omdat die details minder zichtbaar zijn voor de speler.

Implementatie: Dit is aanzienlijk complexer.

1. Verdeel op de CPU de camera frustum in 2-4 cascades.
2. Bereken voor elke cascade een nauwsluitende orthografische projectiematrix voor het licht die dat deel van de frustum perfect omsluit.
3. Voer in de rendering-lus de diepte-pass meerdere keren uit—één keer voor elke cascade, renderend naar een andere shadow map (of een regio van een textuuratlas).
4. Bepaal in de fragment shader van de uiteindelijke scène-pass tot welke cascade het huidige fragment behoort op basis van zijn afstand tot de camera.
5. Sample de shadow map van de juiste cascade om de schaduw te berekenen.

Voordeel: Biedt consistent schaduwen met hoge resolutie over grote afstanden, wat het perfect maakt voor buitenomgevingen.

Variance Shadow Maps (VSM)

VSM is een andere techniek voor het creëren van zachte schaduwen, maar het heeft een andere aanpak dan PCF.

Het Concept: In plaats van alleen de diepte op te slaan in de shadow map, slaat VSM twee waarden op: de diepte (het eerste moment) en de diepte in het kwadraat (het tweede moment). Met deze twee waarden kunnen we de variantie van de diepteverdeling berekenen. Met behulp van een wiskundig hulpmiddel genaamd de ongelijkheid van Chebyshev, kunnen we vervolgens de waarschijnlijkheid schatten dat een fragment in de schaduw ligt. Het belangrijkste voordeel is dat een VSM-textuur kan worden vervaagd met standaard hardware-versnelde lineaire filtering en mipmapping, iets wat wiskundig ongeldig is voor een standaard depth map. Dit maakt zeer grote, zachte en vloeiende schaduwpenumbra's mogelijk met vaste prestatiekosten.

Nadeel: De belangrijkste zwakte van VSM is "light bleeding," waarbij licht door objecten lijkt te lekken in situaties met overlappende occluders, omdat de statistische benadering kan falen.

Hoofdstuk 5: Praktische Implementatietips & Prestaties

De Resolutie van uw Shadow Map Kiezen

De resolutie van uw shadow map is een directe afweging tussen kwaliteit en prestaties. Een grotere textuur zorgt voor scherpere schaduwen, maar verbruikt meer videogeheugen en duurt langer om te renderen en te samplen. Veelvoorkomende formaten zijn:

• 1024x1024: Een goede basis voor veel applicaties.
• 2048x2048: Biedt een merkbare kwaliteitsverbetering voor desktopapplicaties.
• 4096x4096: Hoge kwaliteit, vaak gebruikt voor 'hero assets' of in engines met robuuste culling.

Onthoud dat het geheugengebruik kwadratisch schaalt; een 4096x4096 textuur gebruikt 16 keer meer geheugen dan een 1024x1024 textuur.

Het Optimaliseren van de Frustum van het Licht

Om het maximale uit elke pixel in uw shadow map te halen, is het cruciaal dat het projectievolume van het licht (zijn orthografische doos of perspectief frustum) zo nauw mogelijk aansluit op de scène-elementen die schaduw nodig hebben. Voor een directioneel licht betekent dit dat de orthografische projectie alleen het zichtbare deel van de camera's frustum moet omsluiten. Elke verspilde ruimte in de shadow map is verspilde resolutie.

WebGL Extensies en Versies

WebGL 1 vs. WebGL 2: Hoewel shadow mapping mogelijk is in WebGL 1, is het veel eenvoudiger en efficiënter in WebGL 2. WebGL 1 vereist de `WEBGL_depth_texture`-extensie om een dieptetextuur te maken. WebGL 2 heeft deze functionaliteit ingebouwd. Bovendien biedt WebGL 2 toegang tot schaduwsamplers (`sampler2DShadow`), die hardware-versnelde PCF kunnen uitvoeren, wat een aanzienlijke prestatieverbetering biedt ten opzichte van handmatige PCF-lussen in de shader.

Schaduwen Debuggen

Schaduwen kunnen notoir moeilijk te debuggen zijn. De meest nuttige techniek is het visualiseren van de shadow map. Pas uw applicatie tijdelijk aan om de dieptetextuur van een specifieke lichtbron direct op een vierkant op het scherm te renderen. Hierdoor kunt u precies zien wat het licht "ziet". Dit kan onmiddellijk problemen onthullen met de matrices van uw licht, frustum culling, of het renderen van objecten tijdens de diepte-pass.

Conclusie

Real-time shadow mapping is een hoeksteen van moderne 3D-graphics, die vlakke, levenloze scènes transformeert in geloofwaardige en dynamische werelden. Hoewel het concept van renderen vanuit het perspectief van een lichtbron eenvoudig is, vereist het bereiken van hoogwaardige, artefactvrije resultaten een diepgaand begrip van de onderliggende mechanismen, van de two-pass pipeline tot de nuances van depth bias en aliasing.

Door te beginnen met een basisimplementatie, kunt u geleidelijk veelvoorkomende artefacten zoals shadow acne en gekartelde randen aanpakken. Van daaruit kunt u uw visuals verbeteren met geavanceerde technieken zoals PCF voor zachte schaduwen of Cascaded Shadow Maps voor grootschalige omgevingen. De reis naar schaduw-rendering is een perfect voorbeeld van de mix van kunst en wetenschap die computer graphics zo boeiend maakt. We moedigen u aan om met deze technieken te experimenteren, hun grenzen te verleggen en een nieuw niveau van realisme in uw WebGL-projecten te brengen.