Chapter II

Mathematics: Basics

All class materials including this PowerPoint file are available at

[Link]

Introduction to Computer Graphics with OpenGL ES (J. Han)

Matrices and Vectors
 This chapter delivers an explicit presentation of the basic mathematical
techniques, which are necessary throughout this book.
 m×n matrix

 If m = n, the matrix is called square.

 Matrix-matrix multiplication

 If A’s dimension is l×m and B’s dimension is m×n, AB is an l×n matrix.

Introduction to Computer Graphics with OpenGL ES (J. Han) 2-2

Matrices and Vectors (cont’d)
 The typical representation of a 2D vector, (x,y), or a 3D vector, (x,y,z), is called
a row vector. Instead, we can use a column vector:
 Matrix-vector multiplication

 Transpose denoted by MT

 (AB)T = BTAT  (Mv)T = vTMT

 For matrix-vector multiplication, OpenGL uses the column vectors and the
vector-on-the-right representation. In contrast, Direct3D uses the row vectors
and the vector-on-the-left representation.
Introduction to Computer Graphics with OpenGL ES (J. Han) 2-3
Matrices and Vectors (cont’d)
 Identity matrix denoted by I

 For any matrix M, MI = IM = M.

 If two square matrices A and B are multiplied to return an identity matrix, i.e.,
AB = I, B is called the inverse of A and is denoted by A-1. By the same token, A
is the inverse of B.
 (AB)-1 = B-1A-1 

Introduction to Computer Graphics with OpenGL ES (J. Han) 2-4

Matrices and Vectors (cont’d)
 Consider the coordinates of a 2D or 3D vector, v:

 Its length denoted by ||v||

 Dividing a vector by its length is called normalization.

 Such a normalized vector is called the unit vector since its length is 1.

Introduction to Computer Graphics with OpenGL ES (J. Han) 2-5

Coordinate System and Basis
 Coordinate system = origin + basis. Throughout this book, we use two terms,
coordinate system and space, interchangeably.
 An orthonormal basis is an orthogonal set of unit vectors. The representative is
the standard basis, {e1, e2}.
 In the 2D space, every vector can be defined as a linear combination of basis
vectors. Consider (3,5) for the following three examples.

standard non-standard non-standard

(orthonormal) non-orthonormal orthonormal

Introduction to Computer Graphics with OpenGL ES (J. Han) 2-6

Coordinate System and Basis (cont’d)
 3D standard basis, {e1, e2, e3}, where e1=(1,0,0), e2=(0,1,0), and e3=(0,0,1).

 It is also orthonormal.
 Of course, we can consider non-standard orthonormal bases in 3D space. You
will see soon.

 All 2D and 3D bases presented from now on will be orthonormal by default.

Introduction to Computer Graphics with OpenGL ES (J. Han) 2-7

Dot Product
 Given two n-dimensional vectors, a and b, whose coordinates are (a1, a2, .. , an)
and (b1, b2, .. , bn), respectively, their dot product ab is defined to be
a1b1+a2b2+ .. +anbn. It is also called inner product.
 Geometric interpretation of the algebraic formula: When the angle between a
and b is denoted as θ, ab can be also defined as ‖a‖‖b‖cosθ.
 If a and b are perpendicular to each other, ab = 0.
 If θ is an acute angle, ab > 0.
 If θ is an obtuse angle, ab < 0.

 Cosine similarity: The more similar a and b are, the larger ab is.
Introduction to Computer Graphics with OpenGL ES (J. Han) 2-8
Dot Product (cont’d)
 Note that if v is a unit vector, v·v = 1.
 Every orthonormal basis has an interesting and useful feature. See two examples.
 2D standard basis, {e1, e2}
 e1·e1=1 and e2·e2=1
 e1·e2=0 and e2·e1=0.

 3D standard basis, {e1, e2, e3}

 If i=j, ei·ej=1.
 Otherwise, ei·ej=0.

 This feature applies to non-standard orthonormal bases.

