(2) Mathematische Grundlagen

VorlesungC t fikComputergrafik

T. Grosch

Mathematische GrundlagenMathematische Grundlagen

Mathematik für die ComputergrafikMathematik für die ComputergrafikVektorrechnungTrigonometriegGeraden & EbenenMatrizen

Grundlage vieler AlgorithmenD h h t Wi d h l d M th tikDaher heute Wiederholung der MathematikEher von der praktischen Seite

T. Grosch - 2 -

Ab heute erstes ÜbungsblattAb heute erstes ÜbungsblattCa 80 Anmeldungen für die ÜbungenCa. 80 Anmeldungen für die ÜbungenCa. 70 x Erstwunsch (siehe email)1. Übungsblatt ab heute auf WebseiteAb dieser Woche Übungen zu C++ Programmierung, Fragen zu ÜbungsblattRückgabeRückgabe

Theoretische Aufgaben: Nächsten Dienstag (19.4.) vor der Vorlesung (15 Uhr, G29-307)G 2 3 S d bildGruppen von 2-3 Studenten bildenBlätter zusammenheftenauf jedem Blatt Name, Matrikelnr, Übungsgruppe angebenj g g pp gProgrammieraufgaben: Per email an Maik Schulze bis Dienstag 15 UhrNur Sourcen keine Libraries/ExecutablesNur Sourcen, keine Libraries/Executables

T. Grosch - 3 -

Trigonometrie

Beispiel I bBeispiel IWir blicken senkrecht auf den hdWir blicken senkrecht auf den Mittelpunkt eines Bildschirms.

Die Distanz vom „Augpunkt“ zum Bildschirmmittelpunkt

hdα

zum Bildschirmmittelpunkt sei d = 20 cmDer Bildschirm hat eine Größe b x h von 20x20 cm bb 2Größe b x h von 20x20 cm

Wie groß ist der horizontale Öffnungswinkel der Kamera

db

db

22tan ==α

⎟⎠⎞

⎜⎝⎛=

db

2arctanα

Öffnungswinkel: °=⋅ 13,532 α

T. Grosch - 5 -

Beispiel IIBeispiel IIb b

α

bh

α

b

Fläche in einem a

Fläche in einem Dreiecka

Parallelogramm

haA ⋅= αsin21

⋅⋅⋅= baA

bh

=αsin2

αsin⋅= bh

αsin⋅⋅= baA

T. Grosch - 6 -

sin cos tansin, cos, tanh

a

α

a

hb

H tAnkathete

==αcos

bhHypotenuse

ateGegenkatheiha

HypotenuseteGegenkathe==αsin

ba

AnkatheteteGegenkathe

===ααα

cossintan

T. Grosch - 7 -

Vektorrechnung

Vektorenyv

VektorenGegeben sind die Punkte A

ACGegeben sind die Punkte A

und CGesucht ist der Vektor: xv0

Ccv

zvAC

ACAC −=Was ist?

zACAC

OC

( )zyx CCCC ,,=

beschreibt die Koordinaten des

Was ist der Unterschied ischen einem P nkt C nd

OC Punktes in einem Koordinatensystem und ist im Prinzip eine Kurzschreibweise für:

zwischen einem Punkt C und dem Vektor ?cv cOCzCyCxCC zyx

vvvv ==⋅+⋅+⋅=̂

T. Grosch - 9 -

Vektorenav

Vektoren

⎞⎛a ⎞⎛b

⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛= y

x

aa

av

⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛= y

x

bbb

bv α

bv

⎟⎠

⎜⎝ za ⎟

⎠⎜⎝ zb

222vB t aaaaa zyx =++= 222vBetrag:

bbbbbvvvv

Sk l d kt zzyyxx bababababa ++=⋅⋅= αcosoSkalarprodukt:Ergebnis ist ein Skalar

T. Grosch - 10 -

Senkrechte Projektion vSenkrechte ProjektionSenkrechte Projektion:

a

Senkrechte Projektion:

αbv

bbaaba v

vov

vvv =⋅=→ αcos

Was ist, wenn der Vektor, auf den wir projizieren bereits normiert

bbavv→

b

wir projizieren, bereits normiert ist?

dann berechnet sich die k ht P j kti d h d

1=bv

bbvvvvsenkrechte Projektion durch das

Skalarprodukt Oder anders herum: das Sk l d kt lä t i h l

baba ovv =→

Skalarprodukt lässt sich als senkrechte Projektion auf einen Einheitsvektor interpretieren

