Notizen zu Texture Mapping, Environment Mapping und Bump Mapping

Texture Mapping

• Ziele (Objectives)

  • Einführung in Mapping-Methoden
  • Textur Mapping (Texture Mapping)
  • Environment Mapping
  • Bump Mapping
  • Grundlegende Strategien berücksichtigen
  • Forward vs backward mapping (Vorwärts- vs Rückwärts-Abbildung)
  • Punkt-Sampling vs Area Averaging

• Die Grenzen der Geometrischen Modellierung

  • GPUs rendern zwar über 10 Millionen Polygone pro Sekunde, das reicht aber nicht für viele Phänomene
  • Beispiele: Wolken, Gras, Gelände, Haut

• Modellierung einer Orange (Beispiel)

  • Ausgangspunkt: eine orangefarbene Kugel
  • Kugel allein ist zu einfach
  • Ersetzen durch komplexere Formen, um Oberfläche abzubilden
  • Reines Polygonmodellieren der Dimples ist zu teuer

• Textur Mapping als Lösung (Texture Mapping)

  • Foto einer Orange auf ein einfaches geometrisches Modell projizieren
  • Textur Mapping kann dennoch glatte Oberflächen erzeugen; feine Oberflächenmerkmale fehlen
  • Um lokalere Formmerkmale zu erreichen, braucht es zusätzlich andere Verfahren (z. B. Bump Mapping)

• Drei Typen des Texture Mapping

  • (Image) Texture Mapping: Bilder verwenden, um Flächen von Polygonen auszufüllen
  • Environment (Reflection) Mapping: Umgebung als Textur verwenden, um spiegelnde Effekte zu simulieren
  • Bump Mapping: Normale Vektoren während des Renderings modifizieren, um Oberflächenstrukturen zu simulieren

• Textur Mapping – Überblicksbild

  • geometrisches Modell vs. texturierte Geometrie
  • texture mapped

• Environment Mapping

  • (Bildschirm-/Umgebungsabbildung) Mapping
  • Simulation hochreflektierender Oberflächen ohne Strahlentracing
  • Frühere Verwendung in Filmen (z. B. The Abyss, Terminator 2) und in Videospielen
  • Es ist eine Form des Textur-Mappings

• Environment Mapping – Grundlagen

  • Abbilden der Umgebung → Reflexionen auf Oberflächen
  • Verschiedene Ansätze: Sphere Maps, Cube Maps, Cylinder Maps

• Reflection (Umgebung reflektieren)

  • Grundnotationen: Normalenvektor N, Blickrichtung V, reflektierter Vektor R
  • Formel (Reflexion): \mathbf{R} = 2(\mathbf{N} \cdot \mathbf{V})\mathbf{N} - \mathbf{V}

• Mapping auf eine Kugel (Sphere Mapping)

  • Ursprüngliche Umgebungskartierung mit Längen- und Breitengraden
  • OpenGL unterstützt Sphere Mapping, erfordert kreisförmige Textur (wie Fotos mit Fischaugen-Objektiv)

• Hemisphere Map als Textur

  • Falls alle Objekte auf eine Hemisphäre abgebildet werden, bleibt unklar, ob sich ein Objekt wirklich auf der Kugel befindet
  • Lösung: Karteninhalt auf Kugel/Textur legen und dann auf Objekten verwenden
  • Alternativen: Cube Maps, Cylinder Maps

• Cube Map

  • sechs Seiten eines Würfels als Texture Maps
  • In OpenGL/WebGL: cube map Texture-Sampler verwenden (textureCube)
  • Koordinaten: dreidimensionale Koordinaten, üblicherweise durch die Vertex-Position gegeben
  • Beispielbefehl: vec4 texColor = textureCube(mycube, texcoord);

• Indexing in die Cube Map

  • Objekt liegt im Ursprung
  • Bestimme die zu benutzende Würfelseite über die größten Betrag der Koordinaten
  • Restliche Koordinaten liefern die Texture-Koordinaten auf dieser Seite
  • Formel zur Rekonstruktion (Beispiel): \mathbf{R} = 2(\mathbf{N} \cdot \mathbf{V})\mathbf{N} - \mathbf{V} \quad (R \text{ als Richtung})

• OpenGL/WebGL-Implementierung

  • WebGL unterstützt nur Cube Maps; Desktop OpenGL unterstützt auch Sphere Maps
  • Zuerst eine Abbildung erstellen, Bilder aus einer Kamera verwenden, dann in WebGL texturieren
  • Textur auf Objekt anwenden

