Wk4 Transf 3D.ppt - University of Utah College of Engineeringcs4600/lectures/Wk4_Transf_3D.pdf ·...

Utah School of Computing Fall 2015

Computer Graphics CS4600 1

Transformations II

CS4600 Computer Graphics

From Rich Riesenfeld

Fall 2015

2

Arbitrary 3D Rotation

• What is its inverse?

• What is its transpose?

• Can we constructively elucidate this

relationship?



3

Rotate + about axis a:Ra(+ )

a

x

z

y

4

First, Rotate about z by : Rz( )

a Now in the

(y-z)-plane

x

z

y



5

Then Rotate about x by + : Rx( )

x

z

y

Rotate in the

(y-z)-plane

a

6

Now, + Rotation about z-axis: Rz(+ )

x

z

y

a Now aligned with z-axis

6



7

Then rotate about x by - : Rx(- )

Rotate again in

the (y-z)-plane

x

z

y

a

8

Now, + Rotation about z by : Rz( )

Now to original position of a

a

x

z

y



9

We Effected + rotation about Arbitrary axis a:Ra(+ )

a

x

z

y

Utah School of Computing 10

We Effected + rotation about Arbitrary axis a:Ra(+ )

)()()( RRR z xa)( Rz

)()( RRx z



11

Rotation about Arbitrary Axis

• Rotation about a-axis effected by (nonunique) composition of 5 elementary rotations

• We show arbitrary rotation as succession of 5 rotations about principal axes

12

1000

0)cos()sin(0

0)sin()cos(00001

10000100

00)cos()sin(

00)sin()cos(

)(

Ra

1000010000cossin00sincos

1000

0cossin0

0sincos00001


)( Rz

In matrix terms, Ra(+ ) =)( Rz

)( Rx

)( Rx

)( Rz



13

1000

0)cos()sin(0

0)sin()cos(00001

10000100

00)cos()sin(

00)sin()cos(

)(

Ra


1000

0cossin0

0sincos00001


)( Rz

Similarly, Ra-1(+ ) = Ra (- ), so

14

Recall, [AB]t = BtAt

RtMtRtA

tttt RRMt

RMR .

Consequently, for , RMtRA

because,

RMR tt



15

RStMtStRt

RSMtStR

It follows directly that,

Utah School of ComputingUtah School of Computing 16

)()(1 RtaRa

)( Rtz

1000

0)cos()sin(0

0)sin()cos(00001

10000100

00)cos()sin(

00)sin()cos(

)(

Ra


1000

0cossin0

0sincos00001




17

1000

0)cos()sin(0

0)sin()cos(00001

10000100

00)cos()sin(

00)sin()cos(

)(

Ra


1000

0cossin0

0sincos00001


)( Rz

Similarly, Ra-1(+ ) = Ra (- ), so

18

1000

0)cos()sin(0

0)sin()cos(00001

10000100

00)cos()sin(

00)sin()cos(

)(

Ra


1000

0cossin0

0sincos00001


)( Rz

In matrix terms, Ra(+ ) =)( Rz

)( Rx

)( Rx

)( Rz



19

)()( 1 RtaRa

Constructively, we have shown,

This will be useful later

20

3D Translation in x

111000

0100

0010

001

)(z

yd xx

z

y

xd x

d xT x



21

3D Translation in y

111000

0100

010

0001

)(zd yy

x

z

y

x

d yd yT y

22

3D Translation in z

111000

100

0010

0001

)(d zz

y

x

z

y

x

d zd zT z



23

3D Shear in x -direction

111000

0100

0010

001

)(z

y

ayx

z

y

xa

aSh x

24


111000

0100

0010

001

)(z

y

bzx

z

y

xb

bSh x



25

3D Shears: Clamp a Principal Plane, shear in other 2 DoFs

x

z

y

x

z

y

111000

0100

0010

001

)(z

y

ayx

z

y

xa

aSh x

x

z

y



Spring 2013 Utah School of ComputingUtah School of Computing 27


111000

0100

0010

001

)(z

y

bzx

z

y

xb

bSh x

28

3D Shear in y -direction

111000

0100

010

0001

)(z

czy

x

z

y

x

ccSh y



29


111000

0100

001

0001

)(z

ydx

x

z

y

x

ddSh y

x

z

y

x

z

y

111000

0100

001

0001

)(z

ydx

x

z

y

x

ddSh y



31


111000

0100

010

0001

)(z

czy

x

z

y

x

ccSh y

32

3D Shear in z-direction

111000

010

0010

0001

)(zex

y

x

z

y

x

eeSh z



33

3D Shear in z

111000

010

0010

0001

)(zex

y

x

z

y

x

eeSh z

34

3D Shear in z

111000

010

0010

0001

)(zfy

y

x

z

y

x

ffSh z



35

What About Elementary Inverses?

• Scale

• Shear

• Rotation

• Translation

36

Scale Inverse

10 0 1 0

0 1 0 1 0 1

1 10 0

0 1 0 1



37

Shear Inverse

1

1

1

1

0

0

1

01

1

01

0

0

10

1

10

1

bb

aa

38

Shear Inverse

1

01

1

01

10

1

10

1

1

1

bb

aa



39

Rotation Inverse

cossin-

sincos

cossin

sin-cos

)cos(-)sin(-

)sin(--)cos(-

cossin

sin-cos

40

Rotation Inverse

)cos(sin)sincossin(cos

)sincossin(cos)sin(cos22

22

cossin-

sincos

cossin

sin-cos

10

01



41

Rotation Inverse

cossin-

sincos

cossin

sin-cos1

What is special about this?

42

Rotation Inverse

cossin-

sincos

cossin

sin-cos1

What is special about this?

Orthonormal transformations: the inverse is the transpose!



43

Translation Inverse

10

010

01

10

010

01

10

010

01

10

010

01

0

0

0

)(

00

xdxd

xdxd

44

Translation Inverse

10

010

01

10

010

01

00

1

xdxd



45

Want the RHR to Work

jik

ikj

kji

j k

i

46

3D Positive Rotations

x

z

y



47

Xforms as Change in Coordinate Sys

• Useful in many situations

• Use most natural coordination

system locally

• Tie things together in a global

system (object space to world space)

48

Example

x

y

1

2

3



49

Example

is the transformation that

takes a point in coordinate

system j and converts it to a point

in coordinate system i

M ji

p j)(

p i)(

50

Example

•

•

•

pMpji

ji

)()(

pMpkj

kj

)()(

MMM kjki ji



51

Example

x

y

1

2

3

Spring 2013 Utah School of ComputingUtah School of Computing 52

Example

•

•

•

)2,4(21

TM

)2/1,2/1()3,2(32

STM

)8.1,7.6()45(43

TRM



53

Example

x

y

1

2

3

)2,4(21

TM

)2/1,2/1()3,2(32

STM

)8.1,7.6()45(43

TRM

54

Recall the Following

ABAB 111)(



55

Since

•

•

•

)2,4(12

TM

)3,2()2,2(23

TSM

MM ijji

1

)8.1,7.6()45(34

TRM

56

Example

x

y

1

2

3

10

8

6

6

8

6

4

2

)2,4(12

TM

)3,2()2,2(23

TSM

)8.1,7.6()45(34

TRM



57

Change of Coordinate System

• Describe the old coordinate system in terms of the new one.

y

x

58

Change of Coordinate System

Move to the new coordinate system and describe the one old.

y

x

Old is a negative rotation of the new.



Pre 3.1 OpenGL Matrices

• In Pre 3.1 OpenGL matrices were part of the state• Multiple types

– Model-View (GL_MODELVIEW)– Projection (GL_PROJECTION)– Texture (GL_TEXTURE)– Color(GL_COLOR)

• Single set of functions for manipulation• Select which to manipulated by

– glMatrixMode(GL_MODELVIEW);– glMatrixMode(GL_PROJECTION);

Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

Why Deprecation

• Functions were based on carrying out the operations on the CPU as part of the fixed function pipeline

• Current model-view and projection matrices were automatically applied to all vertices using CPU

• We will use the notion of a current transformation matrix with the understanding that it may be applied in the shaders




Current Transformation Matrix (CTM)

• In HTML5/Javascript, conceptually there is a 3 x 3 homogeneous coordinate matrix, the current transformation matrix (CTM) that is part of the state and is applied to all vertices that pass down the pipeline

• In WebGL, conceptually there is a 4 x 4 homogeneous coordinate matrix, the current transformation matrix (CTM) that is part of the state and is applied to all vertices that pass down the pipeline

• The CTM is defined in the user program and loaded into a transformation unit

CTMvertices verticesp p’=Cp

C


CTM operations

• The CTM can be altered either by loading a new CTM or by postmutiplication

Load an identity matrix: C ILoad an arbitrary matrix: C M

Load a translation matrix: C TLoad a rotation matrix: C RLoad a scaling matrix: C S

Postmultiply by an arbitrary matrix: C CMPostmultiply by a translation matrix: C CTPostmultiply by a rotation matrix: C C RPostmultiply by a scaling matrix: C C S




Rotation about a Fixed Point

Start with identity matrix: C IMove fixed point to origin: C CTRotate: C CRMove fixed point back: C CT -1

Result: C = TR T –1 which is backwards.

This result is a consequence of doing postmultiplications.Let’s try again.


Reversing the Order

We want C = T –1 R T so we must do the operations in the following order

C IC CT -1C CRC CT

Each operation corresponds to one function call in the program.

Note that the last operation specified is the first executed in the program




CTM in Canvas• In 2D, World Space is our canvas.

• We will use transformation matrices to place objects into the 2D scene.

• We will use transformations (matrices) to move the objects in the scene.


CTM in WebGL• OpenGL had a model-view and a projection

matrix in the pipeline which were concatenated together to form the CTM

• We will emulate this process




• USE MODEL->Object/World->Eye->CLIP->NDC->Window

Utah School of Computing

Using the ModelView Matrix

• In WebGL, the model-view matrix is used to

– Position the camera• Can be done by rotations and translations but is often easier to

use the lookAt function in MV.js

– Build models of objects and put them in world-space • The projection matrix is used to define the view volume and to

select a camera lens

• Although these matrices are no longer part of the OpenGL state, it is usually a good strategy to create them in our own applications

q = P*MV*p



Rotation, Translation, Scaling

var r = rotate(theta, vx, vy, vz)m = mult(m, r);

var s = scale( sx, sy, sz)var t = translate(dx, dy, dz);m = mult(s, t);

var m = mat4();

Create an identity matrix [note, MV.js initializes to identity]:

Multiply on right by rotation matrix of theta in degrees where (vx, vy, vz) define axis of rotation

Also have rotateX, rotateY, rotateZDo same with translation and scaling:


Example• Rotation about z axis by 30 degrees with a fixed point of (1.0, 2.0, 3.0)

• Remember that last matrix specified in the program is the first applied

var m = mult(translate(1.0, 2.0, 3.0), rotate(30.0, 0.0, 0.0, 1.0));

m = mult(m, translate(-1.0, -2.0, -3.0));




Arbitrary Matrices• Can load and multiply by matrices defined in the

application program• Matrices are stored as one dimensional array of 16

elements by MV.js but can be treated as 4 x 4 matrices in row major order

• OpenGL wants column major data• gl.uniformMatrix4f has a parameter for automatic

transpose but it must be set to false.• flatten function converts to column major order which is

required by WebGL functions


Matrix Stacks• In many situations we want to save

transformation matrices for use later– Traversing hierarchical data structures (Chapter 9)

• Pre 3.1 OpenGL maintained stacks for each type of matrix

• Easy to create the same functionality in JS– push and pop are part of Array object

var stack = [ ]

stack.push(modelViewMatrix);

modelViewMatrix = stack.pop();


Wk4 Transf 3D.ppt - University of Utah College of Engineeringcs4600/lectures/Wk4_Transf_3D.pdf ·...

Documents

Transcript of Wk4 Transf 3D.ppt - University of Utah College of Engineeringcs4600/lectures/Wk4_Transf_3D.pdf ·...