Übungen: Rendering-Pipeline & Interpolation

Übungsaufgaben zu Kapitel 8: Koordinatenräume (coordinate spaces) und Viewport-Transformation (viewport transformation), lineare und baryzentrische Farbinterpolation (linear / barycentric color interpolation) im Dreieck, Tiefentest (depth test) mit z-Buffer sowie der Painter's Algorithm. Rechne jede Aufgabe erst selbst, bevor du die Lösung aufklappst. Alle Farbwerte sind in normierten RGB-Kanälen $[0,1]$ angegeben.

Beginner

Aufgabe 1 (Beginner) - Koordinatenräume ordnen

Bringe die folgenden Koordinatenräume (coordinate spaces) in die korrekte Reihenfolge, die ein Vertex von den Rohdaten bis zur normierten Darstellung durchläuft, und benenne jeweils die Matrix bzw. den Schritt, der den Übergang bewirkt:

Camera Space, NDC, World Space, Clipping Space, Local Space.

Lösung anzeigen

Korrekte Kette:

\text{Local} \xrightarrow{\text{ModelMatrix}} \text{World} \xrightarrow{\text{ViewMatrix}} \text{Camera} \xrightarrow{\text{ProjectionMatrix}} \text{Clipping} \xrightarrow{\text{Homogenisierung}} \text{NDC}

Von -> Nach	Übergang per
Local Space -> World Space	ModelMatrix (model matrix)
World Space -> Camera Space	ViewMatrix (view matrix)
Camera Space -> Clipping Space	ProjectionMatrix (projection matrix)
Clipping Space -> NDC	Homogenisierung (perspective divide)

Merke:

Bis zum NDC ( $[-1,1]^3$ ) ist alles auflösungsunabhängig (resolution-independent). Erst die anschließende Viewport-Transformation macht die Ausgabe geräteabhängig.
Local -> Clipping Space werden selbst im Vertex Shader berechnet; ab der Homogenisierung/NDC läuft es automatisch auf der GPU (die Homogenisierung kann aber auch manuell im Vertex Shader erfolgen).

Typischer Fehler: Die Kamerablickrichtung falsch angeben. Im Camera Space (view space) sitzt die Kamera im Ursprung und blickt entlang der negativen z-Achse.

Siehe Kapitel 8: Rendering-Pipeline.

Aufgabe 2 (Beginner) - Lineare Farbinterpolation bei $t = 1/4$

Entlang einer Dreieckskante wird die Farbe linear interpoliert (linear interpolation). Am Startpunkt gilt $F(0) = (1, 0, 0)$ (rot), am Endpunkt $F(1) = (0, 0, 1)$ (blau). Berechne die Farbe $F\!\left(\tfrac{1}{4}\right)$ .

Lösung anzeigen

Formel der linearen Farbinterpolation:

F(t) = (1 - t)\cdot F(0) + t\cdot F(1)

Einsetzen von $t = \tfrac{1}{4}$ , also $(1-t) = \tfrac{3}{4}$ :

F\!\left(\tfrac{1}{4}\right) = \tfrac{3}{4}\begin{pmatrix} 1 \\ 0 \\ 0 \end{pmatrix} + \tfrac{1}{4}\begin{pmatrix} 0 \\ 0 \\ 1 \end{pmatrix} = \begin{pmatrix} 3/4 \\ 0 \\ 1/4 \end{pmatrix}

Ergebnis: $(0{,}75,\ 0,\ 0{,}25)$ , eine überwiegend rötliche Mischfarbe mit leichtem Blauanteil. Kontrolle: Bei $t=0$ käme $F(0)$ heraus, bei $t=1$ käme $F(1)$ heraus.

Typischer Fehler: Interpolationsvorzeichen vertauschen. Der Gewichtungsfaktor von $F(0)$ ist $(1-t)$ , nicht $t$ . Wer $t\cdot F(0) + (1-t)\cdot F(1)$ rechnet, erhält fälschlich $(1/4, 0, 3/4)$ .

Siehe Kapitel 8: Rendering-Pipeline.

Aufgabe 3 (Beginner) - Fragment oder Pixel?

Beantworte kurz: Was ist der Unterschied zwischen einem Fragment (fragment) und einem Pixel (pixel)? Warum wird nicht jedes Fragment zu einem Pixel?

Lösung anzeigen

Ein Pixel ist ein Bildschirmelement (das finale Bildpunkt-Ergebnis).
Ein Fragment ist die Vorstufe eines Pixels, erzeugt von der Rasterisierung (rasterization).