T. Grosch - 11 -

Beispiel yvBeispiel

⎟⎞

⎜⎛1

⎟⎞

⎜⎛0

⎟⎞

⎜⎛0 ya

xa⎟⎟⎟

⎠⎜⎜⎜

⎝

=00xv

⎟⎟⎟

⎠⎜⎜⎜

⎝

=01yv

⎟⎟⎟

⎠⎜⎜⎜

⎝

=10zv

xvav

x⎠⎝ ⎠⎝ ⎠⎝

v⎟⎞

⎜⎛ xa xaxa =vov za

zv

⎟⎟⎟

⎠⎜⎜⎜

⎝

=

z

y

aaav

yaay =vov

aaaaaaaaa ++vovv2⎠⎝ z

0=yx vov zzyyxx aaaaaaaaa ++== o

2222 aaaa zyxv=++=

Di j ili K di t hält d h diDie jeweilige Koordinate erhält man durch die senkrechte Projektion auf die Koordinatenachsen. Sind diese normiert, braucht man hierfür nur das Skalarproduktbraucht man hierfür nur das Skalarprodukt.

T. Grosch - 12 -

SkalarproduktSkalarprodukt

Das Skalarprodukt kann man an vielen StellenDas Skalarprodukt kann man an vielen Stellen einsetzen

