WebGL Shadow Mapping: Ein umfassender Leitfaden für Echtzeit-Rendering

In der Welt der 3D-Computergrafik tragen nur wenige Elemente mehr zum Realismus und zur Immersion bei als Schatten. Sie liefern entscheidende visuelle Hinweise über die räumlichen Beziehungen zwischen Objekten, die Position von Lichtquellen und die Gesamtgeometrie einer Szene. Ohne Schatten können sich 3D-Welten flach, unzusammenhängend und künstlich anfühlen. Für webbasierte 3D-Anwendungen, die auf WebGL basieren, ist die Implementierung von hochwertigen Echtzeit-Schatten ein Kennzeichen professioneller Erlebnisse. Dieser Leitfaden bietet einen tiefen Einblick in die grundlegendste und am weitesten verbreitete Technik dafür: Shadow Mapping.

Ob Sie ein erfahrener Grafikprogrammierer sind oder ein Webentwickler, der sich in die dritte Dimension wagt, dieser Artikel wird Sie mit dem Wissen ausstatten, um Echtzeit-Schatten in Ihren WebGL-Projekten zu verstehen, zu implementieren und Fehler zu beheben. Wir reisen von der Kerntheorie zu praktischen Implementierungsdetails und untersuchen häufige Fallstricke und die fortgeschrittenen Techniken, die in modernen Grafik-Engines verwendet werden.

Kapitel 1: Die Grundlagen des Shadow Mapping

Im Kern ist Shadow Mapping eine clevere und elegante Technik, die feststellt, ob ein Punkt in einer Szene im Schatten liegt, indem sie eine einfache Frage stellt: "Kann dieser Punkt von der Lichtquelle gesehen werden?" Wenn die Antwort nein lautet, bedeutet dies, dass etwas das Licht blockiert, und der Punkt muss im Schatten liegen. Um diese Frage programmgesteuert zu beantworten, verwenden wir einen Zwei-Pass-Rendering-Ansatz.

Was ist Shadow Mapping? Das Kernkonzept

Die gesamte Technik dreht sich um das zweimalige Rendern der Szene, jedes Mal aus einer anderen Perspektive:

• Pass 1: Der Tiefen-Pass (Die Perspektive des Lichts). Zuerst rendern wir die gesamte Szene aus der exakten Position und Ausrichtung der Lichtquelle. In diesem Durchgang kümmern wir uns jedoch nicht um Farben oder Texturen. Die einzige benötigte Information ist die Tiefe. Für jedes gerenderte Objekt zeichnen wir seine Entfernung von der Lichtquelle auf. Diese Sammlung von Tiefenwerten wird in einer speziellen Textur gespeichert, die als Shadow Map oder Depth Map bezeichnet wird. Jedes Pixel in dieser Karte repräsentiert die Entfernung zum nächstgelegenen Objekt aus der Sicht des Lichts in einer bestimmten Richtung.
• Pass 2: Der Szenen-Pass (Die Perspektive der Kamera). Als Nächstes rendern wir die Szene wie gewohnt aus der Perspektive der Hauptkamera. Aber für jedes einzelne gezeichnete Pixel führen wir eine zusätzliche Berechnung durch. Wir ermitteln die Position dieses Pixels im 3D-Raum und fragen dann: "Wie weit ist dieser Punkt von der Lichtquelle entfernt?" Dann vergleichen wir diese Entfernung mit dem Wert, der in unserer Shadow Map (aus Pass 1) an der entsprechenden Stelle gespeichert ist.

Die Logik ist einfach:

• Wenn die aktuelle Entfernung des Pixels vom Licht größer ist als die in der Shadow Map gespeicherte Entfernung, bedeutet dies, dass ein anderes Objekt entlang derselben Sichtlinie näher am Licht ist. Daher befindet sich das aktuelle Pixel im Schatten.
• Wenn die Entfernung des Pixels kleiner oder gleich der Entfernung in der Shadow Map ist, bedeutet dies, dass nichts es blockiert, und das Pixel ist vollständig beleuchtet.

