video game rendering mathematics zack booth simpson

Video Game Video Game Rendering Rendering

MathematicsMathematics

Zack Booth SimpsonZack Booth Simpson

How to we model a body?How to we model a body?

► Break each object up Break each object up into lots of triangles. into lots of triangles. Each “face” is Each “face” is connected to a mesh connected to a mesh of “vertices”of “vertices”

► Make each part of a Make each part of a “body” rigid“body” rigid

► Connect the rigid Connect the rigid parts together with parts together with jointsjoints

► Let the joints rotateLet the joints rotate From unrealtechnology.comFrom unrealtechnology.com

Rendering MeshesRendering Meshes

► Each vertex is positioned byEach vertex is positioned byan artist. The programmers getan artist. The programmers getthis vertex list and tell thethis vertex list and tell thecomputer to connect the dots.computer to connect the dots.

► But the vertices are in 3D?!But the vertices are in 3D?!► How do we get from a 3D model to a 2D How do we get from a 3D model to a 2D

view on the screen?view on the screen?► Create a virtual cameraCreate a virtual camera

Pretend CamerasPretend Cameras

► What does the What does the camera see of this camera see of this box?box?

► Two problems to Two problems to solve:solve: Relative position and Relative position and

orientation of the box orientation of the box versus the cameraversus the camera

The perspective The perspective distortiondistortion

Perspective:Perspective:Things further away appear smallerThings further away appear smaller

ab

c d

Perspective projection:a is to c+d as b is to d

a/(c+d) = b/dda/(c+d) = b

Create a pretend “projection plane” that represents the computer screen

ExerciseExercise: The : The PerspectometerPerspectometer

Answers: The Answers: The PerspectometerPerspectometer

► The length of the line on the board is 3 feet.

► The units are feet, because the distance from your eye to the board was measured in feet.

► Note that the length of your arm and the apparent height of the line were both measured in inches.

Position and OrientationPosition and Orientation

► Meet “vector”Meet “vector” From Latin “vehere” = From Latin “vehere” =

“to carry” same root as “to carry” same root as “vehicle”“vehicle”

► Each object in the Each object in the world is placed and world is placed and oriented.oriented.

► Vectors let us get Vectors let us get from place to place from place to place and orient and orient ourselves.ourselves.

Where are the vertices of the Where are the vertices of the box from the point of view of box from the point of view of the camera?the camera?

(Never mind perspective for (Never mind perspective for now)now)

Translate = Move without Translate = Move without rotaterotate

► Relative position is Relative position is easyeasy Vector addition and Vector addition and

subtraction!subtraction!

► a + b - c = da + b - c = d► d is relative to the d is relative to the

camera… we saycamera… we say“d is the position of “d is the position of the vertex in camera the vertex in camera space”space”

a

b

c

d

RotationRotation► Now things get Now things get

harderharder► From the camera’s From the camera’s

point of view the point of view the box is rotatedbox is rotated

► From the box’s From the box’s point of view the point of view the camera is rotatedcamera is rotated

► Coping with differing points of view is Coping with differing points of view is always a challenge!always a challenge!

I am master ruler of the universe. All things are measured against me

Some things might be half my length

Other things might be twice my length, but I’m the only one who is the

right size!

Who said that?! You can’t be the true ruler for I am the true

ruler of this domain!

Who’s point of view is right?Who’s point of view is right?

I’m right!

I’m right!

Both / Neither side is rightBoth / Neither side is right

I’m right!

I’m right!

► We need a way We need a way to measure each to measure each vector using the vector using the other one as the other one as the unit ruler.unit ruler.

► In other words: In other words: we need tools to we need tools to convert from one convert from one point of view to point of view to the other.the other.

ProjectionProjection

► a/b from b’s perspective; b/a from a’s perspectivea/b from b’s perspective; b/a from a’s perspective

► Remember always:Remember always:“a/b” means “measure a against b” or“a/b” means “measure a against b” or“using b as the ruler, how long is a?”“using b as the ruler, how long is a?”

► It is easy to forget/get confused about this… I wish It is easy to forget/get confused about this… I wish a teacher had beaten this into my head with a stick!a teacher had beaten this into my head with a stick!

ab

Oh boy, here we go again…Oh boy, here we go again…

I point in the true direction

No, I point in the true direction

Projection from different Projection from different directionsdirections

► Each side can be Each side can be projectedprojected onto the other. onto the other.

a

b

a

b

b from the point of view of a

a from the point of view of b

► As As aa is rotated away from is rotated away from bb, the , the projectionprojection diminishes until at 90 degrees it is zerodiminishes until at 90 degrees it is zero

► Perpendicular vectors can not measure each Perpendicular vectors can not measure each other; they have zero relative projections!other; they have zero relative projections!

► We don’t want no stinking cosines – they’re a pain!We don’t want no stinking cosines – they’re a pain!► Here’s a great trick…Here’s a great trick…