Beziehung:

Mehrere Fragmente können zu einem Pixel beitragen (z.B. bei Transparenz).
Nicht jedes Fragment wird zu einem Pixel: Der Tiefentest (z-Buffer) verwirft verdeckte Fragmente, bevor sie das Bild beeinflussen.

Tipp: Diese Unterscheidung ist prüfungsrelevant. Der Fragment Shader (fragment shader) berechnet die Farbe pro Fragment, nicht direkt pro Pixel.

Siehe Kapitel 8: Rendering-Pipeline.

Fortgeschritten

Aufgabe 4 (Fortgeschritten) - Viewport-Transformation

Ein Punkt liegt im Normalized Device Space (NDC) bei $p = (0{,}5,\ -0{,}5,\ 0)$ . Die Bildschirmauflösung beträgt $w = 800$ (Breite) und $h = 600$ (Höhe). Berechne den zugehörigen Bildpunkt $p' = (p'_x, p'_y, p'_z)$ im Screen Space.

Lösung anzeigen

Formeln der Viewport-Transformation (viewport transformation):

p'_x = \tfrac{1}{2}\,(p_x + 1)\cdot w,\qquad p'_y = \tfrac{1}{2}\,(p_y + 1)\cdot h,\qquad p'_z = \tfrac{1}{2}\,(p_z + 1)

Einsetzen:

p'_x = \tfrac{1}{2}\,(0{,}5 + 1)\cdot 800 = \tfrac{1}{2}\cdot 1{,}5 \cdot 800 = 600

p'_y = \tfrac{1}{2}\,(-0{,}5 + 1)\cdot 600 = \tfrac{1}{2}\cdot 0{,}5 \cdot 600 = 150

p'_z = \tfrac{1}{2}\,(0 + 1) = 0{,}5

Ergebnis: $p' = (600,\ 150,\ 0{,}5)$ .

Tipp: Der Tiefenwert $z$ wird von $[-1,1]$ auf $[0,1]$ abgebildet und bleibt auflösungsunabhängig; nur $x$ und $y$ hängen von $w$ und $h$ ab. Genau deshalb ist erst die Viewport-Transformation geräteabhängig.

Hinweis: Die Folie nennt zusätzlich Pixelmittelpunkte wie $(0{,}5, 0{,}5)$ unten links und $(w-0{,}5, h-0{,}5)$ oben rechts. Die reine Skalierungsformel oben liefert an den NDC-Rändern exakt $0$ bzw. $w$ (nicht $0{,}5$ bzw. $w-0{,}5$ ). Für Klausuren genügt in der Regel die Grundformel; die Mittelpunkt-Angaben beschreiben die diskreten Rasterzentren.

Siehe Kapitel 8: Rendering-Pipeline.

Aufgabe 5 (Fortgeschritten) - Baryzentrische Farbinterpolation im Dreieck

Ein Dreieck hat die folgenden Vertices mit zugeordneten Vertex-Farben:

Vertex	Position $(x, y)$	Farbe (RGB)
$V_1$	$(0, 0)$	$(1, 0, 0)$ rot
$V_2$	$(4, 0)$	$(0, 1, 0)$ grün
$V_3$	$(0, 4)$	$(0, 0, 1)$ blau

Bestimme die interpolierte Farbe im inneren Punkt $P = (1, 2)$ . Berechne dazu zuerst die baryzentrischen Gewichte (barycentric weights) $\lambda_1, \lambda_2, \lambda_3$ und prüfe, dass sie sich zu $1$ summieren.

Lösung anzeigen

Schritt 1: Baryzentrische Gewichte. Da $V_1$ im Ursprung liegt und $V_2, V_3$ auf den Achsen bei $4$ liegen, gilt $P = \lambda_2 V_2 + \lambda_3 V_3 = (4\lambda_2,\ 4\lambda_3)$ . Aus $P = (1, 2)$ :

\lambda_2 = \frac{x}{4} = \frac{1}{4},\qquad \lambda_3 = \frac{y}{4} = \frac{2}{4} = \frac{1}{2},\qquad \lambda_1 = 1 - \lambda_2 - \lambda_3 = 1 - \tfrac{1}{4} - \tfrac{1}{2} = \tfrac{1}{4}

