THE MATH LECTURE
(BOILED DOWN, YET LIGHTLY SALTED)
CS 4364/6353
OVERVIEW
•
For 2D games, we use a lot of trigonometry
•
For 3D games, we use a lot of linear algebra and 2D concepts
•
For advanced concepts, we use a lot of calculus and 3D concepts
•
Math is used to:
• Translate geometry
• Rotate geometry
• Scale geometry
• Calculate light
• Determine the position of enemies (such as their “AI”)
• Run physics engines (collisions)
THINGS YOU PROBABLY ALREADY KNOW…
•
A 3D point contains x, y and z
•
A vertex is essentially a 3D point
•
An edge connects two vertices
•
Triangles are comprised of 3 vertices
•
Scalar values are just single numbers (e.g. 1, 2, 3)
•
We need to be able to:
• Translate (move) vertices
• Rotate vertices
• Scale vertices
TRIG YOU PROBABLY ALREADY KNOW…
𝑦
ℎ
𝑥
cos θ =
ℎ
𝑦
tan θ =
𝑥
𝑥
cot θ =
𝑦
sin θ =
y (opposite)
θ
x (adjacent)
•
Trig functions are defined by the relationships of the sides of a triangle
•
Commonly used: sine, cosine, tangent and cotangent
•
Not often used: secant, cosecant, cotangent
•
Can work in degrees or radians
•
𝑥 2 + 𝑦 2 = 𝑧 2 and 𝑧 2 = 𝑥 2 + 2𝑥𝑦𝑐𝑜𝑠𝜃
TRIG YOU PROBABLY KNOW
•
What is a radian? Look at 𝑟 below
•
𝐶 = 2𝜋𝑟
•
There are 2𝜋 radians in a circle!
•
Therefore
𝑟
• 𝑟𝑎𝑑𝑖𝑎𝑛𝑠 =
𝜋
180
× 𝑑𝑒𝑔𝑟𝑒𝑒𝑠
• 𝑑𝑒𝑔𝑟𝑒𝑒𝑠 =
180
𝜋
× 𝑟𝑎𝑑𝑖𝑎𝑛𝑠
𝑟
𝑟
THINGS YOU MIGHT REMEMBER
(REVIEW OF SIN AND COS)
sin 90 = 1
sin 180 = 0
sin 0 = 0
sin 270 = −1
THINGS YOU MIGHT REMEMBER
(REVIEW OF SIN AND COS)
cos 90 = 0
cos 180 = −1
cos 0 = 1
cos 270 = 0
ROTATING POINTS IN 2D
𝑦
𝑃′
Rotate point 𝑃 by
α degrees to get 𝑃’
𝑟
𝛼
𝑦 ′ = 𝑟𝑠𝑖𝑛(𝛼)
𝑃
𝑥 ′ = 𝑟𝑐𝑜𝑠(𝛼)
Note: you may need to add an offset if the origin isn’t (0,0)
𝑥
OTHER TRIG YOU SHOULD KNOW
•
sin −𝛼 = − sin 𝛼
•
cos −𝛼 = cos 𝛼
•
tan −𝛼 = − tan 𝛼
•
Cosine and sine produce the same values by adding/subtractng
𝜋
• cos 𝛼 = sin 𝛼 + 2
•
If 𝑥 2 + 𝑦 2 = ℎ 2 , then
•
𝑥2
ℎ2
+
𝑦2
ℎ2
= 1 and therefore…
• 𝑠𝑖𝑛 2 𝛼 + 𝑐𝑜𝑠 2 𝛼 = 1 and therefore…
• sin 𝛼 =
1 − 𝑐𝑜𝑠 2 (𝛼)
𝜋
2
INVERSE TRIG
•
“Undoes” a trig function
•
If you know the sin 𝛼 = 𝑣𝑎𝑙𝑢𝑒 and need 𝛼, then asin 𝑣𝑎𝑙𝑢𝑒 = 𝛼
•
Also denoted as 𝑠𝑖𝑛 −1 (𝛼)
•
Common library operations:
• 𝑎𝑠𝑖𝑛 – or “arcsine”
• 𝑎𝑐𝑜𝑠 – or “arccosine”
• 𝑎𝑡𝑎𝑛 – or “arctangent”
QUESTION
•
How would I describe the 2D difference in location of a player and an enemy?
You
Nazi-Bear-Zombie
QUESTION
•
How would I describe the 2D difference in location of a player and an enemy?
(x2, y2)
(x1, y1)
QUESTION
•
How would I describe the 2D difference in location of a player and an enemy?
(x2, y2)
(x1, y1)
𝑑𝑖𝑓𝑓 = [ 𝑥1 − 𝑥2 , 𝑦1 − 𝑦2 ]
…or 𝑑𝑖𝑓𝑓 = [∆𝑥, ∆𝑦]
Note: a very useful 2D function is atan2 (y, x) which gives you the angle!
3D STUFF YOU PROBABLY ALREADY KNOW…
•
A 3D point contains x, y and z
•
A vertex is essentially a 3D point
•
An edge connects two vertices
•
Triangles are comprised of 3 vertices
•
Scalar values are just single numbers (e.g. 1, 2, 3)
•
We need to be able to:
• Translate (move) vertices
• Rotate vertices
• Scale vertices
𝑉𝑒𝑐𝑡𝑜𝑟𝑠
•
We can store this difference into a vector
•
Vectors contain both:
• Direction
• Magnitude
•
Row representation [x, y, z] (multiple columns)
15 − 4 3
•
Column vector has multiple rows
15
−4
3
•
A vector is often denoted with an arrow above it (e.g.𝑢)
OPERATIONS ON VECTORS
•
Do this component-wise
•
Therefore, the vectors must be the same size
•
Adding example
•
1 3 5 + 10 4 − 3 = 11 7 2
• Subtraction works the same way
+
=
OPERATIONS ON VECTORS
•
Simply do this component-wise
•
Vectors must be the same size
•
Adding example
•
1 3 5 + 10 4 − 3 = 11 7 2
• Subtraction works the same way
•
Multiplying by a scalar
• 6 * 1 3 5 = 6 18 30
•
What about multiplication?
• This isn’t really defined, but we have
• Dot product
• Cross product
MAGNITUDE AND NORMALIZATION OF VECTORS
•
Normalization is a fancy term for saying the vector should be of length 1
•
Magnitude is just its length
•
Example for 1 3 5
• mag = 𝑥 2 + 𝑦 2 + 𝑧 2
• mag = 12 + 32 + 52 = 35 = ~5.916079
•
To normalize the vector, divide each component by its magnitude
•
Example from above
•
1 3 5
5.916079
= 0.169 0.50709 0.84515
• Magnitude of 0.169 0.50709 0.84515 = ~1
THE DOT PRODUCT
•
Also called the inner or scalar product
•
Multiply component-wise, then sum together
•
Denoted using the dot operator 𝑢 ∙ 𝑣
•
Example
•
•
1 2 4 ∗ 8 1 − 2 = 1 ∗ 8 + 2 ∗ 1 + 4 ∗ −2 = 2.0
Why is this so cool?
• It will tell us the cosine of the angle θ between two vectors!
• Basis of almost all lighting calculations!
• First, they should be normalized
𝜃
DOT PRODUCT EXAMPLE
•
Assume we have two vectors:
𝑣
• 𝑢= 1 0 0
• 𝑣= 0 1 0
•
These vectors are already normalized
•
We expect the angle to be 90°
•
Dot product is:
• 𝑢∙𝑣 = 1∗0 + 0∗1 + 0∗0 =0
• acos 0 = 90°
𝜃
𝑢
DOT PRODUCT EXAMPLE 2
•
Assume we have two vectors:
• 𝑢= 1 0 0
• 𝑣 = −1 0 0
•
•
We expect the angle to be 180°
Dot product is:
𝜃
𝑣
• 𝑢 ∙ 𝑣 = 1 ∗ −1 + 0 ∗ 0 + 0 ∗ 0 = −1
• acos −1 = 180°
𝑢
DOT PRODUCT EXAMPLE 3
•
Assume we have two vectors:
• 𝑢= 1 0 0
• 𝑣= 1 0 0
•
We expect the angle to be 0°
•
Dot product is:
• 𝑢∙𝑣 = 1∗1 + 0∗0 + 0∗0 =1
• acos 1 = 0°
𝑢 𝑣
PROJECTION
•
Can also be used to calculate the projection of one vector onto another
𝑉
𝛼
Length is:
𝑉∙𝑊
𝑉 cos 𝛼 =
𝑊
𝑊
Then, multiply by normalized 𝑊/ 𝑊
𝑝𝑟𝑜𝑗𝑤 𝑉 =
𝑉∙𝑊
𝑊
𝑊 2
𝑐
CROSS PRODUCT
•
Gives us a new vector that is perpendicular to the other two
•
Denoted with the × operator
•
Calculations:
𝑎 × 𝑏 = [𝑎𝑦 𝑏𝑧 − 𝑎𝑧 𝑏𝑦
•
𝑎
𝜃
𝑎𝑧 𝑏𝑥 − 𝑎𝑥 𝑏𝑧
𝑎𝑥 𝑏𝑦 − 𝑎𝑦 𝑏𝑥 ]
Interesting:
• If 𝑎 × 𝑏 = 𝑐 then 𝑏 × 𝑎 = −𝑐
• The magnitude (length) of the new vector is the sine of the angle (if normalized)
𝑏
MATRICES
•
The foundation of all geometric operations (translation, rotation, scaling, skewing…)
•
Have multiple rows and columns
•
Add and subtract similar to vectors, and must be same size
•
Below is an identity matrix 𝑀
1.0
0.0
0.0
0.0
•
0.0
1.0
0.0
0.0
0.0
0.0
1.0
0.0
We can multiply a matrix
• with another matrix
• with a vector of “appropriate” dimension
0.0
0.0
0.0
1.0
MATRICES
•
Have a transpose (denoted 𝑀 𝑇 ) where 𝑀 𝑇 𝑖𝑗 = 𝑀𝑗𝑖
•
There’s also an inverse matrix (denoted 𝑀 −1 ) where 𝑀𝑀 −1 = 𝐼
• Not all matrices are invertible
• Can check by getting the determinant of the matrix (looking for non-zero)
𝑑𝑒𝑡
𝑚11
𝑚21
𝑚31
𝑎
𝑐
𝑚12
𝑚22
𝑚32
𝑏
𝑎
=
𝑑
𝑐
𝑏
= 𝑎𝑑 − 𝑏𝑐
𝑑
𝑚13
𝑚
𝑚23 = 𝑚11 22
𝑚32
𝑚33
𝑚23
𝑚21
−
𝑚
12 𝑚
𝑚33
31
𝑚23
𝑚21
+
𝑚
13 𝑚
𝑚33
31
𝑚22
𝑚32
A FEW SPECIAL MATRICES
(USED FOR ROTATION)
1
0
0
0 cos(𝛼) −sin(𝛼)
𝑅𝑥 𝛼 =
0 sin(𝛼) cos(𝛼)
0
0
0
cos(𝛽) 0 sin(𝛽)
0
1
0
𝑅𝑦 𝛽 =
−sin(𝛽) 0 cos(𝛽)
0
0
0
0
0
0
1
0
0
0
1
cos(𝛾) −sin(𝛾) 0
sin(𝛾) cos(𝛾) 0
𝑅𝑧 𝛾 =
0
0
1
0
0
0
0
0
0
1
MATRIX MULTIPLICATION
•
Calculating an element is just like the dot product!
•
Let’s say that we want to rotate the point [1 0 0] around the z axis by 90 degrees
•
Points are always stored with a 1 for the 4 th element
cos(𝛾)
sin(𝛾)
0
0
−sin(𝛾)
cos(𝛾)
0
0
0
0
1
0
0
0
0
1
1
?
0
?
=
0
?
1
?
MATRIX MULTIPLICATION
•
Calculating an element is just like the dot product!
•
Let’s say that we want to rotate the point [1 0 0] around the z axis by 90 degrees
•
Points are always stored with a 1 for the 4 th element
cos(90) −sin(90) 0 0
sin(90) cos(90) 0 0
0
0
1 0
0
0
0 1
1
0
0
?
=
0
?
1
?
= (1 ∗ cos 90 ) + (0 ∗ − sin 90 ) + 0 ∗ 0 + 0 ∗ 1 = 0
MATRIX MULTIPLICATION
•
Calculating an element is just like the dot product!
•
Let’s say that we want to rotate the point [1 0 0] around the z axis by 90 degrees
•
Points are always stored with a 1 for the 4 th element
cos(90) −sin(90) 0 0
sin(90) cos(90) 0 0
0
0
1 0
0
0
0 1
1
0
0
1
=
0
?
1
?
= (1 ∗ sin 90 ) + (0 ∗ cos 90 ) + 0 ∗ 0 + 0 ∗ 1 = 1
MATRIX MULTIPLICATION
•
Calculating an element is just like the dot product!
•
Let’s say that we want to rotate the point [1 0 0] around the z axis by 90 degrees
•
Points are always stored with a 1 for the 4 th element
cos(90) −sin(90) 0 0
sin(90) cos(90) 0 0
0
0
1 0
0
0
0 1
= (1 ∗ 0) + (0 ∗ 0) + 0 ∗ 1 + 0 ∗ 1 = 0
1
0
0
1
=
0
0
1
?
MATRIX MULTIPLICATION
•
Calculating an element is just like the dot product!
•
Let’s say that we want to rotate the point [1 0 0] around the z axis by 90 degrees
•
Points are always stored with a 1 for the 4 th element
cos(90) −sin(90) 0 0
sin(90) cos(90) 0 0
0
0
1 0
0
0
0 1
= (1 ∗ 0) + (0 ∗ 0) + 0 ∗ 0 + 1 ∗ 1 = 1
1
0
0
1
=
0
0
1
1
TRANSLATION
•
It’s a piece of cake, because the 4 th column is the translation!
•
Imagine we want to translate the point 10 5 − 7 by the values x, y and z. Then:
1
0
0
0
0
1
0
0
0 𝑥
0 𝑦
1 𝑧
0 1
10 + 𝑥
10
5+𝑦
5
=
−7
−7 + 𝑧
1
1
SCALING
•
It’s a piece of cake too, because that’s the diagonal!
•
We can scale along just one axis, or more than one!
•
Imagine we want to scale the point 2 9 4 by the values x, y and z. Then:
𝑥
0
0
0
0
𝑦
0
0
0
0
𝑧
0
0
0
0
1
2𝑥
2
9𝑦
9
=
4
4𝑧
1
1
COORDINATE SPACES
•
In graphics, we typically deal with 3 separate coordinate systems
• Model space – the local coordinate system of the object
• World space – the coordinate system of our virtual environment
• Eye space – the coordinate system relative to the person viewing the virtual
environment (camera)
•
To begin, we need to create a coordinate system to work in where the x, y and z axes are
perpendicular
• We know the camera always faces down the z axis
• We know the position of the camera (𝑝𝑜𝑠)
• We know which way is up relative to the camera (𝑢𝑝)
• We know the coordinate of the point we want to look at (𝑝)
BUILDING THE VIEWING MATRIX 𝑀𝑣
•
To calculate the z axis:
𝑧 = 𝑐𝑎𝑚 − 𝑝
𝑧 = 𝑛𝑜𝑟𝑚𝑎𝑙𝑖𝑧𝑒(𝑧)
•
To calculate the x axis:
𝑥 = 𝑧 × 𝑢𝑝
•
To calculate the y axis:
𝑦=𝑧×𝑥
BUILDING THE VIEWING MATRIX 𝑀𝑣
𝑥0
𝑦0
𝑀𝑣 =
−𝑧0
0
𝑥1
𝑦1
−𝑧1
0
𝑥2
𝑦2
−𝑧2
0
0
0
0
1
1
0
0
0
0
1
0
0
0
0
1
0
−𝑝𝑜𝑠0
−𝑝𝑜𝑠1
−𝑝𝑜𝑠2
1
THE PERSPECTIVE MATRIX 𝑀𝑝
•
Much too mathy… Just copy and paste!
•
Let 𝑓 = 𝑐𝑜𝑡
𝑓𝑜𝑣
2
𝑀𝑝 =
where fov is the field of view in the y direction (degrees)
𝑓
𝑎𝑠𝑝𝑒𝑐𝑡
0
0
0
0
𝑓
0
0
0
0
0
𝑓𝑎𝑟 + 𝑛𝑒𝑎𝑟
−
𝑓𝑎𝑟 − 𝑛𝑒𝑎𝑟
−1
0
2 ∙ 𝑓𝑎𝑟 ∙ 𝑛𝑒𝑎𝑟
−
𝑓𝑎𝑟 − 𝑛𝑒𝑎𝑟
0
The red elements map coordinates between near and far to [-1, 1]
FINALLY!
•
Take any kind of modeling transform (translate, rotate, …) and multiply by Mv and Mp
•
This give you the Model-View-Project (MVP) matrix
𝑀𝑚𝑣𝑝 = 𝑀𝑝 × 𝑀𝑣 × 𝑀𝑚
•
Once we have this monster, we can start to rotate points in our vertex shader:
#version 150
uniform mat4 mvp;
void main () {
gl_Position = mvp * gl_Vertex;
}
FUN QUESTIONS
•
How do we find the normal of a triangle?
•
How can we determine how much light should be cast onto a triangle from a directional
light?
•
How can we determine if a polygon is facing away from the camera?