Computer Graphics I

Dot Product / Cross Product of vectors

Two most important operations on vectors

Mankyu Sung
Computer Graphics I

Dot product

a  b = a x bx + a y b y + a z bz =  a i bi
a  b = a b cos 

The result of dot product of

vectors is scalar value

Mankyu Sung
Computer Graphics I

Example
 What is the value of dot product of v ·u?
 v = (7,3,-2)
 u = (10,4,2)

 v ·u ?

Mankyu Sung
Computer Graphics I

glm

glm::vec3 v(7,3,-2);
glm::vec3 u(10,4,2);

float d = glm::dot(v,u)

Mankyu Sung 4
Computer Graphics I

Example: Angle between two vectors

 How do you find the angle θ between vectors a and b?

b θ
a

Mankyu Sung
Computer Graphics I

Example: Angle Between Vectors

a  b = a b cos 
a b
cos  =  
 a b 
 
b θ
a b
 = cos −1   a
 a b 
 
Mankyu Sung
Computer Graphics I

Quiz
 a = (2,-1,1) b=(1,1,2)
 Angle between vector a and vector b?

Mankyu Sung
Computer Graphics I

glm
#include <glm/gtc/constants.hpp>

const double DEGREES_TO_RADIANS = glm::pi<float>() / 180.0;

const double RADIANS_TO_DEGREES = 180.0 / glm::pi<float>();

glm::vec3 v(2,-1,1);
glm::vec3 u(1,1,2);

float d = glm::dot(v, u);

float c = d / (glm::length(u) * glm::length(v));
float deg = glm::acos(c)*RADIANS_TO_DEGREES;

https://padlet.com/mksung89/dotProductEpitech
Mankyu Sung 8
Computer Graphics I

Quiz
 a = (1,0,0) b=(0,1,0)
 Angle between vector a and vector b?

Mankyu Sung
 Computer Graphics I

Dot Products with Unit Vectors

0 < a·b < 1

a·b = 0 a·b = 1
b
θ a

-1 < a·b < 0 a·b a = b = 1. 0

a  b = cos ( )
a·b = -1

Mankyu Sung
Computer Graphics I

glm
#include <glm/gtc/constants.hpp>

const float DEGREES_TO_RADIANS = glm::pi<float>() / 180.0;

const float RADIANS_TO_DEGREES = 180.0 / glm::pi<float>();

glm::vec2 v(1, 0);

glm::vec2 u(-1, 1);

v = glm::normalize(v);
u = glm::normalize(u);

float d = glm::dot(v, u);

Mankyu Sung 11
Computer Graphics I

Dot Products with Non-Unit Vectors

 Even though vector a and b are not unit vectors, following are true.

 If θ < 90º then a·b > 0

 If θ = 90º then a·b = 0
 If θ > 90º then a·b < 0

Mankyu Sung
Computer Graphics I

glm
#include <glm/gtc/constants.hpp>

const float DEGREES_TO_RADIANS = glm::pi<float>() / 180.0;

const float RADIANS_TO_DEGREES = 180.0 / glm::pi<float>();

glm::vec3 v(2, 0, 0);

glm::vec3 u(-1, 1, 0);

float d = glm::dot(v, u);

Mankyu Sung 13
 Computer Graphics I
Another use of dot product
: Vector Projection (only one vector is Unit Vector)

 if |u|=1.0, then a·u represent a length of vector that is projected

from vector a onto vector u.

u
a·u
Mankyu Sung
Computer Graphics I

Vector decomposition
 We can decompose a vector into two vectors
 I would like to decompose a vector v into two vectors a and b, but b must be
parallel to an unit vector c

a 𝑏 = 𝑐 ∗ (𝑣 ∙ 𝑐)
v v 𝑎 =𝑣−𝑏

b
c
Mankyu Sung 15
 Computer Graphics I

Example: Distance from a point to a plane

 To represent a plane : need point p on the plane and normal vector

 Normal vector? A vector that is perpendicular to the plane
 Distance from point x outside to the plane?

•x
n
p•
Mankyu Sung http://mathinsight.org/distance_point_plane
Computer Graphics I

Example: Distance from a point to a plane

 The length of projected vector from vector x-p to vector n

•x
dist = (x − p)  n n x-p
p•

Mankyu Sung
Computer Graphics I

glm

glm::vec3 n(0, 1, 0);

glm::vec3 p(1, 0, 1);
glm::vec3 x(-3, 3, 2);

glm::vec3 v = x – p;