Einrichten der Szene

Um Shadow Mapping in WebGL zu implementieren, benötigen Sie mehrere Schlüsselkomponenten:

• Eine Lichtquelle: Dies kann ein gerichtetes Licht (wie die Sonne), ein Punktlicht (wie eine Glühbirne) oder ein Scheinwerfer sein. Die Art des Lichts bestimmt die Art der Projektionsmatrix, die während des Tiefen-Passes verwendet wird.
• Ein Framebuffer-Objekt (FBO): WebGL rendert normalerweise in den Standard-Framebuffer des Bildschirms. Um unsere Shadow Map zu erstellen, benötigen wir ein Renderziel außerhalb des Bildschirms. Ein FBO ermöglicht es uns, in eine Textur anstelle des Bildschirms zu rendern. Unser FBO wird mit einer Tiefentextur-Anbindung konfiguriert.
• Zwei Sätze von Shadern: Sie benötigen ein Shader-Programm für den Tiefen-Pass (ein sehr einfaches) und ein weiteres für den finalen Szenen-Pass (das die Shadow-Berechnungslogik enthält).
• Matrizen: Sie benötigen die Standard-Model-, View- und Projection-Matrizen für die Kamera. Entscheidend ist, dass Sie auch eine View- und Projection-Matrix für die Lichtquelle benötigen, die oft zu einer einzigen "Lichtraum-Matrix" kombiniert wird.

Kapitel 2: Die Zwei-Pass-Rendering-Pipeline im Detail

Lassen Sie uns die beiden Rendering-Pässe Schritt für Schritt aufschlüsseln und uns auf die Rollen der Matrizen und Shader konzentrieren.

Pass 1: Der Tiefen-Pass (Aus der Sicht des Lichts)

Das Ziel dieses Passes ist es, unsere Tiefentextur zu füllen. So funktioniert es:

1. Binden des FBOs: Vor dem Zeichnen weisen Sie WebGL an, in Ihr benutzerdefiniertes FBO anstelle des Canvas zu rendern.
2. Konfigurieren des Viewports: Stellen Sie die Viewport-Dimensionen auf die Größe Ihrer Shadow Map-Textur ein (z. B. 1024x1024 Pixel).
3. Löschen des Tiefenpuffers: Stellen Sie sicher, dass der Tiefenpuffer des FBOs vor dem Rendern gelöscht wird.
4. Erstellen der Lichtmatrizen:
   • Licht-View-Matrix: Diese Matrix transformiert die Welt in die Perspektive des Lichts. Für ein gerichtetes Licht wird dies typischerweise mit einer `lookAt`-Funktion erstellt, wobei das "Auge" die Position des Lichts und das "Ziel" die Richtung ist, in die es zeigt.
   • Licht-Projektionsmatrix: Für ein gerichtetes Licht mit parallelen Strahlen wird eine orthographische Projektion verwendet. Für Punktlichter oder Scheinwerfer wird eine perspektivische Projektion verwendet. Diese Matrix definiert das Volumen im Raum (eine Box oder ein Frustum), das Schatten wirft.
5. Verwenden des Tiefen-Shader-Programms: Dies ist ein minimaler Shader. Die einzige Aufgabe des Vertex-Shaders ist es, die Vertex-Position mit den View- und Projektionsmatrizen des Lichts zu multiplizieren. Der Fragment-Shader ist noch einfacher: Er schreibt nur den Tiefenwert des Fragments (seine z-Koordinate) in die Tiefentextur. In modernem WebGL benötigen Sie oft nicht einmal einen benutzerdefinierten Fragment-Shader, da das FBO so konfiguriert werden kann, dass es automatisch den Tiefenpuffer erfasst.
6. Rendern der Szene: Zeichnen Sie alle schattenwerfenden Objekte in Ihrer Szene. Das FBO enthält nun unsere abgeschlossene Shadow Map.

Pass 2: Der Szenen-Pass (Aus der Perspektive der Kamera)

