1 of 60

Nima Kalantari

CSCE 441 - Computer Graphics

​

Linear Algebra

Some slides from Ravi Ramamoorthi

2 of 60

Motivation

  • Many graphics concepts need basic math
    • Vectors (dot products, cross products, …)
    • Matrices (matrix-matrix mult., …)
      • E.g., an operation like translating or rotating points on object can be matrix-matrix multiply

​

​

3 of 60

Important concepts

  • Points
  • Vectors
  • Coordinate systems

4 of 60

Points

  • Represent locations
    • E.g., location of college station, triangle vertices
  • Defined using a set of numbers
    • 3 numbers in 3D

5 of 60

Vectors

  • Represent length and direction
    • E.g., displacement from A to B
  • Usually written as
  • Absolute position not important
    • 2 miles NW means the same here and in Austin
  • Magnitude written as

=

x

y

6 of 60

Normalized vectors

  • Done by dividing a vector by its magnitude
  • Normalized vector has a magnitude of 1
  • Used to indicate direction
    • E.g., normals

7 of 60

Coordinates

  • Points and vectors are defined in coordinate systems
  • Represented using a set of orthonormal vectors
    • Ortho means the the vectors are orthogonal to each other
    • Normal means the vectors have unit length

​

​

​

​

​

​

x

y

8 of 60

Operations

9 of 60

Point addition and subtraction

  • Adding points
    • Physically meaningless
    • Think about adding College Station and Houston locations
  • Subtracting points
    • Gives you a vector

x

y

10 of 60

Vector Addition

  • Gives you another vector
  • Geometrically: Parallelogram rule
  • Simply add the coordinates
  • Commutative

​

a

b

a+b

= b+a

11 of 60

Vector Multiplication

  • Dot product
  • Cross product

​

​

​

12 of 60

Dot (scalar) product

​

​

​

13 of 60

Dot (scalar) product

​

​

​

​

14 of 60

Properties

  • Commutative
  • Distributive
  • Scalar multiplication
  • Dot product with self

15 of 60

Dot product: some applications in CG

  • Find angle between two vectors
    • Cosine of angle between light source and normal for shading
  • Finding projection of one vector on another
    • Coordinates of point in arbitrary coordinate system

​

​

​

16 of 60

Angle between two vectors

​

​

​

​

​

17 of 60

Angle between two vectors

​

​

​

​

​

Dot product of two unit-vectors is the

cosine of the angle between them

18 of 60

Projections (of b on a)

​

​

​

​

​

Length

19 of 60

Projections (of b on a)

​

​

​

​

​

Length

Vector

20 of 60

Vector Multiplication

  • Dot product
  • Cross product

​

​

21 of 60

Coordinate systems

  • Left-handed
  • Right-handed (we use right-handed)

z

x

y

x

z

y

22 of 60

Left- and right-handed coordinates

  • With left hand: left-handed coordinate
  • With right hand: right-handed coordinate

Image from Drew Noaks

23 of 60

Examples

Image from Drew Noaks

z

x

y

x

z

y

Left-handed

Right-handed

24 of 60

Cross (vector) product

​

​

​

​

​

  • Cross product orthogonal to two initial vectors
  • Direction determined by right-hand rule

​

​

​

25 of 60

Right-hand rule

Image from Wikipedia

26 of 60

Cross (vector) product

​

​

​

​

​

  • Cross product orthogonal to two initial vectors
  • Direction determined by right-hand rule
  • Useful in constructing coordinate systems
    • Later in view transformation

​

​

​

​

27 of 60

Cross product: Cartesian formula?

​

​

​

​

​

​

​

​

​

28 of 60

Cross product: Cartesian formula?

​

​

​

​

​

​

​

​

​

29 of 60

Cross product: Cartesian formula?

​

​

​

​

​

​

​

​

​

30 of 60

Cross product

​

​

​

​

​

​

​

​

​

area of the parallelogram

31 of 60

Cross product: Properties

​

​

​

​

​

​

​

​

​

32 of 60

Cross product: Properties

​

​

​

​

​

​

​

​

​

33 of 60

Matrices

34 of 60

Matrices

  • Can be used to transform points (vectors)
    • Translation, rotation, shear, scale

​

​

35 of 60

What is a matrix?

  • Array of numbers (m×n = m rows, n columns)

​

​

​

​

  • Addition and multiplication by a scalar
    • element by element

​

​

36 of 60

Matrix-matrix multiplication

  • Number of columns in first must = rows in second

37 of 60

Matrix-matrix multiplication

  • Number of columns in first must = rows in second

38 of 60

Matrix-matrix multiplication

  • Number of columns in first must = rows in second

​

​

​

​

  • Element (i, j) in product is:

(row i of 1st matrix) x (column j of 2nd matrix)

​

39 of 60

Matrix-matrix multiplication

  • Number of columns in first must = rows in second

​

​

​

​

  • Element (i, j) in product is:

(row i of 1st matrix) x (column j of 2nd matrix)

​

40 of 60

Matrix-matrix multiplication

  • Number of columns in first must = rows in second

​

​

​

​

  • Element (i, j) in product is:

(row i of 1st matrix) x (column j of 2nd matrix)

​

41 of 60

Matrix-matrix multiplication

  • Number of columns in first must = rows in second

​

​

​