n = glm::normalize(n);
float d = glm::dot(v, n);

Mankyu Sung 18
Computer Graphics I

Cross (vector) product a  b = −b  a

a  b = a b sin 

b

a
 Cross product returns a vector orthogonal to two initial vectors
(perpendicular to both vectors)
 Direction determined by right-hand rule
 Useful in constructing coordinate systems (later)
Mankyu Sung
Computer Graphics I

Two perpendicular vectors

v v

u u
uxv
 Which one is the cross product of two vector u and v?
 Right hand rule -> https://youtu.be/zGyfiOqiR4s

Mankyu Sung 20
21
Computer Graphics I

Cross product: Properties

x y = +z
y  x = −z
a  ba=−bb=−ab  a
y  z = +x
a  aa= 0a = 0
z  y = −x
a  (ab + (cb) += ca)=ba+ab+ca  c
z x = +y
a  (akb)(=kbk)(=
a k b(a)  b)
x z = −y

x,y,z are three axis

Mankyu Sung
Computer Graphics I

Cross Product

i j k The result of cross product is another

a  b = ax ay az vector
bx by bz (In the case of dot product, it is a scalar)

a  b = a y b z − a z b y a z bx − a x bz a x b y − a y bx 
Cross product only works in 3D space(dot product works in 2D
and 3D space as well)

Mankyu Sung
Computer Graphics I

An easy way to remember…

Mankyu Sung
Computer Graphics I

Example
 U = (1,-2,-1) V = (-2,4,1)

 UxV=?

Mankyu Sung
Computer Graphics I

glm

glm::vec3 u(1, -2, -1);

glm::vec3 v(-2, 4, 1);

glm::vec3 c = glm::cross(u,v); //u x v

std::cout << to_string(c) << std::endl;

Mankyu Sung 26
 Computer Graphics I

Properties of cross product

Note that a x b = another vector, but |a x b| = scalar

Length of
vector a  b = a b sin 
The area of parallelogram that is
a  b = consisted of a와 b
a  b = 0 If, a and b are parallel
a b is perpendicular to both a and b, in the
direction defined by the right hand rule

Mankyu Sung
Computer Graphics I

glm glm::vec3 u(1, 0, 0);

glm::vec3 v(-1, 1, 0); //Let’s test |a||b|sin(theta)

glm::vec3 c = glm::cross(u, v);

float l = glm::length(c);
float ang = glm::acos(glm::dot(u, v) / (glm::length(u) * glm::length(v)));

float l2 = glm::length(u) * glm::length(v) * sin(ang); //l == l2

glm::vec3 u2(1, 0, 0);

glm::vec3 v2(0, 1, 0); Let’s test the area of parallelogram
float area = glm::length(glm::cross(u2, v2));

glm::vec3 u3(1, 0, 0);

glm::vec3 v3(1, 0, 0); Let’s test when two vector are parallel
float area = glm::length(glm::cross(u3, v3));

Mankyu Sung 28
 Computer Graphics I

Example: Area of triangle

 Find the area of the triangle defined by 3D points a, b, and c

b
a
Mankyu Sung
Computer Graphics I

Example: Area of triangle

1
area = (b − a )  (c − a )
2
c
c-a
b
a b-a
Mankyu Sung
Computer Graphics I

glm

glm::vec3 p1(1, 0, 0); //these are all points, not vector

glm::vec3 p2(1, 1, 0);
glm::vec3 p3(-1, 0, 0);

glm::vec3 v1 = p2-p1;
glm::vec3 v2 = p3-p1;

float area = 0.5f * glm::length(glm::cross(v1,v2));

Mankyu Sung 31
Computer Graphics I

Normal vector (unit vector)

 A vector which is perpendicular to the surface at a given point

 Normal is very important because it represents a direction that the surface

is facing at.

Mankyu Sung 32
Computer Graphics I

Calculate normal vector of a triangle

 Three vertices are given(p1, p2, p3), calculate the normal vector of the
triangle (winding..)

p1

ccw(counterclock-wise)
p2 p3
p3,p1,p2
Specifying the order of three p2,p3,p1
vertices is important p1,p2,p3…

Mankyu Sung 33
Computer Graphics I

Order is important (OpenGL)

p1
v1 v2

p2 p3

p1->p2->p3 v1=p2-p1
v2=p3-p1 N = v1 X v2
CCW
Mankyu Sung 34
Computer Graphics I

Example (use GLM to calculate it !)

 Calculate normal of the triangle