Jetzt rendern wir das endgültige Bild und verwenden die gerade erstellte Shadow Map, um Schatten zu bestimmen.

1. Aufheben der FBO-Bindung: Schalten Sie zurück auf das Rendern des Standard-Canvas-Framebuffers.
2. Konfigurieren des Viewports: Setzen Sie den Viewport zurück auf die Canvas-Dimensionen.
3. Löschen des Bildschirms: Löschen Sie die Farb- und Tiefenpuffer des Canvas.
4. Verwenden des Szenen-Shader-Programms: Hier geschieht die Magie. Dieser Shader ist komplexer.
   • Vertex Shader: Dieser Shader muss zwei Dinge tun. Erstens berechnet er die endgültige Vertex-Position mithilfe der Model-, View- und Projection-Matrizen der Kamera wie gewohnt. Zweitens muss er auch die Position des Vertex aus der Perspektive des Lichts mithilfe der Lichtraum-Matrix aus Pass 1 berechnen. Diese zweite Koordinate wird als Varying an den Fragment-Shader übergeben.
   • Fragment Shader: Dies ist der Kern der Shadow-Logik. Für jedes Fragment:
     1. Empfangen Sie die interpolierte Position im Lichtraum vom Vertex-Shader.
     2. Führen Sie eine perspektivische Teilung dieser Koordinate durch (dividieren Sie x, y, z durch w). Dies wandelt sie in Normalisierte Gerätekoordinaten (NDC) um, die von -1 bis 1 reichen.
     3. Wandeln Sie die NDC in Texturkoordinaten um (die von 0 bis 1 reichen), damit wir unsere Shadow Map abtasten können. Dies ist eine einfache Skalierungs- und Bias-Operation: `texCoord = ndc * 0.5 + 0.5;`.
     4. Verwenden Sie diese Texturkoordinaten, um die in Pass 1 erstellte Shadow Map-Textur abzutasten. Dies ergibt `depthFromShadowMap`.
     5. Die aktuelle Tiefe des Fragments aus der Perspektive des Lichts ist seine z-Komponente der transformierten Lichtraum-Koordinate. Nennen wir sie `currentDepth`.
     6. Vergleichen Sie die Tiefen: Wenn `currentDepth > depthFromShadowMap`, befindet sich das Fragment im Schatten. Wir müssen dieser Prüfung einen kleinen Bias hinzufügen, um ein Artefakt namens "Shadow Acne" zu vermeiden, das wir als Nächstes besprechen werden.
     7. Basierend auf dem Vergleich bestimmen Sie einen Schattenfaktor (z. B. 1,0 für beleuchtet, 0,3 für beschattet).
     8. Wenden Sie diesen Schattenfaktor auf die endgültige Farbberechnung an (z. B. multiplizieren Sie die Umgebungs- und diffusen Beleuchtungskomponenten mit dem Schattenfaktor).
5. Rendern der Szene: Zeichnen Sie alle Objekte in der Szene.

Kapitel 3: Häufige Probleme und Lösungen

Die Implementierung grundlegenden Shadow Mappings wird schnell mehrere häufige visuelle Artefakte aufdecken. Das Verstehen und Beheben ist entscheidend für qualitativ hochwertige Ergebnisse.

Shadow Acne (Self-Shadowing-Artefakte)

Das Problem: Möglicherweise sehen Sie seltsame, falsche Muster von dunklen Linien oder Moiré-ähnlichen Mustern auf Oberflächen, die vollständig beleuchtet sein sollten. Dies nennt man "Shadow Acne". Es tritt auf, weil der in der Shadow Map gespeicherte Tiefenwert und der während des Szenen-Passes berechnete Tiefenwert für die selbe Oberfläche gelten. Aufgrund von Gleitkommaungenauigkeiten und der begrenzten Auflösung der Shadow Map können winzige Fehler dazu führen, dass ein Fragment fälschlicherweise feststellt, dass es sich hinter sich selbst befindet, was zu Self-Shadowing führt.