• Cube Maps – Implementierung in WebGL

  • Definiere sechs 2D-Textur Maps, die die Seiten eines Würfels repräsentieren
  • In WebGL: vec4 texColor = textureCube(mycube, texcoord);
  • Texturkoordinaten müssen 3D sein; üblicherweise durch die Vertexposition gegeben

• Environment Maps mit Shaders

  • Umgebungskarten werden oft in Weltkoordinaten berechnet, die sich durch Modeling-Matrix unterscheiden
  • Modeling-Matrix ggf. als Uniform an das Shader-Programm übergeben
  • Falls nötig: Reflexions-Map oder Brechungs-Map für Effekte wie Wasser

• Probleme/Limitierungen

  • Annahme: Umgebung ist sehr weit entfernt (ähnlich wie Unterschied zwischen Nah-/ Fernlicht)
  • Objekt kann nicht konkav sein (kein Selbstreflexionen möglich)
  • Keine Spiegelungen zwischen Objekten
  • Für jedes Objekt braucht man eine eigene Reflexionskarte
  • Falls der Betrachter sich bewegt, braucht man eine neue Karte

• Formung der Cube Map

  • Verwende sechs Kameras, jeweils mit einem 90° Blickwinkel
  • Beispielbild aus Maya (Szenenaufbau)

• WebGL-Doing-it-Beispiel

  • Beispielcode-Muster: gl.textureMap2D( gl.TEXTURECUBEMAPPOSITIVEX, level, rows, columns, border, gl.RGBA, gl.UNSIGNED_BYTE, image1 )
  • Gleiches Prinzip für die anderen fünf Seiten
  • Eine Texture-Objekt-Gruppe aus sechs Bildern erstellen

• Cube Maps – Beispiel: Raum voller Farben

  • Rot, Grün, Blau, Cyan, Magenta, Gelb als Texel-Farben pro Wand
  • Jede Raumwand könnte als Texel (eine einzelne Textur) codiert sein
  • Beispielwerte: Rot, Grün, Blau, Cyan, Magenta, Gelb als 1x1 Texturen

• Cube Map – Textur-Objekt-Erzeugung und Setup

  • Texture-Objekt erstellen: cubeMap = gl.createTexture(); gl.bindTexture(gl.TEXTURECUBEMAP, cubeMap);
  • Füllen der sechs Seiten mit Farbdaten (1x1 Texturen) mittels texImage2D
  • Auswahl der aktiven Textur und Verknüpfung mit Shader-Uniform

• Vertex Shader (Beispiel)

  • Berechnung von R (Reflexionsrichtung) im Vertex-Shader: \mathbf{R} = \text{reflect}(\text{eyePos}.xyz, \text{N}.xyz)
  • Weitergabe an den Fragment-Shader über eine Varying-Variable

• Fragment Shader (Beispiel)

  • Abfrage aus der Cube-Map: \text{texColor} = \text{textureCube}(\textMap, R); \; \; \; \text{gl_FragColor} = \textColor;

• Sphere Mapping (Fortführung)

  • Originale Technik der Blinn und Newell basierend auf Längengrad-/Breitengrad-Parametrisierung
  • OpenGL/OpenGL ES unterstützen Sphere Mapping; benötigt eine kreisförmige Textur (kreisförmige Karte)

• Bump Mapping

  • Ziel: Realistische Oberflächenunterschiede durch Veränderung der Normale statt geometrischer Erhöhung
  • Beispiel: Orange mit Texturabbildung der Orange, aber Licht- und Blickrichtung führen zu falscher Orientierung der Dimples
  • Besser: Normale perturbieren und Farbwert pro Fragment neu berechnen

• Mathematische Grundlagen des Bump Mapping (Blinn)

  • Parametrisierung der Fläche: p(u,v) = \begin{bmatrix} x(u,v) \ y(u,v) \ z(u,v) \end{bmatrix}^T
  • Tangentenvektoren: pu = \begin{bmatrix} \partial x/\partial u \ \partial y/\partial u \ \partial z/\partial u \end{bmatrix}^T,\, pv = \begin{bmatrix} \partial x/\partial v \ \partial y/\partial v \ \partial z/\partial v \end{bmatrix}^T
  • Normalenvektor: \mathbf{n} = \frac{pu \times pv}{|pu \times pv|}

• Displacement-Funktion (Bump-Displacement)

  • Die Bump-/Hoch-Delle wird durch eine Funktion d(u,v) beschrieben
  • Pseudo-Position: p' = p + d(u,v)\, \mathbf{n}, \; d(u,v) \ll 1