p1(3, 0, 0)

p2(1.5, 0.86, 0) p3(3, 0, -1)

Important! : normal must be a unit vector

p2->p3->p1
Or p3->p1->p2
p2
Mankyu Sung https://padlet.com/mksung89/EpitehNormal 35
Computer Graphics I

Matrix

Mankyu Sung 36
Computer Graphics I

Matrices

 Reminder: A matrix is a rectangular array of numbers

 An m x n matrix has m rows and n columns
 Mij denotes the entry in the i-th row and j-th column of
matrix M
 These are generally thought of as1-indexed (instead of 0-indexed)

Mankyu Sung
Computer Graphics I

Matrices

 Here, M is a 2x5 matrix:

Mankyu Sung
Computer Graphics I

Matrix Transposes

 The transpose of an m x n matrix is an n x m

matrix
 Denoted MT
 MTij = Mji

Mankyu Sung
Computer Graphics I

glm
#include <glm/mat4x4.hpp>

glm::vec4 v1 = { 1, 0, 1, -1 };
glm::vec4 v2 = { 1, 0, 1, -1 };
glm::vec4 v3 = { 1, 0, 1, -1 };
glm::vec4 v4 = { 1, 0, 1, -1 };

glm::mat4 m;
m[0] = v1; 1 1 1 1
m[1] = v2; 0 0 0 0
m[2] = v3; 𝐴=
1 1 1 1
m[3] = v4;
−1 −1 −1 −1
We can initialize the matrix from vectors
(Note that the vectors set as columns)

Mankyu Sung 40
Computer Graphics I

glm

#include <glm/mat4x4.hpp>

glm::mat4 m = {{1,0,0,0},{0,1,0,0},{0,0,1,0},{0,0,0,1}};
1st column 2nd column 3rd column 4th column

1 0 0 0
0 1 0 0
m=
1 0 1 0
0 0 0 1

Mankyu Sung 41
Computer Graphics I

glm
#include <glm/mat4x4.hpp>
#include <glm/mat2x2.hpp>
#include <glm/mat3x2.hpp>

glm::mat2 m2 = { 1, 0, 1, -1 };
std::cout << to_string(m2) << std::endl;

glm::mat3x2 m3 = { { 1, 0 }, { 1, -1 }, { 0, 1 } };
std::cout << to_string(m3) << std::endl;

glm::mat4 m(1.0f); //identity matrix

std::cout << to_string(m) << std::endl;

std::cout << m[2][2] << std::endl;

Mankyu Sung 42
Computer Graphics I

Matrix Addition

 Only well defined if the dimensions of the 2 matrices are the

same
 That is, m1 = m2 and n1 = n2
 Here, M and G are both 2 x 5

Mankyu Sung
Computer Graphics I

glm #include <glm/mat4x4.hpp>

#include <glm/mat2x2.hpp>
#include <glm/mat3x2.hpp>

glm::mat2 m1 = { 1, 0, 1, -1 };
glm::mat2 m2 = { 0, 1, -1, 0 };
glm::mat2 m3 = m1 + m2;

std::cout << to_string(m3) << std::endl;

Mankyu Sung 44
Computer Graphics I

Matrix Scaling

 Just like vector scaling

 Matrix * Scalar = Matrix

Mankyu Sung
Computer Graphics I
Properties of Matrix Addition and Scaling

Addition is Commutative

Addition is Associative

Scaling is Associative

Scaling and Addition are

Distributive

Mankyu Sung
Computer Graphics I

glm
#include <glm/mat4x4.hpp>
#include <glm/mat2x2.hpp>
#include <glm/mat3x2.hpp>

glm::mat2 m1 = { 1, 0, 1, -1 };
m1 = m1 * 2.0f;
std::cout << to_string(m3) << std::endl;

Mankyu Sung 47
Computer Graphics I

Matrix Multiplication

 Only well defined if the number of columns of the first matrix and the number
of rows of the second matrix are the same
 Matrix * Matrix = Matrix
 i.e. if F is m x n, and
G is n x p, then FG
if m x p
 Let’s do an example

Mankyu Sung
Example
Computer Graphics I

glm

#include <glm/mat4x4.hpp>
#include <glm/mat2x2.hpp>
#include <glm/mat3x2.hpp>

glm::mat2 m1 = { 1, 0, 1, -1 };
glm::mat2 m2 = { 0, 1, 1, -1 };
glm::mat2 m3 = m1 * m2;
std::cout << to_string(m3) << std::endl;