Die Lösung: Tiefen-Bias. Die einfachste Lösung besteht darin, der `currentDepth` vor dem Vergleich einen kleinen Bias hinzuzufügen. Indem wir das Fragment scheinbar etwas näher am Licht positionieren, als es tatsächlich ist, schieben wir es "aus" seinem eigenen Schatten.

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

Das Finden des richtigen Bias-Wertes ist ein heikler Balanceakt. Zu klein, und die Acne bleibt bestehen. Zu groß, und Sie erhalten das nächste Problem.

Peter Panning

Das Problem: Dieses Artefakt, benannt nach der Figur, die fliegen konnte und ihren Schatten verlor, äußert sich als sichtbare Lücke zwischen einem Objekt und seinem Schatten. Es lässt Objekte so aussehen, als würden sie schweben oder von den Oberflächen, auf denen sie ruhen sollten, getrennt sein. Es ist das direkte Ergebnis der Verwendung eines zu großen Tiefen-Bias.

Die Lösung: Slope-Scale Tiefen-Bias. Eine robustere Lösung als ein konstanter Bias besteht darin, den Bias abhängig von der Steilheit der Oberfläche relativ zum Licht zu machen. Steilere Polygone sind anfälliger für Acne und erfordern einen größeren Bias. Flachere Polygone benötigen einen kleineren Bias. Die meisten Grafik-APIs, einschließlich WebGL, bieten Funktionalität, um diese Art von Bias automatisch während des Tiefen-Passes anzuwenden, was generell dem manuellen Bias im Fragment-Shader vorzuziehen ist.

Perspektivische Aliasing (gezackte Kanten)

Das Problem: Die Kanten Ihrer Schatten sehen blockig, gezackt und pixelig aus. Dies ist eine Form des Aliasings. Es geschieht, weil die Auflösung der Shadow Map endlich ist. Ein einzelnes Pixel (oder Texel) in der Shadow Map kann einen großen Bereich auf einer Oberfläche in der endgültigen Szene abdecken, insbesondere bei Oberflächen in der Nähe der Kamera oder solchen, die in einem flachen Winkel betrachtet werden. Diese Auflösungsdiskrepanz verursacht das charakteristische blockige Erscheinungsbild.

Die Lösung: Die Erhöhung der Shadow Map-Auflösung (z. B. von 1024x1024 auf 4096x4096) kann helfen, birgt aber erhebliche Speicher- und Leistungskosten und löst das zugrunde liegende Problem nicht vollständig. Die wirklichen Lösungen liegen in fortgeschritteneren Techniken.

Kapitel 4: Fortgeschrittene Shadow Mapping Techniken

Grundlegendes Shadow Mapping bildet eine Grundlage, aber professionelle Anwendungen verwenden ausgefeiltere Algorithmen, um seine Einschränkungen, insbesondere das Aliasing, zu überwinden.

Percentage-Closer Filtering (PCF)

PCF ist die gebräuchlichste Technik, um Schattenkanten weicher zu machen und Aliasing zu reduzieren. Anstatt nur eine Stichprobe aus der Shadow Map zu nehmen und eine binäre Entscheidung (im Schatten oder nicht im Schatten) zu treffen, nimmt PCF mehrere Stichproben aus dem Bereich um die Zielkoordinate.

Das Konzept: Für jedes Fragment tasten wir die Shadow Map nicht nur einmal, sondern in einem Gittermuster (z. B. 3x3 oder 5x5) um die projizierte Texturkoordinate des Fragments ab. Für jede dieser Stichproben führen wir den Tiefenvergleich durch. Der endgültige Schattenwert ist der Durchschnitt aller dieser Vergleiche. Wenn zum Beispiel 4 von 9 Stichproben im Schatten liegen, ist das Fragment zu 4/9 im Schatten, was zu einer weichen Halbschattenzone (der weichen Kante eines Schattens) führt.

