Realtime 3D Computer Graphics & Virtual Reality · Basic Graphical Mathematics n Three views on...

Realtime 3D Computer Graphics & Virtual Reality

Math

Basic Graphical Mathematics

The basic math for computer graphics deals with

n scalars– real numbers

n vectors– direction and magnitude

n matrices– 2 dimensional array of numbers

n points – are positions in space (e.g. x, y, z) measured w.r.t. a

coordinate frame

Basic Graphical Mathematicsn Three views on related concepts

1. The mathematical viewn Scalars, points, vectors as member of mathematical setsn Variety of abstract spaces and axioms for representing and

manipulating these setsn (Linear) vector space, affine space, Euclidean space

2. The geometric viewn Mapping between the mathematical model and our perceived

concept of spacen Includes points as locations in space n Has referential properties (deixis)

3. Computer science viewn See concepts as abstract data types (ADTs), a set of

operations on datan use of geometric ADTs for points, vectors,…

Vectors

n A vector is a directed line segmentn Vectors have a direction and magnitude

– Vectors do not have a position!

n One view is as a displacement between two points

),,( 121212

12

zzyyxxVPPV

−−−=−=

Vector Componentsn All vectors can be broken down into their

dimensional components vectorsn 3D Vector:

n 2D Vector:

n Magnitude is “length” of a vector:

),,( zyx VVVV =

Vy

Vx

V

222|| zyx VVVV ++=

Mathematical Vector Spaces

n (Linear) Vector Space– Scalars, Vectors– Scalar-Vector Multiplication– Vector-Vector Addition– Vector-Vector Multiplication

n Dot Product (Vector-Vector Multiplication to Scalar)n Cross Product (Vector-Vector Multiplication to Vector)

n Affine Space– Scalars, Vectors, Points– Vector-Point Addition

Scalar-Vector Multiplication

–Multiply vector V by scalar a:

),,( zyx aVaVaVaV =

Vector-Vector Addition

n Add vectors V and W:

),,( zzyyxx WVWVWVWVZ

+++=+=

V Z

WV

W

Vector-Point Addition

n Add vector V to P1:

zzz

yyy

xxx

VPP

VPP

VPPVPP

+=

+=+=

+=

12

12

12

12

P1

P2V

Vector-Vector Multiplication -Scalar Product

n (aka) Dot Productn Vector–vector to Scalar Multiplicationn Product of two parallel components of the two

vectorsn Vector–vector multiplication producing a scalar

θcosvuvu =⋅

θcosv

v uθ

Vector-Vector Multiplication -Cross Product

n Vector–vector to vector multiplicationn Produces normal vector

– Perpendicular to plane formed by the two vectors– Magnitude equal to area of parallelogram formed by the two

vectors– U is unit vector (magnitude 1) that is perpendicular to plane

θsin2121 VVuVV =×1V

2V21 VV ×

u

Vector-Vector Multiplication continued

n Formulas for calculation of dot and cross products in 3D Cartesian space (i.e. orthonormal base vectors):

– V . U = ux vx + uy vy + uz vz

– V x U = (uy vz - uz vy, uz vx - ux vz, , ux vy - uy vz )

Matrixes

n Rectangular Array of Quantitiesn Row (m) by Column (n)

aa aa a aa a a

A

3n3231

2n2221

1n1211

………

=

Scalar Multiplication of a Matrix

a a a

a a a

a a a

A

333231

232221

131211

=

ααααααααα

α

Matrix Addition

n Defined only for matrixes of the same number of rows m and columns n

ba ba ba

ba ba ba

ba ba ba

BA

333332323131

232322222121

131312121111

+++++++++

=+

Matrix Addition Properties

nCommutative–A+B = B+A

nAssociative–A+(B+C) = (A+B)+C

Matrix Multiplication

n Let A be a m x n matrixn Let B be a n x q matrixn There for C is a m x q matrix where:

1

∑=

=⇒=n

kkjikij bacABC

Matrix Multiplication Example

−−=

+−+−++

−+−+=

−

−

28223826

43

4*82*23*81*24*72*53*71*54*12*03*11*0

4321

827510

n Properties:– Associative: A(BC) = (AB)C– Not Commutative: AB does not equal BA

Matrix Transpose

n AT is interchange of rows and columnsn (AB)T = BT AT

[ ]

=

CBA

CBA T

=

fcebda

fedcba T

Identity Matrix

n Square Matrix I with 1’s along the diagonal and 0’s elsewhere

n Multiplication of Identify matrix has no effect: I.e. a=Ia

1 0 00 1 00 0 1

=I

Inverse Matrix

n Suppose we have a matrix multiplication of a square matrix A such that:– q = Ap

n Do we have a square matrix B such that:– p = Bq– p=BAp=Ip=p => BA=I

n If so, B is the inverse of A and A is nonsingular

n The inverse of A is A-1

Vector Representation

n Any 3D vector can be represented by V=(Vx, Vy, Vz)

Which is equivalent to: v= vx+ vy+ vz

n Any vector can be represented by scaling another vector with the same direction: V=aVst

Vector Representation Continued

n Any vector can be represented by a set of scaling values or displacements along with three vectors along the coordinate frame axis’s:

332211 vvvw δδδ ++=

Z

X

Y

v1

v2

wδ2

δ1

Vector Representation in Matrix Form

=

3

2

1

vvv

aw T

=

3

2

1

δδδ

aWhere

Is equivalent to:

332211 vvvw δδδ ++=

Planes

n A “flat” surface in 3D spacen Minimum of three points

needed to define a planen Three points define a plane

– Unless they lie in a straight line

n Four or more points may or may not lie in the same plane

Z

X

Y

Coordinate Systems

n Definition– Origin– Three Axes (x, y, z)

n Right-Hand Coordinate Systems– Wrap right hand from x axis to y axis– Thumb then points in the positive z

direction

Frame

n Origin Point P0

n Basis Vectors v1, v2, v3

n Thus– Unique Vectors

– Unique Points332211 vavavw ++= α

3322110 vnvnvnPP +++=

Familiar Frame

=

=

=

=

=

100

,010

,001

v

and )0,0,0(P where

321

0

vv

zyx

a

Further Representation of Points and Vectors

n How do we distinguish between points and vectors represented as:

3210 zv yvxvPP where +++=

=

zyx

P

332211

3

2

1

v vv w where δδδδδδ

++=

=a

Homogeneous representation of vectors and points

n Use of 4x1 matrixes given a frame ( )0321 ,,, Pvvv

( )

=<=>+++=

1

,,,3

2

1

03210332211 ααα

ααα PvvvPPvvvP

( )

=<=>++=

0

,,,3

2

1

0321312111 δδδ

δδδ Pvvvwvvvw

objects of interest (points, vectors)

reference frame

Homogeneous representation arithmetic

( ) )1,,,()0,,,(1,,, 312111321321 βαβαβαβββααα +++=+

( ) )0,,,()0,,,(0,,, 312111321321 βαβαβαβββααα +++=+

( ) )0,,,()1,,,(1,,, 312111321321 βαβαβαβββααα −−−=−The difference of two points is a vector:

The sum of a point and a vector is a point:

The sum of a vector and a vector is a vector:

)0,,,()0,,,(* 321321 ββββββ aaaa =Scaling a vector:

Linear combination of vectors is valid

Matrix / Vector Multiplication

=

4

3

2

1

p

pp

p

p

′′′′

=′

4

3

2

1

p

pp

p

p

=

+++=′+++=′+++=′

+++=′

41

31

21

11

44434241

34333231

24232221

14131211

414431432122114141

413431332122113131

412431232122112121

411431132112111111

p

pp

p

aaaaaaaaaaaaaaaa

papapapap

papapapap

papapapap

papapapap

Mpp =′

=

44434241

34333231

24232221

14131211

aaaaaaaaaaaaaaaa

M

2D Transformations

Transformations

n What are they?– changing something to something else via rules– mathematics: mapping between values in a

domain set and a range set (function/relation)– geometric: translate, rotate, scale, shear,…

n Why are they important to graphics?– moving objects on screen / in space– mapping from model space to screen space– specifying parent/child relationships– …

Coordinate Systems and Transformations

n Steps in Forming an Image– specify geometry (world coordinates)– specify camera (camera coordinates)– project (window coordinates)– map to viewport (screen coordinates)

n Each step uses transformationsn Every transformation is equivalent to a

change in coordinate systems (frames)

Affine mapping

n Affine = similarn Set of mappings (continuous, bijective, invertible)

n Invariants– straight lines, parallesism, fraction ratios

n Representation– Combination of a linear mapping L and a translation:

– is a 3x3 matrix– is a translation vector

n Linear mappings are rotations, scalings and shears

tpLpM a

rrr+=)(

Ltr

33: VVM a →

Translations

n Moving an object is called a translation. We translate a point by adding to the x and y coordinates, respectively, the amount the point should be shifted in the x and y directions. We translate an object by translating each vertex in the object.

xnew = xold + tx; ynew = yold + ty

ty

tx

Scaling

n Changing the size of an object is called a scale. We scale an object by scaling the x and y coordinates of each vertex in the object.

sx=wnew/wold sy=hnew/hold

xnew = sxxold ynew = syyold

wold wnew

hold

hnew

Rotation about the origin

n To rotate a line or polygon, we must rotate each of its vertices.

n We want to rotate point (x1,y1) to point (x2,y2) through angle B

From the illustration we know that:sin (A + B) = y2/r cos (A + B) = x2/rsin A = y1/r cos A = x1/r

From the double angle formulas we know that:sin (A + B) = sinA cosB + cosA sinB

x-axis

(x1,y1)

(x2,y2)

A

Br

(0,0)

y-axis

Substituting: y2/r = (y1/r)cosB + (x1/r)sinBTherefore: y2 = y1cosB + x1sinBWe have x2 = x1cosB - y1sinB

y2 = x1sinB + y1cosB

Transformations as matrices

Translation:xnew = xold + tx

ynew = yold + ty

Scale:xnew = sxxold

ynew = syyold

Rotation:x2 = x1cosθ - y1sin θy2 = x1sin θ + y1cos θ

⋅⋅

=

ysxs

yx

ss

y

x

y

x

00

+−

=

−θθθθ

θθθθ

cossinsincos

cossinsincos

yxyx

yx

++

=

+

y

x

y

x

tytx

yx

tt

Homogeneous Coordinatesn Problem:

– Specifying a transformation as a combination of a Matrix and a vector is unhandy (in terms of equal operations).

n Solution: – Representation of points as homogeneous coordinates

n is called the homogenizing element

→

→

wywx

wyx

andyx

yx

//

1

→

→

wzwywx

wzyx

andzyx

zyx

///

1

Homogeneous Coordinates

n In order to represent a translation as a matrix multiplication operation we use 3 x 3 matrices and pad our points to become 3 x 1 matrices. This coordinate system (using three values to represent a 2D point) is called homogeneous coordinates.

=

1),( y

xP yx

=

1000000

, y

x

yx ss

S

−=

1000cossin0sincos

θθθθ

θR

=

1001001

, y

x

yx tt

T

Homogeneous Coordinates

n Homogeneous coordinates differentiate between points and directions.

n A direction is defined as the difference between two points.

Composite Transformations

Suppose we wished to perform multiple transformations on a point:

P2 = T3,1P1

P3 = S2, 2P2

P4 = R30P3

M = R30S2,2T3,1

P4 = MP1

Remember:• Matrix multiplication is associative, not commutative!• Transform matrices must be pre-multiplied• The first transformation you want to perform will be at the farright, just before the point

Composite Transformations -Scaling

Given our three basic transformations we can create other transformations.

Scaling with a fixed pointA problem with the scale transformation is that it also moves the

object being scaled.

Scale a line between (2, 1) (4,1) to twice its length.

0 1 2 3 4 5 6 7 8 9 10

Before After

0 1 2 3 4 5 6 7 8 9 10

Composite Transforms -Scaling (cont.)

n If we scale a line between (0,0) & (2,0) to twice its length, the left-hand endpoint does not move.

(0,0) is known as a fixed point for the basic scaling transformation. We can use composite transformations to create a scale transformation with different fixed points.

0 1 2 3 4 5 6 7 8 9 10

Before After

0 1 2 3 4 5 6 7 8 9 10

Fixed Point Scaling

Scale by 2 with fixed point = (2,1)n Translate the point (2,1) to the originn Scale by 2n Translate origin to point (2,1)

0 1 2 3 4 5 6 7 8 9 10

0 1 2 3 4 5 6 7 8 9 10

Before

After

CTST

−=

−−

−−

100010202

100110201

100010002

100110201

1,21,21,2

2 0 −20 1 00 0 1

C

211

=211

=

−

11

6

11

4

100010

202

C

Rotation about a Fixed Point

Rotation Of θ Degrees About Point (x,y)n Translate (x,y) to originn Rotaten Translate origin to (x,y)

(x,y) (x,y)

yxyx T

yx

RT

yx

C

−−

−−

−

=

,,

1001001

1000cossin0sincos

1001001

θ

θθθθ

Shears

Original Data y Shear x Shear

10001001

a

10001001 b

Reflections

Reflection about the y-axis Reflection about the x-axis

−

100010001

−

100010001

More Reflections

Reflection about the origin Reflection about the line y=x

−

−

100010001 ?

?

−

−

1000270cos270sin0270sin270cos

100010001

=

−

−

100001010

100001010

100010001

Transformations as a change in coordinate system

n All transformations we have looked at involve transforming points in a fixed coordinate system (CS).

n Can also think of them as a transformation of the CS itself

Transforming the CS -examples

Translate(4,4)

Rotate(180°)

n Objects often defined in a “natural” or “convenient” CS

n To draw objects transformed by T, we could:– Transform each vertex by T, then draw– Or, draw vertices in a transformed CS

Why transform the CS?

(2,2)

Drawing in transformed CS

n Tell system once how to draw the object, then draw in a transformed CS to transform the object

House drawn in a CS that’s been translated, rotated, and scaled

M = Sx,y Rd Tx,y

Mapping example

Point P is at (0,0) in the transformed CS (CS2). Where is it in CS1?

Answer: (4,4)

*Note: (4,4) = T4,4 P

Translate(4,4)P

n Given:– The vertices of an object in CS2

– A transformation matrix M that transforms CS1 to CS2

n What are the coordinates of the object’s vertices in CS1?

Mapping rule

n In general, if CS1 is transformed by a matrix M to form CS2, a point P in CS2 is represented by MP in CS1

Another example

Translate(4,4), then Scale(0.5, 0.5)

Where is P in CS3? (2,2)Where is P in CS2? S0.5,0.5 (2,2) = (1,1)Where is P in CS1? T4,4 (1,1) = (5,5)

*Note: to go directly from CS3 to CS1 we can calculate T4,4 S0.5,0.5 (2,2) = (5,5)

P

General mapping rule

n If CS1 is transformed consecutively by M1, M2, …, Mn to form CSn+1, then a point P in CSn+1 is represented by M1 M2 … Mn P in CS1.

n To form the composite transformation between CSs, you postmultiply each successive transformation matrix if you are using column vectors!!!

Transposes and concatenation

=

321321321

cccbbbaaa

M

=

333222111

cbacbacba

M T TTTT MMpp 21' =

pMMp 12' =

3D Transformations

– each vertex is a column vector

– w is usually 1.0– all operations are matrix multiplications– directions (directed line segments) can be

represented with w = 0.0

Homogeneous Coordinates

=

wzyx

vr

3D Transformations

n A vertex is transformed by 4 x 4 matrices– all affine operations are matrix multiplications– all matrices are stored column-major in OpenGL– matrices are always post-multiplied

– product of matrix and vector is vvM

=

151173

141062

13951

12840

mmmmmmmmmmmmmmmm

M

Transformations

n Transformations can be thought of as changing an object within a frame or changing frames

Transformation Math

n Let p be a vector or point in homogeneous coordinates (4x1 Column Matrix)

n Let M be a 4x4 Transformation Matrix

Mpp =′

Matrix / Vector Multiplication

=

4

3

2

1

p

pp

p

p

′′′′

=′

4

3

2

1

p

pp

p

p

=

+++=′+++=′+++=′

+++=′

41

31

21

11

44434241

34333231

24232221

14131211

414431432122114141

413431332122113131

412431232122112121

411431132112111111

p

pp

p

aaaaaaaaaaaaaaaa

papapapap

papapapap

papapapap

papapapap

Mpp =′

=

44434241

34333231

24232221

14131211

aaaaaaaaaaaaaaaa

M

Translation Math

=

′′′

=′

=

1

,

1

,

1z

y

x

dzyx

pzyx

pααα

z

y

x

zz

yyxx

α

αα

+=′

+=′+=′

==′

1000100010001

z

Y

x

TwhereTppααα

),,( zyxT ααα

),,(),,(1zyxzyx TT αααααα −−−=−

Can be reversed by:

n Move object some distance along a displacement vector δ

n Rigid-Body Transformation (object does not change shape)

Scalingn Change the size by a

given valuen Non-Rigid Body

Transformation zz

yyxx

z

y

x

β

ββ

=′

=′=′

==′

1000000000000

z

y

x

SwhereSppβ

ββ

),,( zyxS βββCan be reversed by:

)/1,/1,/1(),,(1zyxzyx SS ββββββ =−

Rotation about the main axes

n Rotate the object about an axisn Rigid-Body Transformation

(object does not change shape)

The right-hand rule to determine a positive/negative rotation angle around

(a) the X axis,

(b) (b) the Y axis, and

(c) (c) the Z axis

Rotation Math 1

zzyxyyxx

=′−=′−=′

θθθθ

cossinsincosn Rotation is done about

a given axisn Example, Rotation

around the Z axis is:

−

==

=′

1000010000cossin00sincos

)(θθθθ

θzz

z

RR

wherepRp

Rotation Math 3n Rotation about the x axis:

−

==

=′

10000cossin00sincos00001

)(θθθθ

θxx

x

RR

wherepRp

−==

=′

10000cos0sin00100sin0cos

)(θθ

θθ

θyy

y

RR

wherepRpn Rotation about the y axis:

Rotation Properties

n Rotation order is very important!n Can be reversed by:

)()(1 θθ −=− RR

Shear

n Change shape of object in an arbitrary direction

n Shear the object in the x direction by θ zz

yyyxx

=′=′

+=′ θcot

=

=′

10000100001000cot1

)(

θ

θx

x

H

wherepHp

)()(1 θθ −=−xx HH

Can be reversed by:

Topic >> Use of Transformation

Use of Basic Transformation to Perform Complex Transforms

n Transforms may be done in sequencen Example to rotate an object about a

point along the z axis:– Translate Object such that point is on the

origin– Rotate Object around the z axis– Translate Object such that the point is

back to its original location

Example

n Rotation of a cube about a point & axis

Transformation Concatenation

CBApqApBCq =⇒= ))(((

MpqCBAM

==

n Please Note Reversal of Matrixes!ABCpqassamenotisCBApq ==

A B Cp q

Pipeline Transformation

Mp q

ABC

3D Transformations in OpenGL

OpenGL Issues

n OpenGL is a state machinen Vertices are transformed using the CTM

(“current transformation matrix”):CTM

Model-View ProjectionVertices in

Object or WorldCoordinates

Vertices inViewpoint

Coordinates

Transformations in OpenGL

n OpenGL makes it easy to do transformations to the CS, not the object

n Sequence of operations:– Set up a routine to draw the object in its “base” CS– Call transformation routines to transform the CS– Object drawn in transformed CS

Transformations in OpenGL

n Modelingn Viewing

– orient camera– projection

n Animationn Map to screen

OpenGL Continued

n Steps:– Select Current Matrix

n glMatrixMode(GL_MODELVIEW)n or: glMatrixMode(GL_PROJECTION)n or: glMatrixMode(GL_TEXTURE)

– Set Identity – glLoadIdentity()– In reverse order (last loaded is first

transformation)define the transformation matrices

– Draw object

OpenGL Continued

n Two forms of transformation matrices:n Predefined types (Multiply Current Matrix)

– glTranslated, glTranslatef– glRotated, glRotatef– glScaled, glScalef

n Build your own matrix– glLoadMatrix – Replace current matrix– glMultMatrix – Multiple current matrix with new

matrix

OpenGL Matrix

n void glLoadMatrixd(GLdouble *m) void glLoadMatrixf(GLfloat *m)

n glLoadMatrix replaces the current matrix with the one specified in m.

n m points to a 4x4 matrix of single- or double-precision floating-point values stored in column-major order. That is, the matrix is stored as follows:

151173

141062

13951

12840

aaaaaaaaaaaaaaaa

OpenGL transformation example

drawHouse(){glBegin(GL_LINE_LOOP);

glVertex2i(…);glVertex2i(…);…

glEnd();}

drawTransformedHouse(){glMatrixMode(GL_MODELVIEW);glTranslated(4.0, 4.0, 0.0);glScaled(0.5, 0.5, 1.0);drawHouse();

}

Draws basic houseDraws transformed house

(push for example car transform)

Notes on OpenGL codeglMatrixMode(GL_MODELVIEW);n Which “current transformation matrix” am I modifying?

glTranslated(4.0, 4.0, 0.0);glScaled(0.5, 0.5, 1.0);n Setting up the current tranformation matrix - the next vertices

specified will be transformed by T4,4 S0.5,0.5 in order to obtain their values in the original CS.

n Note three values for each - all OpenGL transformations are 3Dn Also glRotated(degrees, vectx, vecty, vectz) where

vect is the vector about which the rotation is done - for 2D, vect= (0, 0, 1)

Composite transformations in OpenGL

n concept of matrix stacksn supports hierarchical

representationsn pushmatrix, popmatrixn loadmatrixn multmatrix

OpenGL matrix stack example

room

table rug

chair1 chair2

M1 M2

M4M3

M0

M0

M0*M1

M0*M1*M4

glLoadMatrixf(m0);glPushMatrix();glMultMatrixf(m1);glPushMatrix();glMultMatrixf(m4);render chair2;glPopMatrix();glMultMatrixf(m3);render chair1;glPopMatrix();render table;glPopMatrix();render room;glPushMatrix();glMultMatrixf(m2);render rug;

OpenGL Matrix Management

n Matrix Stack (glPushMatrix(), glPopMatrix())– Push a copy of the current matrix onto the stack

n Saves a copy of the current matrix but does not remove current matrix

– Pop the matrix off the stack into the current matrixn Replaces current matrix

n Standard Code:

glPushMatrix();glTranslatef(…);glRotatef(…);glScalef(…);/* Draw Object */glPopMatrix();

Specifying Transformations

n Programmer has two styles of specifying transformations– specify matrices (glLoadMatrix, glMultMatrix)– specify operation (glRotate, glOrtho)

n Programmer does not have to remember the exact matrices– check appendix of Red Book (Programming Guide)

Programming Transformations

n Prior to rendering, view, locate, and orient:– eye/camera position– 3D geometry

n Manage the matrices– including matrix stack

n Combine (composite) transformations

vertex

ModelviewMatrix

ProjectionMatrix

PerspectiveDivision

ViewportTransform

Modelview

Modelview

Projection

lll

object eye clip normalizeddevice

window

n other calculations here– material è color– shade model (flat)– polygon rendering mode– polygon culling– clipping

TransformationPipeline CPU DL

Poly. PerVertex

Raster Frag FB

Pixel

Texture

Matrix Operations

n Specify current matrix stackglMatrixMode( GL_MODELVIEW or GL_PROJECTION )

n Other Matrix or stack operationsglLoadIdentity() glPushMatrix()glPopMatrix()

n Viewport– usually same as window size– viewport aspect ratio should be same as projection

transformation or resulting image may be distortedglViewport( x, y, width, height )

Object Representation vsWorld Representation

n Object Coordinates (aka local coordinates)n World Coordinatesn Manipulation of Objects in Worldn Object Templates, Instances, Duplicationn Object Hierarchies

– Object Coordinate Hierarchies

n Not all model formats support object coordinates

n Role of Object-Oriented Programming

Example of Transformation Use

n Planet orbiting a sun:n Each Time Tick:

– Clear Transform– Set Rotation Matrix– Set Transformation Matrix– Draw Object

Transformation examples

n Some tutor examples using transformations and the transformation stack

push for example