Mankyu Sung 50
Computer Graphics I

The order is matter!

 Let’s say M, V are two matrices with same size
 Then, MV is not equal to VM

𝑀𝑉 ≠ 𝑉𝑀

Mankyu Sung 51
Computer Graphics I

An example

1 0 2 1 0 0
𝐴= 1 2 3 𝐵 = 0 −1 1
−1 0 1 0 1 2

𝐴×𝐵 =?

𝐵×𝐴 =?
https://padlet.com/mksung89/matrixMul
Mankyu Sung 52
Computer Graphics I

The Identity Matrix

 Defined such that the product of any matrix M and the identity matrix
I is M
 IM = MI = M
 Let’s derive it
 The identity matrix is a square matrix with ones on the diagonal and
zeros elsewhere

Mankyu Sung
Computer Graphics I

The Identity Matrix

 Defined such that the product of any matrix M and the identity
matrix I is M
 IM = MI = M
 Let’s derive it
 The identity matrix is a square matrix with ones on the
diagonal and zeros elsewhere

Mankyu Sung
Computer Graphics I

glm identity matrix

glm::mat4() and glm::mat4(1.0)

c.f) glm::mat(0.0) => all entries are 0

Mankyu Sung 55
Computer Graphics I

Transpose of a Matrix (or vector?)

T
1 2
   1 3 5
 3 4  =  2 4 6
5 6  
 

( AB)T = BT AT

Mankyu Sung
Computer Graphics I

glm

#include <glm/mat4x4.hpp>
#include <glm/mat2x2.hpp>
#include <glm/mat3x2.hpp>

glm::mat3x2 m3 = { { 1, 0 }, { 1, -1 }, { 0, 1 } };
glm::mat2x3 m4 = glm::transpose(m3);

Mankyu Sung 57
Computer Graphics I

Identity Matrix and Inverses

 1 0 0
 
I 33 =  0 1 0
 0 0 1
 
−1 −1
AA = A A = I
( AB) −1 = B −1 A−1
Mankyu Sung
Computer Graphics I

Find an inverse matrix (2x2 matrix)

a b 
 1. Find what is called the Determinant c d 
 
 ad-bc
 2. Swap the elements in the leading diagonal d b 
c a 
 3. Negate the other elements  
 4. Multiply the Matrix by 1/determinant d − b 
− c a 
 

1 d − b 
ad − cb − c a 

Mankyu Sung 59
Computer Graphics I

Example

 4 8
A =   𝐴 = 𝐴−1 =? 𝜋𝑟 2
 1 3

Mankyu Sung 60
Computer Graphics I

glm

#include <glm/mat4x4.hpp>
#include <glm/mat2x2.hpp>
#include <glm/mat3x2.hpp>

glm::mat2 m2 = { 1, 0, 1, -1 };
glm::mat2 im = glm::inverse(m2);
std::cout << to_string(im) << std::endl;

glm::mat2 ii = m2 * im;
std::cout << to_string(ii) << std::endl;

Mankyu Sung 61
Computer Graphics I

Multiplication of a matrix with a vector

 We can multiply a matrix with a vector
 It actually “transform” a vector to another
 The number of rows of matrix must match to the number of dimension of
vector

𝑣′ = M 𝑣

𝑣 : 4D vector
:M : 4x4 matrix

Mankyu Sung 62
Computer Graphics I

An example

1 0 2 1
𝐴= 1 2 3 𝑣= 1
−1 0 1 −1

𝐴×𝑣 =?
𝑣×𝐴 =?

Mankyu Sung 63
Computer Graphics I

glm pointer
 #include <glm/gtc/type_ptr.hpp>

 If you want to get an address of glm::vec or glm::mat, you get use like this
 glm::vec4 v(0.0f);
 glm::mat4 m(1.0f);
 ...
 glVertex3fv(glm::value_ptr(v))
 glLoadMatrixfv(glm::value_ptr(m));

Mankyu Sung 64
Computer Graphics I

important functions
 Linear Interpolation
 glm::mix(U, V, t) : Linearly interpolate U and V
 Lineal interpolate U and V using weight value t ( t goes between (0,1) )
 If t == 0, it return U
 If t == 1, it returns V
 If t == 0.5, it blend U and V in half and half.
 U, V can be a vector or scalar.
 Clamping
 glm::clamp(value, min_value, max_value) : Keep the value in (min_value, max_value)
 If value < min_value, then set it back to min_value
 If value > max_value, then set it back to max_value

Mankyu Sung 65