Implementierung: Dies geschieht vollständig im Fragment-Shader. Es beinhaltet eine Schleife, die über einen kleinen Kernel iteriert, die Shadow Map an jedem Offset abtastet und die Ergebnisse akkumuliert. WebGL 2 bietet Hardware-Unterstützung (`texture` mit einem `sampler2DShadow`), die den Vergleich und die Filterung effizienter durchführen kann.

Vorteil: Verbessert die Schattenqualität drastisch, indem harte, aliasing-behaftete Kanten durch weiche, glatte ersetzt werden.

Kosten: Die Leistung sinkt mit der Anzahl der pro Fragment entnommenen Stichproben.

Cascaded Shadow Maps (CSM)

CSM ist die branchenübliche Lösung zum Rendern von Schatten von einer einzelnen gerichteten Lichtquelle (wie der Sonne) über eine sehr große Szene. Sie behebt direkt das Problem des perspektivischen Aliasings.

Das Konzept: Die Kernidee ist, dass Objekte nahe der Kamera eine viel höhere Schattenauflösung benötigen als Objekte weit entfernt. CSM teilt das Sichtfrustum der Kamera in mehrere Abschnitte oder "Kaskaden" entlang seiner Tiefe auf. Für jede Kaskade wird dann eine separate, hochwertige Schattenkarte gerendert. Die der Kamera am nächsten liegende Kaskade deckt einen kleinen Bereich des Weltraums ab und hat somit eine sehr hohe effektive Auflösung. Weiter entfernte Kaskaden decken mit der gleichen Texturgröße progressiv größere Bereiche ab, was akzeptabel ist, da diese Details für den Betrachter weniger sichtbar sind.

Implementierung: Dies ist erheblich komplexer.

1. Im CPU, teilen Sie das Kamera-Frustum in 2-4 Kaskaden auf.
2. Berechnen Sie für jede Kaskade eine eng anliegende orthographische Projektionsmatrix für das Licht, die diesen Ausschnitt des Frustums perfekt umschließt.
3. Führen Sie im Rendering-Loop den Tiefen-Pass mehrmals durch – einmal für jede Kaskade, wobei in eine andere Schattenkarte (oder einen Bereich einer Textur-Atlas) gerendert wird.
4. Im finalen Szenen-Pass-Fragment-Shader ermitteln Sie, zu welcher Kaskade das aktuelle Fragment basierend auf seiner Entfernung von der Kamera gehört.
5. Tasten Sie die entsprechende Schattenkarte der Kaskade ab, um den Schatten zu berechnen.

Vorteil: Bietet konstant hochauflösende Schatten über große Entfernungen, was es perfekt für Außenumgebungen macht.

Variance Shadow Maps (VSM)

VSM ist eine weitere Technik zur Erzeugung weicher Schatten, aber sie verfolgt einen anderen Ansatz als PCF.

Das Konzept: Anstatt nur die Tiefe in der Shadow Map zu speichern, speichert VSM zwei Werte: die Tiefe (das erste Moment) und die Quadrierte Tiefe (das zweite Moment). Diese beiden Werte ermöglichen es uns, die Varianz der Tiefenverteilung zu berechnen. Unter Verwendung eines mathematischen Werkzeugs namens Tschebyscheff-Ungleichung können wir dann die Wahrscheinlichkeit abschätzen, dass ein Fragment im Schatten liegt. Der Hauptvorteil besteht darin, dass eine VSM-Textur mit der standardmäßig hardwarebeschleunigten linearen Filterung und Mipmapping unscharf gemacht werden kann, was für eine Standard-Tiefenkarte mathematisch ungültig ist. Dies ermöglicht sehr große, weiche und glatte Schatten-Halbschattenzonen mit konstanten Leistungskosten.

Nachteil: VSMs Hauptschwäche ist "Light Bleeding" (Lichtdurchscheinen), bei dem Licht durch Objekte scheinen kann, wenn überlappende Okkluder vorhanden sind, da die statistische Annäherung zusammenbrechen kann.

Kapitel 5: Praktische Implementierungstipps und Leistung