• Perturbierte Normalen

  • Kleinere Änderungen der Tangentenebenen führen zu einer verschobenen Normale
  • Formeln (vereinfachte/für Shader übliche Darstellung):
  • p'u = pu + \frac{\partial d}{\partial u} \mathbf{n} + d(u,v) \mathbf{n}_u
  • p'v = pv + \frac{\partial d}{\partial v} \mathbf{n} + d(u,v) \mathbf{n}_v
  • \mathbf{n}' = p'u \times p'v \approx \mathbf{n} + \frac{\partial d}{\partial u} (\mathbf{n} \times \mathbf{p}v) + \frac{\partial d}{\partial v} (\mathbf{p}u \times \mathbf{n})

• Normalen-Approximation

  • Die Vektoren liegen in der Tangentialebene, daher wird die Normale in der Tangentialebene verschoben
  • Vorberechnete Arrays nutzen und die Normalen während des Shadings perturbieren:
  • \mathbf{n}' \approx \mathbf{n} + \frac{\partial d}{\partial u} (\mathbf{n} \times \mathbf{p}v) + \frac{\partial d}{\partial v} (\mathbf{p}u \times \mathbf{n})

• Bildverarbeitung für Normal Maps

  • Ausgangsfunktion wird sampelt und als Textur gespeichert: d(u,v) wird als Normalmap genutzt
  • Ableitungen von d werden als Finite-Differenzen approximiert:
  • \frac{\partial d}{\partial u} \approx d{ij} - d{i-1,j}, \quad \frac{\partial d}{\partial v} \approx d{ij} - d{i,j-1}

• Wie man das umsetzt

  • Ziel: Perturbation auf alle Punkte der Oberfläche anwenden
  • Vertex-Lighting reicht oft nicht aus; muss auf Fragment-Ebene erfolgen
  • Fixed-Function-Pipeline genügt nicht; benötigt Fragment-Programmierung (Fragment Shader)

• Ausblick: Kurven und Oberflächen (nächster Abschnitt)

• Weiterführende Hinweise

  • Alle Beschreibungen stammen aus den Folien/Transkripten der Vorlesung zur Computergraphik an der Universität Rostock

Environment and Bump Mapping

• Ziele

  • Reflection (Environment) Maps
  • Cube Maps
  • Spherical Maps
  • Bump Maps

• Environment Mapping (Umgebungsabbildung)

  • Eine Methode, um das Aussehen hochreflektierender Oberflächen ohne Ray Tracing zu erzeugen
  • Anwendungen in Filmen (The Abyss, Terminator 2) und in Videospielen
  • Es ist eine Form der Textur-Mapping

• Environment Mapping – Grundlagen

  • Reflektierte Umgebung auf Oberflächen abbilden
  • Unterschiedliche Ansätze: Sphere Maps, Cube Maps, Cylinder Maps

• Abbilden der Umgebung

  • Normalen N, Blickrichtung V, reflektierte Richtung R
  • Box-/Kugel- bzw. Cylinder-Methoden

• Mapping auf eine Kugel (Sphere Mapping)

  • OpenGL unterstützt Sphere Mapping; nutzt eine kreisförmige Textur (Fischaugen-Charakter)

• Hemisphere Map als Textur

  • Falls man Object-to-Sphere Mapping benutzt, muss man aufpassen, ob es wirklich der Reflexionsumgebung entspricht
  • Cube Maps, Cylinder Maps als Alternativen

• Cube Map

  • sechs Seiten eines Würfels als Texturen
  • Koordinaten: 3D-Texturkoordinaten, meist durch die Objektposition gegeben
  • Wenn N die Oberflächen-Normalen sind und V der Blickrichtungseinheitsvektor, dann wird die Richtung R genutzt, um die Cube-Map abzurufen

• Indexing in Cube Maps

  • Konstruktion der Richtung und Auswahl der passenden Würfelseite
  • Beispiel einer Formel: R = 2(\mathbf{N} \cdot \mathbf{V}) \mathbf{N} - \mathbf{V}

• OpenGL/OpenGL ES Implementierung

  • WebGL unterstützt Cube Maps; Desktop OpenGL unterstützt zusätzlich Sphere Maps
  • Zunächst Cube Map aus sechs Bildern erzeugen und an Shader-Programme übergeben
  • Beispiel: vec4 texColor = textureCube(mycube, texcoord);

• Cube Maps – Praktische Implementierung

  • sechs 2D-Textur-Maps definieren, die jeweilige Seite des Würfels repräsentieren
  • TexCoord müssen 3D sein; oft wird der Vertex-Positionstexturkoordinaten verwendet