​

  • Element (i, j) in product is:

(row i of 1st matrix) x (column j of 2nd matrix)

​

42 of 60

Matrix-matrix multiplication

  • Properties
    • Non-commutative
      • AB and BA are different in general

​

​

​

​

      • Not only not equal, but also illegal!
    • Associative and distributive
      • (AB)C = A(BC)
      • A(B+C) = AB + AC

43 of 60

Matrix-matrix multiplication

  • Key for transforming points
  • Treat point as a column matrix (m×1)
  • E.g., 2D reflection about y-axis

​

​

​

44 of 60

Transpose of a Matrix

  • Switch row and columns

45 of 60

Transpose of a Matrix

  • Switch row and columns

46 of 60

Transpose of a Matrix

  • Switch row and columns

47 of 60

Identity matrix and inverses

  • Identity matrix

​

​

  • Matrix multiplied by identity = same matrix

​

  • Matrix multiplied by its inverse = identity

48 of 60

Vector multiplication in matrix form

  • Dot product?

​

​

​

  • Cross product?

Dual matrix of vector

49 of 60

Assignment 1

  • Goal: becoming familiar with OpenGL and event-driven programming
  • Write a simple paint program
  • 50 points, what percentage of total grade?
    • Let’s say all the assignments = 500 points
    • 50/500 * 70% = 7%
  • Deadline Sep. 10th
  • Start early!

50 of 60

What is OpenGL?

  • Computer graphics rendering API
    • Can be used to generate images by rendering geometric and image primitives
    • Forms the basis for a variety of interactive applications
      • Adobe, CAD, etc.
  • Developed by SGI in 1992
  • Hardware and operating system independent
  • DirectX is an alternative API from Microsoft

​

51 of 60

What OpenGL does not have?

  • Commands for creating window
  • Commands for taking user inputs
  • We use GLFW for these tasks!

​

52 of 60

Assignment 1 code structure

int main()

{

InitializeWindowAndEvents();

​

while (WindowIsOpen() == true)

{

glClearColor(0.0f, 0.0f, 0.0f, 1.0f);

glClear(GL_COLOR_BUFFER_BIT);

​

RenderTheScene();

​

UpdateWindowAndEvents();

}

​

return 0;

}

53 of 60

Assignment 1 code structure

int main()

{

InitializeWindowAndEvents();

​

while (glfwWindowShouldClose(window) == false)

{

glClearColor(0.0f, 0.0f, 0.0f, 1.0f);

glClear(GL_COLOR_BUFFER_BIT);

​

RenderTheScene();

​

UpdateWindowAndEvents();

}

​

return 0;

}

Creates a window and mouse and keyboard events

54 of 60

Assignment 1 code structure

  • GLFW is an API for creating windows and handling inputs

​

void InitializeWindowAndEvents()

{

…

glfwInit();

window = glfwCreateWindow(…);

glfwMakeContextCurrent(window);

glfwSetCursorPosCallback(window, CursorPositionCallback);

glfwSetCharCallback(window, CharacterCallback);

…

}

void CursorPositionCallback(GLFWwindow* window, double xpos, double ypos)

{

…

}

55 of 60

Assignment 1 code structure

int main()

{

InitializeWindowAndEvents();

​

while (glfwWindowShouldClose(window) == false)

{

glClearColor(0.0f, 0.0f, 0.0f, 1.0f);

glClear(GL_COLOR_BUFFER_BIT);

​

RenderTheScene();

​

UpdateWindowAndEvents();

}

​

return 0;

}

Creates a window and mouse and keyboard events

56 of 60

Assignment 1 code structure

int main()

{

InitializeWindowAndEvents();

​

while (glfwWindowShouldClose(window) == false)

{

glClearColor(0.0f, 0.0f, 0.0f, 1.0f);

glClear(GL_COLOR_BUFFER_BIT);

​

RenderTheScene();

​

UpdateWindowAndEvents();

}

​

return 0;

}

57 of 60

Assignment 1 code structure

int main()

{

InitializeWindowAndEvents();

​

while (glfwWindowShouldClose(window) == false)

{

glClearColor(0.0f, 0.0f, 0.0f, 1.0f);

glClear(GL_COLOR_BUFFER_BIT);

​

RenderTheScene();

​

UpdateWindowAndEvents();

}

​

return 0;

}

red

green

blue

alpha

usually called once outside the loop

58 of 60

Assignment 1 code structure

int main()

{

InitializeWindowAndEvents();

​

while (glfwWindowShouldClose(window) == false)

{

glClearColor(0.0f, 0.0f, 0.0f, 1.0f);

glClear(GL_COLOR_BUFFER_BIT);

​

RenderTheScene();

​

UpdateWindowAndEvents();

}

​

return 0;

}

Fills in the framebuffer either from geometric primitives or images

59 of 60

Assignment 1 code structure

int RenderTheScene()

{

glDrawPixels(…, frameBuffer);

}

60 of 60

Assignment 1 code structure

void main()

{

InitializeWindowAndEvents();

​

while (glfwWindowShouldClose(window) == false)

{

glClearColor(0.0f, 0.0f, 0.0f, 1.0f);

glClear(GL_COLOR_BUFFER_BIT);

​

RenderTheScene();

​

UpdateWindowAndEvents();

}

​

return 0;

}