Auswahl der Shadow Map Auflösung

Die Auflösung Ihrer Shadow Map ist ein direkter Kompromiss zwischen Qualität und Leistung. Eine größere Textur liefert schärfere Schatten, verbraucht aber mehr Videospeicher und benötigt länger zum Rendern und Abtasten. Gängige Größen sind:

• 1024x1024: Ein guter Ausgangspunkt für viele Anwendungen.
• 2048x2048: Bietet eine spürbare Qualitätsverbesserung für Desktop-Anwendungen.
• 4096x4096: Hohe Qualität, häufig für "Hero Assets" oder in Engines mit robuster Culling verwendet.

Denken Sie daran, dass der Speicherverbrauch quadratisch skaliert; eine 4096x4096 Textur verbraucht 16-mal mehr Speicher als eine 1024x1024.

Optimierung des Licht-Frustums

Um jeden Pixel Ihrer Shadow Map optimal zu nutzen, ist es entscheidend, dass das Projektionsvolumen des Lichts (seine orthographische Box oder sein perspektivisches Frustum) so eng wie möglich an die Szenenelemente angepasst ist, die Schatten benötigen. Für ein gerichtetes Licht bedeutet dies, seine orthographische Projektion so anzupassen, dass sie nur den sichtbaren Teil des Kamera-Frustums umschließt. Jeder verschwendete Platz in der Shadow Map ist verschwendete Auflösung.

WebGL-Erweiterungen und Versionen

WebGL 1 vs. WebGL 2: Obwohl Shadow Mapping in WebGL 1 möglich ist, ist es in WebGL 2 wesentlich einfacher und effizienter. WebGL 1 benötigt die Erweiterung `WEBGL_depth_texture`, um eine Tiefentextur zu erstellen. WebGL 2 verfügt über diese Funktionalität integriert. Darüber hinaus bietet WebGL 2 Zugriff auf Shadow-Sampler (`sampler2DShadow`), die hardwarebeschleunigtes PCF durchführen können und somit einen erheblichen Leistungsschub gegenüber manuellen PCF-Schleifen im Shader bieten.

Fehlerbehebung bei Schatten

Schatten können notorisch schwer zu debuggen sein. Die wichtigste nützliche Technik ist die Visualisierung der Shadow Map. Modifizieren Sie vorübergehend Ihre Anwendung, um die Tiefentextur einer bestimmten Lichtquelle direkt auf einem Quad auf dem Bildschirm darzustellen. Dies ermöglicht es Ihnen, genau zu sehen, was das Licht "sieht". Dies kann sofort Probleme mit den Matrizen, der Frustum-Culling oder dem Rendering von Objekten während des Tiefen-Passes aufdecken.

Schlussfolgerung

Real-Time Shadow Mapping ist ein Eckpfeiler der modernen 3D-Grafik und verwandelt flache, leblose Szenen in glaubwürdige und dynamische Welten. Obwohl das Konzept, aus der Perspektive eines Lichts zu rendern, einfach ist, erfordert das Erreichen von hochwertigen, artefaktfreien Ergebnissen ein tiefes Verständnis der zugrunde liegenden Mechanik, von der Zwei-Pass-Pipeline bis hin zu den Nuancen von Tiefen-Bias und Aliasing.

Indem Sie mit einer grundlegenden Implementierung beginnen, können Sie schrittweise gängige Artefakte wie Shadow Acne und gezackte Kanten beheben. Von dort aus können Sie Ihre Grafiken mit fortgeschrittenen Techniken wie PCF für weiche Schatten oder Cascaded Shadow Maps für großflächige Umgebungen verbessern. Die Reise in das Schatten-Rendering ist ein perfektes Beispiel für die Mischung aus Kunst und Wissenschaft, die Computergrafik so faszinierend macht. Wir ermutigen Sie, mit diesen Techniken zu experimentieren, ihre Grenzen zu erweitern und ein neues Maß an Realismus in Ihre WebGL-Projekte zu bringen.