Kontrolle der Summe: $\lambda_1 + \lambda_2 + \lambda_3 = \tfrac{1}{4} + \tfrac{1}{4} + \tfrac{1}{2} = 1$ . Alle Gewichte liegen in $[0,1]$ , also liegt $P$ tatsächlich im Dreieck.

Schritt 2: Farbe interpolieren. Die Farbe ist die gewichtete Summe der Vertex-Farben:

F(P) = \lambda_1 \begin{pmatrix} 1 \\ 0 \\ 0 \end{pmatrix} + \lambda_2 \begin{pmatrix} 0 \\ 1 \\ 0 \end{pmatrix} + \lambda_3 \begin{pmatrix} 0 \\ 0 \\ 1 \end{pmatrix} = \begin{pmatrix} \lambda_1 \\ \lambda_2 \\ \lambda_3 \end{pmatrix} = \begin{pmatrix} 1/4 \\ 1/4 \\ 1/2 \end{pmatrix}

Ergebnis: $F(P) = (0{,}25,\ 0{,}25,\ 0{,}5)$ , ein blaustichiges Violett (blau dominiert, weil $P$ näher an $V_3$ liegt).

Tipp: Weil hier jede Vertex-Farbe genau ein reiner RGB-Kanal ist, entsprechen die Farbkanäle direkt den Gewichten. Das ist ein guter Selbstcheck: Die drei Kanäle müssen sich ebenfalls zu $1$ summieren.

Typischer Fehler: Gewichte verwenden, die sich nicht zu $1$ summieren. Immer $\lambda_1 = 1 - \lambda_2 - \lambda_3$ setzen und gegenprüfen.

Siehe Kapitel 8: Rendering-Pipeline.

Aufgabe 6 (Fortgeschritten) - z-Buffer mit GL_LESS

Der Tiefentest ist mit glEnable(GL_DEPTH_TEST) aktiviert und glDepthFunc(GL_LESS) gesetzt. Der z-Buffer ist an einer bestimmten Pixelzelle bereits mit dem Tiefenwert $5$ belegt. Nacheinander treffen an dieser Zelle Fragmente mit den Tiefenwerten $7$ , dann $3$ , dann $4$ ein. Welchen Wert enthält der z-Buffer am Ende, und welche Farbe ist sichtbar?

Lösung anzeigen

Regel bei GL_LESS: Ein Fragment wird nur übernommen (Buffer aktualisiert, Farbe geschrieben), wenn sein neuer Tiefenwert kleiner ist als der gespeicherte (näher an der Kamera).

Startwert im Buffer: $5$ .

Fragment $z = 7$ : $7 < 5$ ? Nein -> verworfen. Buffer bleibt $5$ .
Fragment $z = 3$ : $3 < 5$ ? Ja -> übernommen. Buffer wird $3$ , dessen Farbe ist jetzt sichtbar.
Fragment $z = 4$ : $4 < 3$ ? Nein -> verworfen. Buffer bleibt $3$ .

Endstand: z-Buffer $= 3$ ; sichtbar ist die Farbe des Fragments mit $z = 3$ (das kameranächste).

Typischer Fehler: z-Vergleich falsch herum. Standardmäßig (GL_LESS) gewinnt der kleinere, nähere z-Wert. Der z-Buffer löst die Sichtbarkeit korrekt und ohne globales Sortieren, unabhängig von der Ankunftsreihenfolge der Fragmente.

Siehe Kapitel 8: Rendering-Pipeline.

Anspruchsvoll

Aufgabe 7 (Anspruchsvoll) - Baryzentrische Interpolation mit gegebenen Gewichten

Für einen Fragmentpunkt im Dreieck sind die baryzentrischen Gewichte $\lambda_1 = 0{,}2$ , $\lambda_2 = 0{,}3$ , $\lambda_3 = 0{,}5$ bereits bekannt. Die Vertex-Farben sind:

Vertex	Farbe (RGB)
$V_1$	$(0{,}8,\ 0{,}4,\ 0{,}0)$
$V_2$	$(0{,}0,\ 0{,}6,\ 0{,}2)$
$V_3$	$(0{,}4,\ 0{,}4,\ 1{,}0)$

Berechne die interpolierte RGB-Farbe am Fragmentpunkt.

Lösung anzeigen

Zuerst prüfen: $\lambda_1 + \lambda_2 + \lambda_3 = 0{,}2 + 0{,}3 + 0{,}5 = 1$ . Gültig.

Die Interpolation erfolgt kanalweise: $C = \lambda_1 C_1 + \lambda_2 C_2 + \lambda_3 C_3$ .

