3D Geometric Transformations

2nd Week, 2008

Sun-Jeong Kim

Transformations in Rendering PipelineTransformations in Rendering Pipeline

World transformationstransformationsWorld transformationstransformationsModeling coordinates world coordinates

Viewing transformationstransformationsViewing transformationstransformationsWorld coordinates viewing coordinates

Projection transformationstransformationsView coordinates projection coordinates

Viewport transformationstransformationsProjection coordinates screen (or device) j ( )coordinates

Computer Graphics Applications2

Geometric TransformationsGeometric Transformations

DefinitionDefinitionTo change the geometric description of an object like its position orientation or sizeits position, orientation, or size

BasicsBasicsTranslation

R t tiRotation

Scalingy y y

x x x

Computer Graphics Applications3

Modeling a CubeModeling a Cube

Surface-based modelSurface-based modelOutward-pointing face

Right-hand rule: counterclockwise orderRight-hand rule: counterclockwise order

Data structureData structureGeometry: location of vertices

float vertices[8][3] { { 1 0 1 0 1 0} {1 0 1 0 1 0}

T l ti it

float vertices[8][3]= { {-1.0, -1.0, -1.0}, {1.0, -1.0, -1.0},{1.0, 1.0, -1.0}, {-1.0, 1.0, -1.0}, {-1.0, -1.0, 1.0},{1.0, -1.0, 1.0}, {1.0, 1.0, 1.0}, {-1.0, 1.0, 1.0}};

l i ( )Topology: connectivity glBegin(GL_POLYGON);glVertex3fv(vertices[0]);glVertex3fv(vertices[3]); glVertex3fv(vertices[2]);

Computer Graphics Applications4

glVertex3fv(vertices[2]); glVertex3fv(vertices[1]);

glEnd();

A Color Cube (1)A Color Cube (1)float vertices[8][3]= { {-1.0, -1.0, -1.0}, {1.0, -1.0, -1.0},

{1.0, 1.0, -1.0}, {-1.0, 1.0, -1.0}, {-1.0, -1.0, 1.0},{ , , }, { , , }, { , , },{1.0, -1.0, 1.0}, {1.0, 1.0, 1.0}, {-1.0, 1.0, 1.0}};

float colors[8][3] = { {0.0, 0.0, 0.0}, {1.0, 0.0, 0.0}, {1 0 1 0 0 0} {0 0 1 0 0 0} {0 0 0 0 1 0}{1.0, 1.0, 0.0}, {0.0, 1.0, 0.0}, {0.0, 0.0, 1.0}, {1.0, 0.0, 1.0}, {1.0, 1.0, 1.0}, {0.0, 1.0, 1.0}};

void DrawQuad( int v1, int v2, int v3, int v4 ) 3{

glColor3fv( colors[v1] );glVertex3fv( vertices[v1] );glColor3fv( colors[v2] );

3

7 2glColor3fv( colors[v2] );glVertex3fv( vertices[v2] );glColor3fv( colors[v3] );glVertex3fv( vertices[v3] );

6gglColor3fv( colors[v4] );glVertex3fv( vertices[v4] );

}4 1

Computer Graphics Applications55

A Color Cube (2)A Color Cube (2)void DrawCube( void ){{

glBegin( GL_QUADS );DrawQuad( 0, 3, 2, 1 );DrawQuad( 1, 2, 6, 5 ); DrawQuad( 2, 3, 7, 6 );DrawQuad( 3, 0, 4, 7 );DrawQuad( 4, 5, 6, 7 );DrawQuad( 5, 4, 0, 1 );

Bilinear interpolation

DrawQuad( 5, 4, 0, 1 );glEnd();

}

Bilinear interpolation

( ) ( ) 1001 1 CCC ααα +−=C1 C2

C ( ) C (γ)( ) ( )( ) ( ) 5445

3223

1

1

CCC

CCC

γγγβββ

+−=+−=

C23(β)C01(α) C45(γ)

C4

C5

Computer Graphics Applications6

( ) ( ) 5445 γγγC3C0

Modeling a Color Cube (1)Modeling a Color Cube (1)

Computer Graphics Applications7

Modeling a Color Cube (2)Modeling a Color Cube (2)

Computer Graphics Applications8

Modeling a Color Cube (3)Modeling a Color Cube (3)

Computer Graphics Applications9

Modeling a Color Cube (4)Modeling a Color Cube (4)

Computer Graphics Applications10

What’s Wrong? (1)What s Wrong? (1)

Computer Graphics Applications11

Changing the Projection ParametersChanging the Projection Parameters

Computer Graphics Applications12

What’s Wrong? (2)What s Wrong? (2)

Computer Graphics Applications13

Changing the Camera ParametersChanging the Camera Parameters

Computer Graphics Applications14

Result – Modeling a Color CubeResult Modeling a Color Cube

Computer Graphics Applications15

Translations (1)Translations (1)

Computer Graphics Applications16

Result – Translations (1)Result Translations (1)

Computer Graphics Applications17

Translations (2)Translations (2)

Computer Graphics Applications18

Result – Translations (2)Result Translations (2)

Computer Graphics Applications19

Rotations (1)Rotations (1)

Computer Graphics Applications20

Result – Rotations (1)Result Rotations (1)

Computer Graphics Applications21

Rotations (2)Rotations (2)

Computer Graphics Applications22

What’s the Difference? (1)What s the Difference? (1)

Computer Graphics Applications23

Scaling (1)Scaling (1)

Computer Graphics Applications24

Result – Scaling (1)Result Scaling (1)

Computer Graphics Applications25

Scaling (2)Scaling (2)

Computer Graphics Applications26

What’s the Difference? (2)What s the Difference? (2)

Computer Graphics Applications27

Exercises (1)Exercises (1)

다음 그림과 같이 Color Cube들을 모델링 하시오다음 그림과 같이 Color Cube들을 모델링 하시오.

Computer Graphics Applications28

glPushMatrix( ) & glPopMatrix( ) (1)glPushMatrix( ) & glPopMatrix( ) (1)

Computer Graphics Applications29

glPushMatrix( ) & glPopMatrix( ) (2)glPushMatrix( ) & glPopMatrix( ) (2)

Performing a transformation and then returningPerforming a transformation and then returning to the same state as before its execution

Ex) instance transformationEx) instance transformation