Winkel zwischen zwei Vektoren bestimmen (bzw. Cosinus (des Winkels)Zeigen zwei Vektoren in die gleiche Richtung ?St h i V kt k ht f i d ?Stehen zwei Vektoren senkrecht aufeinander ?Projektion von einem Vektor auf einen anderenLänge eines VektorsLänge eines Vektors…

Wir werden es noch häufig verwenden…

T. Grosch - 13 -

KreuzproduktKreuzprodukt

⎞⎛

⎟⎟⎟⎞

⎜⎜⎜⎛

−−

=⎟⎟⎟⎞

⎜⎜⎜⎛

×⎟⎟⎟⎞

⎜⎜⎜⎛

=×= zxxz

yzzy

y

x

y

x

babababa

bb

aa

bacvvv

⎟⎠

⎜⎝ −⎟

⎠⎜⎝

⎟⎠

⎜⎝ xyyxzz bababa

αsin⋅⋅=×= babacvvvvv

Ergebnis ist ein Vektor, der senkrecht auf beiden Vektoren steht

Der Betrag des Vektors entspricht der Fläche des Parallelogramms

T. Grosch - 14 -

Beispiel Iyv

Beispiel I

⎟⎞

⎜⎛1

⎟⎞

⎜⎛0

⎟⎞

⎜⎛0

zv ?

⎟⎟⎟

⎠⎜⎜⎜

⎝

=00xv

⎟⎟⎟

⎠⎜⎜⎜

⎝

=01yv

⎟⎟⎟

⎠⎜⎜⎜

⎝

=10zv xv

⎠⎝ ⎠⎝ ⎠⎝zv

=× yx vv =× xy vv=× xx vv

zv=⎟⎟⎟⎞

⎜⎜⎜⎛

=⎟⎟⎟⎞

⎜⎜⎜⎛

×⎟⎟⎟⎞

⎜⎜⎜⎛

= 00

10

01

zv−=⎟⎟⎟⎞

⎜⎜⎜⎛

=⎟⎟⎟⎞

⎜⎜⎜⎛

×⎟⎟⎟⎞

⎜⎜⎜⎛

= 00

01

10

⎟⎟⎟⎞

⎜⎜⎜⎛

=⎟⎟⎟⎞

⎜⎜⎜⎛

×⎟⎟⎟⎞

⎜⎜⎜⎛

= 00

01

01

⎟⎟⎠

⎜⎜⎝

⎟⎟⎠

⎜⎜⎝

⎟⎟⎠

⎜⎜⎝ 100 ⎟

⎟⎠

⎜⎜⎝−

⎟⎟⎠

⎜⎜⎝

⎟⎟⎠

⎜⎜⎝ 100 ⎟

⎟⎠

⎜⎜⎝

⎟⎟⎠

⎜⎜⎝

⎟⎟⎠

⎜⎜⎝ 000

T. Grosch - 15 -

3D-Koordinatensysteme3D-Koordinatensysteme

x x

yz

yzz z

Linke-Hand-System(Li k )

Rechte-Hand-System(R h )(Linkssystem) (Rechtssystem)

T. Grosch - 16 -

KreuzproduktKreuzproduktav av

v

S Sbacvvv ×=

bv

bacvvv ×=

bv

Linke-Hand-System(Linkssystem)

Rechte-Hand-System(Rechtssystem)

Die Richtung des resultierenden Vektors ändert sich beim Wechsel Rechts/Linkssystem

T. Grosch - 17 -

KreuzproduktKreuzprodukt

Auch das Kreuzprodukt kann man an vielen StellenAuch das Kreuzprodukt kann man an vielen Stellen einsetzen

Oberflächennormalen bestimmenDreiecksfläche bestimmenSind zwei Vektoren parallel ?Den Winkel zwischen zwei Vektoren bestimmen (bzw. Sinus des Winkels) Orthogonales Koordinatensystem bestimmenOrthogonales Koordinatensystem bestimmen…

T. Grosch - 18 -

Beispiel 1Beispiel 1

Ein Polygon ist (oft) gegeben durch eine Liste seinerEin Polygon ist (oft) gegeben durch eine Liste seiner 3D-Eckpunkte, die gegen den Uhrzeigersinn eingetragen werden, wenn man von oben/draußen g gdarauf blickt Berechne die normierte Normale auf das Polygon in einem Rechtssystem (Festlegung: Normale zeigt immer nach außen)

D AEAEavvv −==

nv

ED

C ABABbvvv

−==av

ABb

vabn vvv ×=

nnv

v0

nn v=

T. Grosch - 19 -

Beispiel 1: ProblemeBeispiel 1: Probleme

Diese Normalenberechnung ist nur korrekt wennDiese Normalenberechnung ist nur korrekt wennFlächen „planar“Flächen konvexPunkte nicht kolinear

D D

avE

DC A

ED

C

nvA

Bbv

B nBPunkte nicht in einer Ebene Konkave Fläche

T. Grosch - 20 -

Konvex/KonkavKonvex/KonkavKonvex heißt daß dieKonvex heißt, daß die Verbindung zweier Punkte vollständig innerhalb der Fläche liegt konvexFläche liegtAnalog: Innenwinkel nicht größer als 180°

konvex

Eselsbrücke konkav: man

konkav

kann Kaffee drauf schütten

T. Grosch - 21 -

Beispiel 2: Polygone mit LöchernBeispiel 2: Polygone mit LöchernWie mache ich ein Loch inWie mache ich ein Loch in ein Polygon?

Doppelte Hilfskanteh i k k

B C

H G … auch nur ein konkaves Polygon

H G

E FP = {A B C D A E F G H E}

A D

P = {A, B, C, D, A, E, F, G, H, E}

Grundlegende Datenstruktur in den meisten Graphiksystemen sind daher Dreiecke

3 Punkte liegen immer in einer Ebene3 Punkte liegen immer in einer EbeneNormale ist eindeutigProblem: Triangulierung

T. Grosch - 22 -

Beispiele: DreiecksmodelleBeispiele: Dreiecksmodelle

T. Grosch - 23 -

GeradeGerade A Bvv

Durch 2 (nicht identische) Punkte A und B wird eine

ABABv −==v

Durch 2 (nicht-identische) Punkte A und B wird eine Gerade aufgespanntJeder Punkt X auf der Geraden ist gegeben durch:Jeder Punkt X auf der Geraden ist gegeben durch:

Jeder Punkt auf der Kante (edge) zwischen A und BvtAX v⋅+=

Jeder Punkt auf der Kante (edge) zwischen A und B liegt im Parameterbereich t ∈ (0, 1) Ein Strahl von A in Richtung B liegt im Bereich t ∈ (0, ∞)Ein Strahl von A in Richtung B liegt im Bereich t ∈ (0, )

T. Grosch - 24 -

Lineare InterpolationLineare Interpolation A Bvv

Jeder Punkt auf der Gerade lässt sich

ABABv −==v

vtAX v+ Jeder Punkt auf der Gerade lässt sich also auch darstellen durch

vtAX ⋅+=

( )ABtAX −⋅+= ( ) AtBtX ⋅−+⋅= 1

Dies entspricht einer „linearen Interpolation“:( ) ABX 1

AtBtAX ⋅−⋅+=( ) AtBtX + 1

te po at ot = 0: Punkt At = 1; Punkt Bt (0 1) t l B d d R t A“

( ) AtBtX ⋅−+⋅= 1

t∈(0, 1); „t mal B und den Rest von A“Eignet sich z.B. auch zur Interpolation von Farben an den Eckpunkten

T. Grosch - 25 -

ZusammenfassungZusammenfassungA Bvv

ABABv −==vA Bv

Gerade

Parameterdarstellung vtAX v⋅+=

Lineare Interpolation ( ) AtBtX ⋅−+⋅= 1

T. Grosch - 26 -

Ebenen/Dreiecke CEbenen/DreieckeDurch 3 Punkte wird eine X

Cvv

Durch 3 Punkte wird eine Ebene aufgespanntParameterdarstellung:

XA

Buv

Bei welchen s und t WertenABu =v ACv =v

BvtusAX vv ⋅+⋅+=

C

Bei welchen s und t Werten liegt X im Dreieck ?

°nv1);1,0(, ≤+∈ tsts

ANormalform X

);,(,

A

Bvuvun vv

vvv

××

=°0=°nAX v

o

vu ×

T. Grosch - 27 -

Normalform INormalform I0=°nAX v

oC°nv

0nAX

( ) 0=°− nAX vo A

X

( ) ( ) 0=°−° nAnX vovv

ov B

Av X

v

Interpretation:Gerade durch den Ursprung in Richtung n O

A X

in Richtung nJeder Punkt X ist dann ein Punkt der Ebene, wenn er auf diese Gerade projiziert

O

auf diese Gerade projiziert den gleichen Abstand vom Ursprung hat, wie die Projektion von A.Projektion von A.

T. Grosch - 28 -

Normalform IIO

Normalform IIAv

d( ) ( ) 0=°−° nAnX vovv

ov

C°nv( ) 0=°−⋅+⋅+⋅ nAnznynx zyx

vov

0d

( ) ( )

X0=+⋅+⋅+⋅ dnznynx zyx

( )°−= nAd vov

A

B

( )d beschreibt den (kürzesten) Abstand der Ebene vom Ursprung

⎟⎟⎟⎞

⎜⎜⎜⎛

= yx

Xv

⎟⎟⎟⎞

⎜⎜⎜⎛

=° y

x

nn

nvDas Vorzeichen gibt Auskunft über die Lage des Ursprungs zur Ebene

d=0: Ursprung Teil der Ebene ⎟⎟⎠

⎜⎜⎝ z ⎟

⎟⎠

⎜⎜⎝ z

y

nd=0: Ursprung Teil der Ebened>0: Ursprung im vorderen Halbraumd<0: Ursprung im hinteren Halbraum

T. Grosch - 29 -

Normalform IIINormalform IIITypische Schreibweise für Einsetzen eines beliebigenTypische Schreibweise für Ebenengleichung

Einsetzen eines beliebigen Punktes

0=+⋅+⋅+⋅ dzcybxa ⎟⎟⎞

⎜⎜⎛

=x

pp

P

Wobei a, b, c die Komponenten der (normierten) P ist Teil der Ebene

0+++ dzcybxa⎟⎟⎠

⎜⎜⎝

=

z

y

ppP

Komponenten der (normierten) Normalen sind und d den Abstand der Ebene vom Ursprung bezeichnet

P ist Teil der Ebene

0=+⋅+⋅+⋅ dpcpbpa zyx

Ursprung bezeichnetOft sinnvoll: die 4 Parameter a,b,c,d in die Datenstruktur für

P liegt im hinteren Halbraum

0<+⋅+⋅+⋅ dpcpbpa zyx

das Dreieck aufnehmen, da sie dann nicht immer neu berechnet werden müssen

P liegt im vorderen Halbraum

0>+⋅+⋅+⋅ dpcpbpa zyx

T. Grosch - 30 -

Beispiel ⎞⎛0BeispielBerechnen sie die ⎟

⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛==

010

yn vv ( )2,2,2=ABerechnen sie die Ebenengleichung der oberen Würfelfläche

⎟⎠

⎜⎝0

0=°nAX vo

yv ( ) 0=°− nAX vo

02 ⎞⎛⎞⎛ ⎞⎛⎞⎛ x)2,2,2(

0010

222

=⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛

⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛

⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛−⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛oy

x

xv)0,0,0(02 ⎟⎠

⎜⎝⎟

⎠⎜⎝

⎟⎠

⎜⎝

⎟⎠

⎜⎝ z

00)2(1)2(0)2( =⋅−+⋅−+⋅− zyx

zv02 =−y

2=y 2y

T. Grosch - 31 -

GeradenGeraden

Gibt es eine Normalform für eine Geradengleichung ?Gibt es eine Normalform für eine Geradengleichung ?Nein, denn Normale in 3D ist nicht eindeutig definiert

Wie sieht es mit einer Geraden in 2D aus ?Wie sieht es mit einer Geraden in 2D aus ?

Byv nv 0)( =− AXn ovByyb X

)(•Der Vektor entlang der Geraden steht senkrecht auf dem Normalenvektor

Aya •Ähnlich wie bei Ebene:

•Wenn X oberhalb der Geraden:

b

Geraden: Skalarprodukt positiv•Wenn X unterhalb der Geraden:

xvxa xb Skalarprodukt negativ

T. Grosch - 32 -

GeradenGeraden

Wie bestimmt man den Normalenvektor ?Wie bestimmt man den Normalenvektor ?Komponenten von (B-A) vertauschen und ein Vorzeichen wechseln

Bnv BX ⎟⎟

⎠

⎞⎜⎜⎝

⎛−−−

=xx

yy

abab

n)(v

aby =Δ

xΔ

A⎠⎝ xx

xx abx −=Δ

yy aby −=Δ

yΔ−

⎞⎛⎞⎛0=⎟⎟

⎠

⎞⎜⎜⎝

⎛−−

⎟⎟⎠

⎞⎜⎜⎝

⎛−−

y

x

xx

yy

ayax

abba

oGeradengleichung⎠⎝

T. Grosch - 33 -

Implizite GeradengleichungImplizite Geradengleichung

UmformungUmformung

⎞⎛⎞⎛ axba0=⎟⎟

⎠

⎞⎜⎜⎝

⎛−−

⎟⎟⎠

⎞⎜⎜⎝

⎛−−

y

x

xx

yy

ayax

abba

o

0)()(

0))(())((

=−+−+−⇒

=−−+−−⇒ yxxxyy

babaabybax

ayabaxba

0)()( ++⇒ xyyxxxyy babaabybax

Implizite Geradengleichung

Implizite Gleichung: f(x,y) = 0

T. Grosch - 34 -

Beispiel: put pixel in OpenGLBeispiel: put_pixel in OpenGL#include <GL/glut.h>

#define BREITE 500void init (void) {#define BREITE 500

#define HOEHE 500

void put_pixel(GLint x, GLint y){

{glClearColor (1.0, 1.0, 1.0, 0.0);glOrtho(0, BREITE, 0, HOEHE, -1, 1);

}{

glBegin(GL_POINTS);glVertex2i(x, y);glEnd();

}

int main(int argc, char** argv){

glutInit(&argc, argv);}

void display(void){

glClear (GL COLOR BUFFER BIT);

glutInit(&argc, argv);glutInitDisplayMode (GLUT_SINGLE|GLUT_RGB);glutInitWindowSize( BREITE, HOEHE);glutInitWindowPosition (100, 100);glutCreateWindow ("Points");glClear (GL_COLOR_BUFFER_BIT);

glColor3f (1.0, 0.0, 0.0);

put_pixel(50, 50);glFlush ();

glutCreateWindow ( Points );init ();glutDisplayFunc(display); glutMainLoop();return 0;}glFlush ();

}return 0;}

pixel_bsp.vcproj

T. Grosch - 35 -

Beispiel: Bildschirm löschenBeispiel: Bildschirm löschen

for (x = 0; x < BREITE; x ++)for (x 0; x < BREITE; x ++)for (y = 0; y < HOEHE; y++) {{

put_pixel(x, y);}}

glFlush ();

pixel_clear.vcproj pixel_rechteck.vcproj

T. Grosch - 36 -

Beispiel FunktionenBeispiel Funktionenvoid display(void) void display(void){

GLint x;glClear (GL_COLOR_BUFFER_BIT);f ( 0 )

{GLint x;glClear (GL_COLOR_BUFFER_BIT);f ( 0 )for (x = 0; x < BREITE; x ++)

{ glColor3f (0.0, 1.0, 0.0);put pixel(x, x);

for (x = 0; x < BREITE; x ++){

glColor3f (1.0, 0.0, 0.0);put pixel(x, sin(PI*2*x/BREITE)*put_pixel(x, x);

}glFlush ();

}

put_pixel(x, sin(PI 2 x/BREITE)HOEHE/2+HOEHE/2);

}glFlush ();

}

pixel fkt.vcprojp _ p j

T. Grosch - 37 -

Nächste WocheNächste Woche

Zeichnen von LinienZeichnen von LinienClipping

T. Grosch - 38 -