Introduction to Computer Graphics with OpenGL ES (J. Han) 2-9
Cross Product
 The cross product takes as input two 3D vectors, a and b, and returns another
3D vector which is perpendicular to both a and b. It’s denoted by a×b and its
direction is defined by the right-hand rule.

 The length of a×b equals the area of the parallelogram that a and b span:
‖a‖‖b‖sinθ.
 If a=b, a×b returns the zero vector, often denoted as 0.
 The right-hand rule implies that the direction of b×a is opposite to that of a×b,
i.e., b×a = -a×b, but their lengths are the same.

Introduction to Computer Graphics with OpenGL ES (J. Han) 2-10

Cross Product (cont’d)
 In the book, [Note: Derivation of cross product] shows how the coordinates of
a×b are derived from those of a and b. See below for an intuitive derivation.
 If a=(ax, ay, az) and b=(bx, by, bz), a×b=(aybz-azby, azbx-axbz, axby-aybx).

Introduction to Computer Graphics with OpenGL ES (J. Han) 2-11

Line, Ray and Line Segment
 An infinite line is defined by two end points, p0 and p1: p(t) = p0 + t(p1 - p0). In
this parametric equation, p1 - p0 is a vector and the parameter t is in [-,] so
that the vector, p1 - p0, is scaled by t.

 If [0,], p(t) is a ray, which starts from p0 and is infinitely extended along p1 - p0 .
 If [0,1], p(t) represents a line segment.

Introduction to Computer Graphics with OpenGL ES (J. Han) 2-12

Linear Interpolation
 Note that p(t) = p0 + t(p1 - p0) = (1-t)p0 + tp1 and consider the line segment,
where t is in [0,1].

 The line segment is divided by p(t) into two parts, with the relative lengths,
t and 1-t.
 p(t) is the weighted sum of p0 and p1, i.e., 1-t is the weight of p0 and t is the
weight of p1. The larger t is, the closer p(t) is to p1. Similarly, the larger 1-t
is, the closer p(t) is to p0.
 Obviously, the sum of weights is one, i.e., t + (1-t) = 1.
 An interesting observation: 1-t is for p0 that is located “on the opposite
side” and t is for p1 that is also located “on the opposite side.”
 When t is in [0,1], p(t) defined as (1-t)p0 + tp1 is called the linear interpolation
of p0 and p1. All points between p0 and p1 can be defined via the linear
interpolation.

Introduction to Computer Graphics with OpenGL ES (J. Han) 2-13

 Linear Interpolation (cont’d)
 The x-, y- and z-coordinates of p(t) are defined independently by linear
interpolation.

𝑝1 = (𝑥1, 𝑦1)

𝑝0 = (𝑥0, 𝑦0)

 Whatever attributes are associated with the end points, they can be linearly
interpolated. Suppose that the endpoints are associated with colors c0 and c1,
respectively, where c0 = (R0, G0, B0) and c1 = (R1, G1, B1). Then, the color c(t)
is defined as follows:
 c1 = (0, 0, 255)

c0 = (255, 0, 0)


Introduction to Computer Graphics with OpenGL ES (J. Han) 2-14

Barycentric Coordinates
 Given the coordinates of a triangle’s vertices, we can compute its area using the
determinant. 𝑝2 = (𝑥2, 𝑦2)

𝑝1 = (𝑥1, 𝑦1) 𝑎𝑟𝑒𝑎 𝑝0, 𝑝1, 𝑝2 =

𝑝0 = (𝑥0, 𝑦0)

 A point p located in the triangle <𝑝0, 𝑝1, 𝑝2> divides it into three sub-triangles.
