STP010: 3D-Grafik

Heute geht es viel um Spiele. Denn anscheinend sind diese fast das Einzige, das Xyrill und ttimeless einfällt, wenn es um 3D-Grafik geht.
Allgemeiner dreht sich diese Folge darum, was es alles braucht, um Körper in virtuellen Welten darzustellen.
Der Abschluss der vierteiligen Reihe über Grafik, und was dazu notwendig ist.<h2>Shownotes</h2><ul>
<li>
Vergleich zu 2D-Desktop-Grafik (STP008)
<ul>
<li>Zeichenreihenfolge ist nicht so offensichtlich (Was ist vorne? Was ist hinten?)</li>
<li>höherer Anspruch an Realismus: dynamische Beleuchtung, Texturierung, etc.</li>
<li>Randbemerkung: auch 2D-Spiele werden heute meist in einer 3D-Szene aufgebaut</li>
<li>Grundeinheit für 3D-Modelle: nicht der Pixel, sondern das Polygon (deswegen kommen wir um Fließkommazahlen nicht herum)</li>
</ul>
</li>
<li>
Vorbemerkungen zu den folgenden Schritten:
<ul>
<li>all dies passiert für jedes Einzelbild von vorne (also bei 60Hz 60-mal pro Sekunde)</li>
<li>zur Illustration verlinken wir auf Beispielbilder aus den <a href="github.com/ssloy/tinyrenderer/wiki/Lesson-0:-g… für einen Kurs in 3D-Rendering-Grundlagen</a></li>
</ul>
</li>
<li>
Schritt 1: 3D-Modell mit Polygonen
<ul>
<li>Polygon heißt wörtlich "Vieleck", aber 3D-Modelle bestehen meist nur aus Dreiecken</li>
<li>Polygone mit vier und mehr Ecken können mittels <a href="de.wikipedia.org/wiki/Triangulation_(Fl%C3%A4che)">Triangulation</a> in Dreiecke zerlegt werden</li>
<li><a href="raw.githubusercontent.com/ssloy/tinyrenderer/g… eines 3D-Modells als Gitternetz</a></li>
</ul>
</li>
<li>
Schritt 2: Kamera
<ul>
<li>grundsätzlich ein Paar aus Blickpunkt und Blickrichtung, aber mit einigen weiteren Parametern</li>
<li>mathematische Grundlage: <a href="de.wikipedia.org/wiki/Quaternion">Quat…;
<li><a href="de.wikipedia.org/wiki/Sichtfeld">Sicht…; (Field of View): beim Menschen 130°; bei Videospielen meist weniger, je nachdem, wieviel Platz der Bildschirm im Sichtfeld einnimmt (z.B. 90° am PC, 60° an Konsolen)</li>
</ul>
</li>
<li>
Schritt 3: Ausmalen der Polygone (Rasterisierung)
<ul>
<li>Backface Culling (Rückseiten-Auslese): wir werfen alle Polygone weg, die von uns wegzeigen</li>
<li><a href="raw.githubusercontent.com/ssloy/tinyrenderer/g… mit ausgemalten Polygonen nach Backface Culling</a></li>
<li>Z-Buffer: wenn wir Polygone ausmalen, dann malen wir nur die Pixel aus, bei denen wir nicht schon Polygone gemalt haben, die näher an der Kamera dran sind</li>
<li><a href="raw.githubusercontent.com/ssloy/tinyrenderer/g… mit ausgemalten Polygonen unter Verwendung des Z-Buffers</a></li>
</ul>
</li>
<li>
Schritt 4: Texturen
<ul>
<li>bis jetzt war jedes Polygon einfarbig, jetzt kleben wir Bilder auf (analog zu Modellbausätzen)</li>
<li>in der Praxis ein großes Bild für das ganze Modell</li>
<li>jede Ecke jedes Polygons wird zu einem Punkt in der Textur zugeordnet</li>
<li><a href="raw.githubusercontent.com/ssloy/tinyrenderer/g… mit Polygonen, die mit ihrer Textur ausgemalt sind</a></li>
</ul>
</li>
<li>
Einwurf: Was unterscheidet einen Grafikprozessor (GPU) von einem Hauptprozessor (CPU)?
<ul>
<li>CPU-Kerne führen einzelne Befehle auf einzelnen Daten aus</li>
<li>GPU führt einzelne Befehle auf vielen Daten gleichzeitig aus, z.B. Rasterisierung von 10000 Polygonen gleichzeitig oder Z-Buffer-Prüfung für 10000 Pixel gleichzeitig</li>
<li>dadurch auch für andere massiv parallelisierbare Operationen interessant ("GPGPU", General Purpose GPU), z.B. wissenschaftliche Simulationen, maschinelles Lernen, Passwortknacken</li>
</ul>
</li>
<li>
Schritt 5: Shader
<ul>
<li>bis jetzt haben wir die Fixed Function Pipeline beschrieben, eine im GPU-Treiber fest vorgegebene Kette von Rendering-Schritten</li>
<li>neuere GPU (seit den frühen 2000ern) erlauben das Einbetten von eigenen Programmen (Shadern) in die Pipeline</li>
<li>Vertex Shader: wird einmal pro Vertex (Ecke eines Polygons) aufgerufen, um die 2D-Position auf dem Bildschirm zu berechnen (ansonsten normale Berechnung anhand der konfigurierten Kameraposition)</li>
<li>Fragment Shader: wird einmal pro Pixel aufgerufen, um gegebenenfalls die Farbe des Pixels zu modifizieren</li>
<li><a href="raw.githubusercontent.com/ssloy/tinyrenderer/g… eines Fragment-Shaders, der eine Farbtextur auf 6 feste Farbstufen reduziert</a></li>
</ul>
</li>
<li>
Schritt 6: Beleuchtung
<ul>
<li>bei traditionallen 2D-Spielen mit Sprites war Beleuchtung meist global (z.B. jedes Objekt hat 2 Sprites, einmal für dunkle und einmal für helle Szenen)</li>
<li>dynamische Beleuchtung: heute meist als Teil des Fragment Shaders</li>
<li>Beispiel: <a href="raw.githubusercontent.com/ssloy/tinyrenderer/g… Approximation einer natürlichen Beleuchtung</a>
<ul>
<li>
<ol>
<li>Anteil: ambiente Beleuchtung (überall gleich stark, Grundausleuchtung wie in einem Fernsehstudio)</li>
</ol>
</li>
<li>
<ol start="2">
<li>Anteil: diffuse Beleuchtung (abhängig davon, wie sehr die beleuchtete Fläche zur Lichtquelle hingewendet ist)</li>
</ol>
</li>
<li>
<ol start="3">
<li>Anteil: spekulare Beleuchtung (Glänzen; stark überbetont auf Flächen, die fast exakt zur Lichtquelle hingewendet sind)</li>
</ol>
</li>
</ul>
</li>
</ul>
</li>
<li>
es gibt noch so viel mehr: Kantenglättung (Antialiasing), lineares und anisotropisches Filtern, Normal Mapping, Raytracing
</li>
</ul>

Kapitelklicken springt direkt hin

Shownotes