Rot:

R = 0{,}2\cdot 0{,}8 + 0{,}3\cdot 0{,}0 + 0{,}5\cdot 0{,}4 = 0{,}16 + 0 + 0{,}20 = 0{,}36

Grün:

G = 0{,}2\cdot 0{,}4 + 0{,}3\cdot 0{,}6 + 0{,}5\cdot 0{,}4 = 0{,}08 + 0{,}18 + 0{,}20 = 0{,}46

Blau:

B = 0{,}2\cdot 0{,}0 + 0{,}3\cdot 0{,}2 + 0{,}5\cdot 1{,}0 = 0 + 0{,}06 + 0{,}50 = 0{,}56

Ergebnis: $C = (0{,}36,\ 0{,}46,\ 0{,}56)$ .

Tipp: Jeder interpolierte Kanal muss zwischen dem kleinsten und größten Vertex-Wert dieses Kanals liegen (Konvexkombination). Beispiel Blau: Alle Ergebniskanäle bleiben im Intervall $[0,1]$ , hier liegt $B = 0{,}56$ zwischen $0{,}0$ und $1{,}0$ . So lassen sich Rechenfehler schnell entdecken.

Typischer Fehler: Die interpolierte Farbe am Ende zusätzlich durch die Summe der Gewichte teilen. Das ist nur nötig, wenn die Gewichte nicht auf $1$ normiert sind; hier summieren sie bereits zu $1$ .

Siehe Kapitel 8: Rendering-Pipeline.

Aufgabe 8 (Anspruchsvoll) - Grenze des Painter's Algorithm

Beim Painter's Algorithm (painter's algorithm / Maleralgorithmus) werden die Polygone in einer bestimmten Reihenfolge gezeichnet, spätere überdecken frühere. Nenne zwei konkrete Situationen, in denen dieses Verfahren ein falsches Bild liefert, und erkläre, warum der z-Buffer sie korrekt löst.

Lösung anzeigen

Situation 1: Ungünstige Renderreihenfolge. Wird ein weit entferntes Polygon zufällig nach einem nahen gezeichnet, überdeckt es dieses fälschlich. Die Darstellung hängt allein von der Reihenfolge der Renderbefehle ab, nicht vom tatsächlichen Abstand zur Kamera.

Situation 2: Sich schneidende Polygone. Zwei Flächen, die sich gegenseitig durchdringen, lassen sich mit einer einzigen Zeichenreihenfolge grundsätzlich nicht korrekt darstellen, weil kein Polygon durchgehend vor dem anderen liegt.

Warum der z-Buffer korrekt löst: Der z-Buffer arbeitet pro Fragment. Für jede Pixelzelle wird der Tiefenwert gespeichert, und ein Fragment gewinnt nur, wenn sein z-Wert kleiner (näher) ist. Dadurch entscheidet der Abstand jedes einzelnen Pixels zur Kamera, nicht die Reihenfolge der Objekte. So entsteht die korrekte Durchdringung auch bei sich schneidenden Polygonen, ganz ohne globales Sortieren.

Tipp: Der Painter's Algorithm greift immer dann, wenn der Tiefentest nicht aktiviert ist (glEnable(GL_DEPTH_TEST) vergessen). Ziel des z-Buffers ist gerade, eine explizite globale Sortierung der Fragmente zu vermeiden.

Siehe Kapitel 8: Rendering-Pipeline.

Klausur-Niveau

Aufgabe 9 (Klausur-Niveau) - Multiple Choice, gemischt

Genau eine Antwort pro Teilfrage ist korrekt.

(a) Welche Shaderstufen sind Pflicht?

Vertex Shader und Geometry Shader
Vertex Shader und Fragment Shader
Tesselation Shader und Fragment Shader
Alle vier Stufen

(b) Bis zu welchem Raum ist die Darstellung auflösungsunabhängig?

Bis World Space
Bis Camera Space
Bis NDC (Einheitswürfel)
Bis Screen Space

(c) Was bewirkt glDepthFunc(GL_LESS)?

Das Fragment mit dem größeren z-Wert gewinnt.
Das Fragment mit dem kleineren (näheren) z-Wert gewinnt.
Der Tiefentest wird deaktiviert.
Alle Fragmente werden immer gezeichnet.

(d) Was ist die Homogenisierung (perspective divide)?