Given p’s coordinates, we can compute the sub-triangles’ areas. Let u denote
𝑎𝑟𝑒𝑎(𝑝, 𝑝1, 𝑝2)/𝑎𝑟𝑒𝑎 𝑝0, 𝑝1, 𝑝2 . Similarly, v and w are defined.
𝑝2 𝑎𝑟𝑒𝑎(𝑝, 𝑝1, 𝑝2)
𝑢=
𝑎𝑟𝑒𝑎 𝑝0, 𝑝1, 𝑝2
v p u 𝑎𝑟𝑒𝑎(𝑝, 𝑝2, 𝑝0)
𝑝1 𝑣=
w 𝑎𝑟𝑒𝑎 𝑝0, 𝑝1, 𝑝2
𝑎𝑟𝑒𝑎(𝑝, 𝑝0, 𝑝1)
𝑤=
𝑝0 𝑎𝑟𝑒𝑎 𝑝0, 𝑝1, 𝑝2

 Obviously, u + v + w = 1.

Introduction to Computer Graphics with OpenGL ES (J. Han) 2-15

Barycentric Coordinates (cont’d)
 Examples
𝑝2 𝑝2 𝑝2 𝑝2

v pu u v pu v p
𝑝1 v 𝑝1 𝑝1 w 𝑝1
w w
pw
𝑝0 (u, v, w) = ( , , ) 𝑝0 (u, v, w) = ( , , ) 𝑝0 (u, v, w) = ( , , ) 𝑝0 (u, v, w) = (0, , )

 The larger u is, the closer p is to 𝑝0. Then, u is taken as the weight of 𝑝0.
Similarly, v is the weight of 𝑝1, and w is the weight of 𝑝2.
 If u, v and w are known but the coordinates of p are unknown, the coordinates can
be computed as the weighted sum of 𝑝0, 𝑝1 and 𝑝2, i.e., p = u𝑝0+v𝑝1+ w𝑝2.
𝑝2 = 𝑥2, 𝑦2, 𝑧2

𝑥𝑝 = u𝑥0 +v𝑥1 + w𝑥2

v p u 𝑝1 = 𝑥1, 𝑦1, 𝑧1 𝑦𝑝 = u𝑦0 +v𝑦1 + w𝑦2
w
𝑧𝑝 = u𝑧0 +v𝑧1 + w𝑧2

𝑝0 = 𝑥0, 𝑦0, 𝑧0

 Observe that each weight is for the vertex located “on the opposite side.”

Introduction to Computer Graphics with OpenGL ES (J. Han) 2-16

Barycentric Coordinates (cont’d)
 The weights (u, v, w) are called the barycentric coordinates of p “with respect to
𝑝0, 𝑝1 and 𝑝2.” Don’t be confused with p’s Cartesian coordinates, (𝑥𝑝, 𝑦𝑝, 𝑧𝑝),
which are “with respect to the Cartesian coordinate system.”
𝑝2 = 𝑥2, 𝑦2, 𝑧2

𝑥𝑝 = u𝑥0 +v𝑥1 + w𝑥2

v p u 𝑝1 = 𝑥1, 𝑦1, 𝑧1 𝑦𝑝 = u𝑦0 +v𝑦1 + w𝑦2
w
𝑧𝑝 = u𝑧0 +v𝑧1 + w𝑧2

𝑝0 = 𝑥0, 𝑦0, 𝑧0
 Using the barycentric coordinates of an interior point, the attributes of the vertices
can be interpolated to determine the attribute of the point.
𝑅2, 𝐺2, 𝐵2 at 𝑝2

v p u
𝑅1, 𝐺1, 𝐵1 at 𝑝1
w

𝑅𝑝 = u𝑅0 +v𝑅1 + w𝑅2

𝑅0, 𝐺0, 𝐵0 at 𝑝0 𝐺𝑝 = u𝐺0 +v𝐺1 + w𝐺2
𝐵𝑝 = u𝐵0 +v𝐵1 + w𝐵2
 Barycentric coordinates are presented in Section 12.1.5 of the textbook.

Introduction to Computer Graphics with OpenGL ES (J. Han) 2-17