• Environment Maps mit Shaders

  • Environment Maps werden üblicherweise in Weltkoordinaten berechnet, daher ggf. Modeling-Matrix berücksichtigen
  • Modeling-Matrix als Uniform an Shader weitergeben
  • Reflexionsmap oder Brechungsmap (Refraction) für Effekte wie Wasser möglich

• Probleme/Limitierungen

  • Umgebung wird als weit entfernt angenommen (kein Nahsicht-Reflexion)
  • Objekte dürfen nicht konvex/selbstreflektierend sein; keine Reflexionen zwischen Objekten ohne separate Karten
  • Jede Objekteinheit braucht eine eigene Reflexionskarte; Bewegung des Betrachters erfordert ggf. neue Map

• Formung der Cube Map

  • Sechs Kameras, je 90° Blickfeld
  • Praxisbeispiel: Maya-Ansicht der Szene

• WebGL-Beispiel-Implementierung

  • WebGL-Codebeispiel: Laden der sechs Faces in TEXTURECUBEMAPPOSITIVEX/Y/Z etc.
  • Nutzen von 3D-Texturkoordinaten, typischerweise aus den Vertex-Positionskoordinaten abgeleitet

• Beispiel: Reflektierender Raum mit farbigen Wänden

  • Sechs Farben für sechs Würfelseiten als Texelwerte
  • Farben: Rot, Grün, Blau, Cyan, Magenta, Gelb
  • Jede Wand repräsentiert ein Texel (1x1 Textur)

• Cube Map – Shader-Beispiele

  • Vertex-Shader: Berechnung von R durch
    \mathbf{R} = \text{reflect}(\text{eyePos}, \text{N})
  • Fragment-Shader: Abfrage aus Cube-Map:
    \text{texColor} = \text{textureCube}(\textMap, R)

• Sphere Mapping (Zusatz)

  • Ursprüngliche Umgebungsabbildung mit Längengrad-/Breitengrad-Parametrisierung
  • Sphere Maps benötigen eine kreisförmige Textur, vergleichbar mit Fischaugen-Bild

• Bump Mapping – Details

  • Ziel: realistische Oberflächenstrukturen durch Normalperturbation
  • Grundlagen der Geometrie: Tangentenebene, Normalenberechnung

• Bump Mapping – wichtige Formeln

  • Tangentialebene: p(u,v) = [x(u,v), y(u,v), z(u,v)]^T
  • Tangentenvektoren: pu = [\partial x/\partial u, \partial y/\partial u, \partial z/\partial u]^T, \quad pv = [\partial x/\partial v, \partial y/\partial v, \partial z/\partial v]^T
  • Normalenvektor: \mathbf{n} = \frac{pu \times pv}{|pu \times pv|}
  • Displacement-Funktion: p' = p + d(u,v) \mathbf{n}, \quad d(u,v) \ll 1
  • Perturbierte Normalen
  • p'u = pu + \frac{\partial d}{\partial u} \mathbf{n} + d(u,v) \mathbf{n}_u
  • p'v = pv + \frac{\partial d}{\partial v} \mathbf{n} + d(u,v) \mathbf{n}_v
  • \mathbf{n}' = p'u \times p'v \approx \mathbf{n} + \frac{\partial d}{\partial u} (\mathbf{n} \times \mathbf{p}v) + \frac{\partial d}{\partial v} (\mathbf{p}u \times \mathbf{n})
  • Ableitung/Herleitung: Ableitungen liegen in der Tangentialebene; Normalen werden angepasst

• Bildverarbeitung für Normalmaps

  • Textur-Datei enthält d(u,v) als Normalmap
  • Ableitungen mit Finite-Differenzen (z. B. zentrale Differenzen):
  • \frac{\partial d}{\partial u} \approx d{ij} - d{i-1,j}, \quad \frac{\partial d}{\partial v} \approx d{ij} - d{i,j-1}

• Praktische Umsetzung

  • Anwenden der Perturbation auf alle Fragmenten nötig; Vertex-Lighting reicht nicht aus
  • Fragment-Programm (Fragment Shader) erforderlich, um per-Pixel-Normalperturbation zu berechnen

• Ausblick

  • Weiterführende Themen: Curves and Surfaces (nächstes Kapitel)

• Kurze Zusammenfassung der Kernpunkte

  • Texture Mapping nutzt Bilder, Environment Mapping nutzt Umgebungsdaten, Bump Mapping perturbiert Normale
  • Cube Maps ermöglichen realistische Spiegelungen ohne Ray Tracing
  • Normal Maps ermöglichen feine Oberflächenstrukturen ohne mehr Polygonen
  • Wichtige Konzepte: Koordinatensysteme, Forward vs backward mapping, Aliasing vs Area Averaging, Fragment-Shader-basierte Implementierung