��� Chapter II�Mathematics: Basics

All class materials including this PowerPoint file are available at

https://github.com/medialab-ku/openGLESbook

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

Matrices and Vectors

2-2

• 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)

Matrices and Vectors (cont’d)

2-3

• 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 M^T

​

• A different way of matrix-vector multiplication

​

​

• 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.

(AB)^T = B^TA^T

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

Matrices and Vectors (cont’d)

2-4

• 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.
• Theorems
• (AB)^-1 = B^-1A^-1 🡨
• (AB)^T = B^TA^T (Revisit Mv and v^TM^T presented in the previous page.)

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

Matrices and Vectors (cont’d)

2-5

• 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)

Coordinate System and Basis

2-6

• 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, {e₁, e₂}.
• 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

(orthonormal)

non-standard

non-orthonormal

non-standard

orthonormal

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

Coordinate System and Basis (cont’d)

2-7

• 3D standard basis, {e₁, e₂, e₃}, where e₁=(1,0,0), e₂=(0,1,0), and e₃=(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)

Dot Product

2-8

• Given two n-dimensional vectors, a and b, whose coordinates are (a₁, a₂, .. , a_n) and (b₁, b₂, .. , b_n), respectively, their dot product a⋅b is defined to be a₁b₁+a₂b₂+ .. +a_nb_n. 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.

​

​

​

​

​

​

• The smaller θ is, i.e., the more similar a and b are, the larger a⋅b is.

​

​

​

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

Dot Product (cont’d)

2-9

• 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, {e₁, e₂}
• e₁·e₁=1 and e₂·e₂=1
• e₁·e₂=0 and e₂·e₁=0.

​

​

• 3D standard basis, {e₁, e₂, e₃}
• If i=j, e_i·e_j=1.
• Otherwise, e_i·e_j=0.

​

​

​

​

• This feature applies to non-standard orthonormal bases.

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

Cross Product

2-10

• 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)

Cross Product (cont’d)

2-11

• 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=(a_x, a_y, a_z) and b=(b_x, b_y, b_z), a×b=(a_yb_z-a_zb_y, a_zb_x-a_xb_z, a_xb_y-a_yb_x).

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

Line, Ray and Line Segment

2-12

• An infinite line is defined by two end points, p₀ and p₁: p(t) = p₀ + t(p₁ - p₀). In this parametric equation, p₁ - p₀ is a vector and the parameter t is in [-∞,∞] so that the vector, p₁ - p₀, is scaled by t.

​

​

​

​

​

​

• If [0,∞], p(t) is a ray, which starts from p₀ and is infinitely extended along p₁ - p₀ .
• If [0,1], p(t) represents a line segment.

​

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

Linear Interpolation

2-13

• Note that p(t) = p₀ + t(p₁ - p₀) = (1-t)p₀ + tp₁.

​

​

​

​

• Conceptually, p(t) divides the line segment into two parts.
• p(t) is the weighted sum of p₀ and p₁, where t is the weight of p₁, which is located “on the opposite side.” Similarly, 1-t is the weight of p₀, which is also located “on the opposite side.”
• Conceptually, each weight pushes p(t) toward the vertex associated with it. For example, t pushes p(t) toward p₁; the larger t is, the closer p(t) is to p₁. Similarly, the larger 1-t is, the closer p(t) is to p₀.
• The sum of weights is one, i.e., t + (1-t) = 1.
• If t is in [0,1], p(t) defined as (1-t)p₀ + tp₁ is called the linear interpolation of p₀ and p₁.

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

Linear Interpolation (cont’d)

2-14

• The x-, y- and z-coordinates of p(t) are defined independently by linear interpolation.

​

​

​

​

​

• Whatever attributes are associated with the end points, they can be linearly interpolated. Suppose that the endpoints are associated with colors c₀ and c₁, respectively, where c₀ = (R₀, G₀, B₀) and c₁ = (R₁, G₁, B₁). Then, the color c(t) is defined as follows:

​

​

​

​

​

​

​

c₀ = (255, 0, 0)

🡨 c₁ = (0, 0, 255)

🡨

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

Barycentric Coordinates

2-15

p

u

v

w

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

Barycentric Coordinates (cont’d)

2-16

u

v

w

u

v

w

u

v

w

v

w

p

u

v

w

p

p

p

p

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

Barycentric Coordinates (cont’d)

2-17

p

u

v

w

p

u

v

w

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