glPushMatrix();glPushMatrix();

glTranslatef(.....);glRotatef(.....);g ( )glScalef(.....);

/* draw object here *// draw object here /

glPopMatrix();glPopMatrix();

Computer Graphics Applications30

Spinning a Color Cube (1)Spinning a Color Cube (1)

Computer Graphics Applications31

Spinning a Color Cube (2)Spinning a Color Cube (2)

Computer Graphics Applications32

Spinning a Color Cube (3)Spinning a Color Cube (3)

Computer Graphics Applications33

Result – Spinning a Color Cube (1)Result Spinning a Color Cube (1)

Computer Graphics Applications34

Spinning a Color Cube (4)Spinning a Color Cube (4)

Computer Graphics Applications35

Spinning a Color Cube (5)Spinning a Color Cube (5)

Computer Graphics Applications36

Spinning a Color Cube (6)Spinning a Color Cube (6)

Computer Graphics Applications37

Result – Spinning a Color Cube (2)Result Spinning a Color Cube (2)

Computer Graphics Applications38

Exercises (2)Exercises (2)

‘r’ 또는 ‘R’ 키를 누르면 회전 방향이 반대로 되r 또는 R 키를 누르면 회전 방향이 반대로 되도록 만드시오.

Computer Graphics Applications39

Virtual Trackball (1)Virtual Trackball (1)

Using the mouse position to control rotationUsing the mouse position to control rotation about two axes

Supporting continuous rotations of objectsSupporting continuous rotations of objects

Computer Graphics Applications40

Trackball frame

Virtual Trackball (2)Virtual Trackball (2)

Rotation with a virtual trackballRotation with a virtual trackballProjection of the trackball position to the plane

2222

222

2222

zxry

rzyx =++

zxry −−=

Computer Graphics Applications41

Virtual Trackball (3)Virtual Trackball (3)

Rotation with a virtual trackball (cont’)Rotation with a virtual trackball (cont )Determination of the orientation of a plane

Rotation angle

21 ppn ×=

Rotation angle

( )211cos pp ⋅= −θ θ

QuaternionsQuaternionsnn

Computer Graphics Applications42

Rotations with Quaternions (1)Rotations with Quaternions (1)

Rotation about an arbitrary axisRotation about an arbitrary axisSetting up a unit quaternion (u: unit vector)

( )biθθ

Representing any point position P in quaternion

( )cbas ,,2

sin ,2

cos === uv

p g y p p qnotation (p = (x, y, z))

( )pP ,0=Carrying out with the quaternion operation (q-1=(s, –v))

1−=′ qqPP

Producing the new quaternion( )pP ′=′ ,0

( ) ( ) ( )Computer Graphics Applications43

( ) ( ) ( )pvvpvvpvpp ××+×+⋅+=′ ss 22

Rotations with Quaternions (2)Rotations with Quaternions (2)

Obtaining the rotation matrix by quaternionObtaining the rotation matrix by quaternion multiplication

bbb ⎤⎡ 22 2222221

( )R sabccascab

sbacscabcb

θM ⎥⎥⎤

⎢⎢⎡

−−−++−−−

= 22

22

2222122

2222221

( ) ( ) ( ) ( ) ( )basabcsbac

θθθθθ RRRRR

⎥⎥

⎦⎢⎢

⎣ −−+− 22 2212222

I l di th t l ti

( ) ( ) ( ) ( ) ( )xxyyzyyxx θθθθθ RRRRR −−=

Including the translations ( ) ( )TMTR θθ R

1−=

Computer Graphics Applications44

Downloading ‘trackball h’Downloading trackball.h

Computer Graphics Applications45

Definition of ‘MyTrackBall’ ClassDefinition of MyTrackBall Class

Computer Graphics Applications46

Vector OperationsVector Operations

Computer Graphics Applications47

Projection to a HemisphereProjection to a Hemisphere

Computer Graphics Applications48

Creation of a QuaternionCreation of a Quaternion

Computer Graphics Applications49

Building a Rotation MatrixBuilding a Rotation Matrix

Computer Graphics Applications50

Global VariablesGlobal Variables

Computer Graphics Applications51

Initialization & ResizingInitialization & Resizing

Computer Graphics Applications52

Mouse EventsMouse Events

Computer Graphics Applications53

DrawScene( )DrawScene( )

Computer Graphics Applications54

Setting Matrices DirectlySetting Matrices Directly

Constructing a matrix directly or using it not aConstructing a matrix directly or using it not a transformation function

void glLoadMatrix{fd}( TYPE *m );

void glMultMatrix{fd}( TYPE *m );

void glLoadMatrix{fd}( TYPE *m );

void glMultMatrix{fd}( TYPE *m );

m: 16-element one-dimensional arrays in column column orderorder rather than 4x4 two-dimensional arraysorderorder rather than 4x4 two-dimensional arrays

Computer Graphics Applications55

Result – Virtual TrackballResult Virtual Trackball

Computer Graphics Applications56

Exercises (3)Exercises (3)

축은 고정시키고 color cube들만 virtual trackball축은 고정시키고 color cube들만 virtual trackball에 움직이도록 하시오.

각 cube의 중심을 고정점으로 회전시켜 보시오.

Computer Graphics Applications57