Die Multiplikation mit der ModelMatrix.
Die Division durch die homogene Koordinate $w$ , die $[-w,w]^3$ auf $[-1,1]^3$ abbildet.
Die Abbildung des NDC auf den Screen Space.
Die Interpolation der Vertex-Attribute.

Lösung anzeigen

(a) -> 2. Pflicht sind Vertex Shader und Fragment Shader. Tesselation und Geometry Shader sind optional (Tradeoff Speicherplatz versus Performance).
(b) -> 3. Bis zum NDC ( $[-1,1]^3$ ) ist alles auflösungsunabhängig; erst die Viewport-Transformation macht die Ausgabe geräteabhängig.
(c) -> 2. GL_LESS (Standard): Der kleinere, nähere z-Wert gewinnt; das Pixel wird nur bei geringerem Tiefenwert aktualisiert.
(d) -> 2. Die Homogenisierung ist die Division durch $w$ und bildet den $[-w,w]^3$ Würfel auf den $[-1,1]^3$ Würfel ab. Sie kann automatisch auf der GPU oder manuell im Vertex Shader erfolgen.

Typischer Fehler: Auflösungsunabhängigkeit falsch zuordnen (Antwort b) oder den z-Vergleich umdrehen (Antwort c).

Siehe Kapitel 8: Rendering-Pipeline.

Aufgabe 10 (Klausur-Niveau) - Kante interpolieren und Tiefentest kombinieren

Ein Dreieck hat unter anderem die Kantenendpunkte:

Vertex	Farbe (RGB)	Tiefenwert $z$
$A$	$(1, 1, 0)$ gelb	$2$
$B$	$(0, 1, 1)$ cyan	$6$

(a) Berechne die entlang der Kante $A \to B$ linear interpolierte Farbe am Parameter $t = \tfrac{1}{2}$ (also am Mittelpunkt der normierten Strecke).

(b) Ein zweites Objekt liefert an genau dieser Fragmentzelle den Tiefenwert $5$ . Der Tiefentest läuft mit GL_LESS, der Buffer ist an der Zelle noch auf $\infty$ (unendlich). Beide Objekte, das Kantenfragment aus (a) und das zweite Objekt, treffen ein. Welche Farbe ist am Ende sichtbar?

Hinweis zu (b): Der Tiefenwert des Kantenfragments bei $t = \tfrac{1}{2}$ wird auf gleiche Weise linear interpoliert.

Lösung anzeigen

(a) Lineare Farbinterpolation. Mit $F(t) = (1-t)\,F(A) + t\,F(B)$ und $t = \tfrac{1}{2}$ :

F\!\left(\tfrac{1}{2}\right) = \tfrac{1}{2}\begin{pmatrix} 1 \\ 1 \\ 0 \end{pmatrix} + \tfrac{1}{2}\begin{pmatrix} 0 \\ 1 \\ 1 \end{pmatrix} = \begin{pmatrix} 1/2 \\ 1 \\ 1/2 \end{pmatrix}

Ergebnis: $(0{,}5,\ 1,\ 0{,}5)$ , ein helles Grün.

(b) Tiefentest. Der interpolierte Tiefenwert des Kantenfragments bei $t = \tfrac{1}{2}$ :

z = (1-\tfrac{1}{2})\cdot 2 + \tfrac{1}{2}\cdot 6 = 1 + 3 = 4

Ablauf mit GL_LESS, Buffer startet bei $\infty$ :

Kantenfragment $z = 4$ : $4 < \infty$ ? Ja -> übernommen. Buffer wird $4$ , sichtbare Farbe ist das helle Grün $(0{,}5, 1, 0{,}5)$ .
Zweites Objekt $z = 5$ : $5 < 4$ ? Nein -> verworfen.

(Bei umgekehrter Ankunftsreihenfolge ergäbe sich dasselbe Endbild: Zuerst $5 < \infty$ -> Buffer $5$ ; dann $4 < 5$ -> Buffer $4$ . Der z-Buffer ist reihenfolgeunabhängig.)

Endergebnis: Sichtbar ist die interpolierte Kantenfarbe $(0{,}5,\ 1,\ 0{,}5)$ mit Tiefenwert $4$ .

Tipp: Farbe, Tiefe und alle weiteren Vertex-Attribute werden mit demselben Interpolationsverfahren behandelt. Der z-Wert entscheidet über Sichtbarkeit, die interpolierte Farbe über das Aussehen des Gewinner-Fragments.

Siehe Kapitel 8: Rendering-Pipeline.