Projection with Projection with CosineCosine

a

b

θFrom b’s

point of view:a*cosθ

Ever seen this lovely proof of Ever seen this lovely proof of the Pythagorean theorem?the Pythagorean theorem?

xy

z

y2

x2

z2

z*z = x*x + y*y

Rectangular Version of the Pythagorean Rectangular Version of the Pythagorean TheoremTheorem

► Cool! We can compute the projection with just two Cool! We can compute the projection with just two multiplies and add! Games have multiplies and add! Games have millions millions of vertices of vertices so this is very important! Considering speed is the so this is very important! Considering speed is the difference between mathematics and computation!difference between mathematics and computation!

Dot product graphic removed pending Dot product graphic removed pending publicationpublication

► TADA! p can be computed without angles or TADA! p can be computed without angles or cosines!cosines!

Projection with the dot productProjection with the dot productfrom b’s point of viewfrom b’s point of view

a

b

θFrom b’s

point of view:a*cosθ

a*b*cosθ = axbx+ayby = a.bp = a*cosθ

b*p = b*(a*cosθ)1*p = a.bp = a.b

More Dot Product GoodnessMore Dot Product Goodness

► Dot product sign tells you Dot product sign tells you about the relationship of about the relationship of the vectors.the vectors. Same general directionSame general direction OrthogonalOrthogonal Opposite directionsOpposite directions

Positive

Zero

Negative

Negative dot product between camera and surface normal implies visibility

ExerciseExercise: Dot Products: Dot Products

Answers: Dot ProductsAnswers: Dot Products

positive. isproduct dot thebecause No,

? is vector camera theif visible vector normal with face theIs

119216.00784.0)96.0((0.28) :Check

0.96

0.28 :length sit'by divide tohave You would

length?unit havebut

, asdirection same in the be r wouldWhat vecto

4.05

2

25

10

: onto of projection ofLength

zero.not isproduct dot theNo,

?orthogonal and Are

102414)24)(1()7)(2(

25625247 so 24

7

....236.251)2( so 1

2

22

22

22

ba

b

b

b

baba

ba

ba

bb

aa

negative.not isproduct dot thebecause No,

? is vector camera theif visible vector normal with face theIs

1136.064.0(-0.6)(0.8) :Check

0.6-

0.8 :length itsby divide tohave You would

length?unit havebut

, asdirection same in the be r wouldWhat vecto

!orthogonal re they'know wesince sense, makes which ,010

0

: onto of projection ofLength

length) positive have and vector,zero the

not are vectors(but the zero isproduct dot their because Yes,

?orthogonal and Are

02424)6)(4()8)(3(

10100)6(8 so 6

8

52543 so 4

3

22

22

22

ba

b

b

b

baba

ba

ba

bb

aa

Back to RotationsBack to Rotations► Ok, so now we can project a vector onto Ok, so now we can project a vector onto

anotheranother► What’s this got to do with rotations again?What’s this got to do with rotations again?► Represent the camera’s POV as aligned Represent the camera’s POV as aligned

vectors. Call these “basis vectors” as in vectors. Call these “basis vectors” as in “base”“base”

► The projection onto theseThe projection onto thesevectors gives us the rotationvectors gives us the rotationwe want! i.e. the boxwe want! i.e. the boxfrom the POV of camerafrom the POV of camera

Basis Vector DemoBasis Vector Demo

► Run demo appRun demo app► Skew, rotation, Skew, rotation,

scale, reflection, scale, reflection, projectionprojection

► Orthogonal basis Orthogonal basis vectors create a vectors create a rotation or rotation or reflectionreflection

The MatrixThe Matrix► A cool way to organize A cool way to organize

basis vectors: basis vectors: The MatrixThe Matrix► The default basis vectors The default basis vectors

are one unit in each are one unit in each direction.direction.

► Write each basis vector Write each basis vector as a column in the matrixas a column in the matrix

► Write a block of numbers Write a block of numbers but but visualize visualize vectors!vectors!

► The matrix encodes any The matrix encodes any “linear” transformation“linear” transformation

+2

+1

-1

+1

2 units

1 unit

1 unit

The The Power of Power of

The The MatrixMatrix

+2

+1

-1

+1

+2

+1

+2

+1+2

-1

+1+1

+2

+1+2 +1

+4

+2

-1

+1+

+3

+3

Original space Transformed space

The Matrix as a TeleporterThe Matrix as a Teleporter► The matrix is a “teleportation machine” which The matrix is a “teleportation machine” which

moves points from one space to anothermoves points from one space to another

Vertices in one space

Vertices in new space

Matrix

Matrix

2 x 2 2 x 82 x 8

Inner numbers are same = compatible

2 x 2 2 x 8

Outer numbers are dimension of result

A Teleporter inside a A Teleporter inside a Teleporter?!Teleporter?!

► What happens if you put a What happens if you put a teleporter inside a teleporter inside a teleporter?teleporter?

► Compounding Compounding teleportations!teleportations!

Vertices in hand space

Vertices in world space

M3

M1

M2M3M2

Verticies in lower arm

space

Verticies in upper arm

space

M1

World

Matrix ConcatenationMatrix Concatenation► Map the basis vectors of one space into the anotherMap the basis vectors of one space into the another

+3

+2

+1

+2

+1

+2

-1

+1

+3

+2+1

+1

+2+2

+3

+2-1

+1

+2+1

+1

+2

-1

+1

Matrix ConcatenationMatrix ConcatenationUsing Dot productUsing Dot product

+3

+2

+1

+2

+1

+2

-1

+1

+5

Matrix ConcatenationMatrix ConcatenationUsing Dot productUsing Dot product

+3

+2

+1

+2

+1

+2

-1

+1

+5 -2

Matrix ConcatenationMatrix ConcatenationUsing Dot productUsing Dot product

+3

+2

+1

+2

+1

+2

-1

+1

+5 -2

+6

Matrix ConcatenationMatrix ConcatenationUsing Dot productUsing Dot product

+3

+2

+1

+2

+1

+2

-1

+1

+5 -2

+6 0

ExerciseExercise: Matrix Arithmetic: Matrix Arithmetic

Answers: Matrix ArithmeticAnswers: Matrix Arithmetic

1

10

4

3

11

12

1111

5215

32104

1111

2300

1020

100

512

423

Rotate, Scale, Rotate, Scale, and and Translate?Translate?

► So now we can So now we can rotate, scale, etc. rotate, scale, etc. but what ever but what ever happened to happened to translations?translations?

► The ugly wayThe ugly way► Would be nice to Would be nice to

matrixify™ it!matrixify™ it!Rot / Scale

Translate

v’ = Mv + t

Vertex in camera space

Stuffin’ the MatrixStuffin’ the Matrix

v’ = Mv + t

0 0 1 11

► Make up a pretend dimension for the Make up a pretend dimension for the translationtranslation

► Hardwire “1” unit of this extra dimension in Hardwire “1” unit of this extra dimension in all vertices to be transformed. all vertices to be transformed.

► Where is this extra dimension exactly?Where is this extra dimension exactly?► Who cares! It works! Math is so coolWho cares! It works! Math is so cool

Moving to 3DMoving to 3D

► Just add a dimension Just add a dimension again.again.

► Now matrices are 4x4Now matrices are 4x4► Right-hand ruleRight-hand rule

From math.montana.eduFrom math.montana.edu

x

y

z

0 0 1 11 0

v’ = Mv + t

ExerciseExercise: Matrix Transforms: Matrix Transforms

Answers: Matrix Answers: Matrix TransformationsTransformations

5

5

-5

-5 10 15-10

GameGame: Matrix Mine Sweeper: Matrix Mine Sweeper

► There’s a bomb in a houseThere’s a bomb in a house► There’s two roundsThere’s two rounds► You must move the bomb with one of the You must move the bomb with one of the

three given matrices in each roundthree given matrices in each round► You can not go off the mapYou can not go off the map► Plan ahead!!Plan ahead!!

GameGame: Matrix Mine Sweeper: Matrix Mine Sweeper

► There’s a bomb in a houseThere’s a bomb in a house► There’s two roundsThere’s two rounds► You must move the bomb with one of the You must move the bomb with one of the

three given matrices in each roundthree given matrices in each round► You can not go off the mapYou can not go off the map► Plan ahead!!Plan ahead!!

GO!GO!

Answers: Matrix Mine Answers: Matrix Mine SweeperSweeperRound 1Round 1

5

5

-5

-5 10 15-10

1

3

2

GameGame: Matrix Mine Sweeper: Matrix Mine Sweeper

Round 2. GO!!Round 2. GO!!

Answers: Matrix Mine Answers: Matrix Mine SweeperSweeperRound 2Round 2

5

5

-5

-5 10 15-10

3

3

2

1

1

2

3

Answers: Matrix Mine Answers: Matrix Mine SweeperSweeper

Bonus Round!!Bonus Round!!► If you are outside a building, you’re a hero!If you are outside a building, you’re a hero!

Answers: Matrix Mine Answers: Matrix Mine SweeperSweeper

Bonus Round!!Bonus Round!!► If you are outside a building, you’re a hero!If you are outside a building, you’re a hero!► If you are inside, this is your last chance! If you are inside, this is your last chance!

You are almost dead! Quick!You are almost dead! Quick!

Make up your own matrix!Make up your own matrix!

You have 20 seconds! You have 20 seconds! GO!GO!

BOOM!BOOM!

From www.prostunts.netFrom www.prostunts.net

A final desperate solution!A final desperate solution!The zero matrix!The zero matrix!

5

5

-5

-5 10 15-10

0

0

0

0► Collapse all paths to a singularity!Collapse all paths to a singularity!