Lecture 14: Homogeneous Coordinates, Matrices, Quaternions, Lighting

# Creación de Videojuegos

### Homogeneous Coordinates, Matrices, Quaternions

---

# Coordinates

## Or: Where do we draw things?

---

# Coordinates

$$ \vec{v} = \begin{pmatrix} 
x \\\\ 
y
\end{pmatrix} $$

## Movement

$$ \vec{v}' = \vec{v} + \begin{pmatrix} 
\Delta x \\\\ 
\Delta y
\end{pmatrix} $$

## Rotation? Scaling? Combinations?

---

# Homogeneous coordinates

$$ \begin{pmatrix} 
x \\\\ 
y \\\\ 
1
\end{pmatrix} $$

---

# Homogeneous coordinates

$$ \begin{pmatrix} 
a_1 & b_1 & c_1 \\\\
a_2 & b_2 & c_2 \\\\
a_3 & b_3 & c_3 
\end{pmatrix}
\cdot
\begin{pmatrix} 
x \\\\ 
y \\\\ 
1 
\end{pmatrix} 
= 
\begin{pmatrix} 
a_1\cdot x + b_1 \cdot y + c_1 \\\\
a_2\cdot x + b_2 \cdot y + c_2 \\\\
a_2 \cdot x + b_3 \cdot y + c_3 \end{pmatrix}
$$

---

# Homogeneous coordinates

$$ \begin{pmatrix} 
a_1 & b_1 & c_1 \\\\
a_2 & b_2 & c_2 \\\\
0 & 0 & 1 
\end{pmatrix}
\cdot
\begin{pmatrix} 
x \\\\ 
y \\\\ 
1 
\end{pmatrix} 
= 
\begin{pmatrix} 
a_1\cdot x + b_1 \cdot y + c_1 \\\\
a_2\cdot x + b_2 \cdot y + c_2 \\\\
1 \end{pmatrix}
$$

---

# Homogeneous coordinates

$$ \begin{pmatrix} 
1 & 0 & 2 \\\\
0 & 1 & 0 \\\\
0 & 0 & 1 
\end{pmatrix}
\cdot
\begin{pmatrix} 
x \\\\ 
y \\\\ 
1 
\end{pmatrix} 
= 
\begin{pmatrix} 
1\cdot x + 0 \cdot y + 2 \\\\
0\cdot x + 1 \cdot y + 0 \\\\
0 \cdot x + 0 \cdot y + 1 \end{pmatrix}
$$

---

# Homogeneous coordinates

$$ \begin{pmatrix} 
1 & 0 & 2 \\\\
0 & 1 & 0 \\\\
0 & 0 & 1 
\end{pmatrix}
\cdot
\begin{pmatrix} 
x \\\\ 
y \\\\ 
1 
\end{pmatrix} 
= 
\begin{pmatrix} 
 x + 2 \\\\
 y \\\\
 1 \end{pmatrix}
$$

---

# Homogeneous coordinates

$$ \begin{pmatrix} 
1 & 0 & 0 \\\\
0 & 1 & 2 \\\\
0 & 0 & 1 
\end{pmatrix}
\cdot
\begin{pmatrix} 
x \\\\ 
y \\\\ 
1 
\end{pmatrix} 
= 
\begin{pmatrix} 
1\cdot x + 0 \cdot y + 0 \\\\
0\cdot x + 1 \cdot y + 2 \\\\
0 \cdot x + 0 \cdot y + 1 \end{pmatrix}
$$

---

# Homogeneous coordinates

$$ \begin{pmatrix} 
1 & 0 & 0 \\\\
0 & 1 & 2 \\\\
0 & 0 & 1 
\end{pmatrix}
\cdot
\begin{pmatrix} 
x \\\\ 
y \\\\ 
1 
\end{pmatrix} 
= 
\begin{pmatrix} 
 x \\\\
 y + 2 \\\\
 1 \end{pmatrix}
$$

---

# Homogeneous coordinates: Translation

$$ \begin{pmatrix} 
1 & 0 & \Delta x \\\\
0 & 1 & \Delta y \\\\
0 & 0 & 1 
\end{pmatrix}
\cdot
\begin{pmatrix} 
x \\\\ 
y \\\\ 
1 
\end{pmatrix} 
= 
\begin{pmatrix} 
 x + \Delta x \\\\
 y + \Delta y \\\\
 1 \end{pmatrix}
$$

---

# Homogeneous coordinates: Rotation?

Let's rotate 
$$ \vec{v} = 
\begin{pmatrix} 
x \\\\ 
y \\\\ 
1
\end{pmatrix} $$
by 90 degrees

---

# Homogeneous coordinates: Rotation?

$$ \begin{pmatrix} 
a_1 & b_1 & c_1 \\\\
a_2 & b_2 & c_2 \\\\
0 & 0 & 1 
\end{pmatrix}
\cdot
\begin{pmatrix} 
x \\\\ 
y \\\\ 
1
\end{pmatrix} = 
\begin{pmatrix} 
-y \\\\ 
x \\\\ 
1
\end{pmatrix} $$

---

# Homogeneous coordinates: Rotation

$$ \begin{pmatrix} 
0 & -1 & 0 \\\\
1 & 0 & 0 \\\\
0 & 0 & 1 
\end{pmatrix}
\cdot
\begin{pmatrix} 
x \\\\ 
y \\\\ 
1 
\end{pmatrix} 
= 
\begin{pmatrix} 
-y \\\\
x \\\\
1 \end{pmatrix}
$$

---

# How do you rotate by an arbitrary angle?

How do you rotate 
$$ \vec{v} =
\begin{pmatrix} 
x \\\\ 
y \\\\ 
1 
\end{pmatrix} 
$$
by `$\alpha $`?

---

# How do you rotate by an arbitrary angle?

What's the angle `$ \beta $` between `$ \vec{v} $` and the x axis?

---

# How do you rotate by an arbitrary angle?

What's the angle `$ \beta $` between `$ \vec{v} $` and the x axis?

$$ 
\tan(\beta) = \frac{y}{x} = \frac{\sin(\beta)}{\cos(\beta)}
$$

Note:

$$
x = c \cdot \cos(\beta)
$$
$$
y = c \cdot \sin(\beta)
$$

---

# Rotate

Now we rotate by `$\alpha $`

$$
\tan(\beta + \alpha) = \frac{\sin(\beta + \alpha)}{\cos(\beta + \alpha)} = \frac{y'}{x'}
$$

We want to construct a matrix such that

$$
\begin{pmatrix} 
a_1 & b_1 & c_1 \\\\
a_2 & b_2 & c_2 \\\\
0 & 0 & 1 
\end{pmatrix}
 \cdot 
\begin{pmatrix} 
x \\\\ 
y \\\\ 
1 
\end{pmatrix} 
=
\begin{pmatrix} 
x' \\\\ 
y' \\\\ 
1 
\end{pmatrix} 
$$

Recall: <br/>
`$x = c \cdot \cos(\beta)$` <br/>
`$y = c \cdot \sin(\beta)$`

---

# What is the rotation supposed to do?

$$
\begin{pmatrix} 
a_1 & b_1 & c_1 \\\\
a_2 & b_2 & c_2 \\\\
0 & 0 & 1 
\end{pmatrix}
 \cdot 
\begin{pmatrix} 
c \cdot \cos(\beta) \\\\ 
c \cdot \sin(\beta) \\\\ 
1 
\end{pmatrix} 
=
\begin{pmatrix} 
x' \\\\ 
y' \\\\ 
1 
\end{pmatrix} 
$$

$$
x' = a_1 \cdot c \cdot \cos(\beta) + b_1 \cdot c \cdot \sin(\beta) + c_1
$$
$$
y' = a_2 \cdot c \cdot \cos(\beta) + b_2 \cdot c \cdot \sin(\beta) + c_2
$$

$$
\frac{y'}{x'} = \frac{\sin(\beta + \alpha)}{\cos(\beta + \alpha)} = \frac{\sin(\beta) \cos(\alpha) + \cos(\beta) \sin(\alpha)}{\cos(\beta) \cos(\alpha) - \sin(\beta) \sin(\alpha)}
$$

---

# We can choose the values

$$
\frac{y'}{x'} = \frac{\sin(\beta) \cos(\alpha) + \cos(\beta) \sin(\alpha)}{\cos(\beta) \cos(\alpha) - \sin(\beta) \sin(\alpha)}
$$

$$
a_1 \cdot c \cdot \cos(\beta) + b_1 \cdot c \cdot \sin(\beta) + c_1 = \\\\
d \cdot (\cos(\beta) \cos(\alpha) - \sin(\beta) \sin(\alpha))
$$

$$
a_2 \cdot c \cdot \cos(\beta) + b_2 \cdot c \cdot \sin(\beta) + c_2 = \\\\
d \cdot (\sin(\beta) \cos(\alpha) + \cos(\beta) \sin(\alpha))
$$

---

# Some algebra

$$
c \cdot(\cos(\beta) \cdot a_1 + \sin(\beta)\cdot b_1) = \\\\
d \cdot (\cos(\beta) \cos(\alpha) - \sin(\beta) \sin(\alpha))
$$

$$
c \cdot (\sin(\beta) \cdot b_2 + \cos(\beta) \cdot a_2) = \\\\
d \cdot (\sin(\beta) \cos(\alpha) + \cos(\beta) \sin(\alpha))
$$

$$
R = 
\begin{pmatrix} 
\cos(\alpha) & -\sin(\alpha) & 0 \\\\
\sin(\alpha) & \cos(\alpha) & 0 \\\\
0 & 0 & 1 
\end{pmatrix}
$$

---

# What's the point?

- Yay, we got a matrix!
  
  - Why do we care?
  
  - Also, what were c and d?
  
  - Why would I ever use this?
  
---

# Matrix multiplication!

Matrix multiplication is associative, that means:

$$
A \cdot (B \cdot \vec{v}) = (A \cdot B) \cdot \vec{v}
$$

This means, we can compose rotations and translations, and then apply the <b>composed</b> transform to a vector.

Especially useful if we have many vectors to manipulate!

---

# Neat tricks

- (Our) matrices can be inverted
  
     - The inverse of a translation matrix performs the reverse translation 
     
     - The inverse of a rotation matrix performs the reverse rotation 
     
  - Rotation is always around the origin, what if our object is not at `$(0,0)\:$`  ?
  
     - Translate it to the origin first, then rotate, then translate it back to where it should be 
     
     - `$ T \cdot R \cdot T^{-1}$` 
     
---

# More neat tricks

- We can also do other transformations, like reflection, shears, scaling, etc.
  
$$
\begin{pmatrix} 
0.5 & 0 & 0 \\\\
0 & 0.5 & 0 \\\\
0 & 0 & 1 
\end{pmatrix}
 \cdot 
\begin{pmatrix} 
x \\\\ 
y \\\\ 
1 
\end{pmatrix} 
=
\begin{pmatrix} 
0.5x \\\\ 
0.5y \\\\ 
1 
\end{pmatrix}
$$
     
  - The same approach can be used for 3D coordinates
  
---

# Homogeneous coordinates in 3D

$$
\begin{pmatrix} 
x \\\\ 
y \\\\ 
z \\\\
1 
\end{pmatrix} 
$$

---

# Homogeneous coordinates in 3D

$$ \begin{pmatrix} 
a_1 & b_1 & c_1 & d_1 \\\\
a_2 & b_2 & c_2 & d_2 \\\\
a_3 & b_3 & c_3 & d_3 \\\\
0 & 0 & 0 & 1
\end{pmatrix}
\cdot
\begin{pmatrix} 
x \\\\ 
y \\\\ 
z \\\\
1 
\end{pmatrix} 
= 
\begin{pmatrix} 
a_1\cdot x + b_1 \cdot y + c_1 \cdot x + d_1\\\\
a_2\cdot x + b_2 \cdot y + c_2 \cdot y + d_2 \\\\
a_3 \cdot x + b_3 \cdot y + c_3 \cdot z + d_3 \\\\
1 \end{pmatrix}
$$

---

# Translation in 3D

<center>
$$ \begin{pmatrix} 
1 & 0 & 0 & \Delta x \\
0 & 1 & 0 & \Delta y \\
0 & 0 & 1 & \Delta z \\
0 & 0 & 0 & 1
\end{pmatrix}
\cdot
\begin{pmatrix} 
x \\ 
y \\ 
z \\
1 
\end{pmatrix} 
= 
\begin{pmatrix} 
x + \Delta x \\
y + \Delta y \\
z + \Delta z \\
1 \end{pmatrix}
$$
</center>

---

# Rotation in 3D?

## Maybe we can reuse the 2D rotation?

---

# Rotation in 3D
<center>
$$
R = 
\begin{pmatrix} 
\cos(\alpha) & -\sin(\alpha) & 0 & 0 \\\\
\sin(\alpha) & \cos(\alpha) & 0 & 0 \\\\
0 & 0 & 1 & 0 \\\\
0 & 0 & 0 & 1 
\end{pmatrix}
$$
</center>
What does this do?

* Apparently it leaves the z coordinate unchanged 
  
  * Rotates x and y 
  
  * Rotation around the z axis!
  
---

# Rotation around the y axis?

<center>
$$
R_y = 
\begin{pmatrix} 
\cos(\alpha) & 0 & \sin(\alpha) & 0  \\
0 & 1 & 0 & 0 \\
-\sin(\alpha) & 0 & \cos(\alpha) & 0 \\
0 & 0 & 0 & 1 
\end{pmatrix}
$$
</center>

Notice anything?

---

# Rotation around the x axis
<center>
$$
R_x = 
\begin{pmatrix} 
1 & 0 & 0 & 0 \\
0 & \cos(\alpha) & - \sin(\alpha) & 0 \\
0 & \sin(\alpha) & \cos(\alpha) & 0 \\
0 & 0 & 0 & 1 
\end{pmatrix}
$$
</center>

---

# Rotation around arbitrary vector

* What if we want to rotate around something other than the x, y or z axis?
  
  * Any rotation can be represented by these basis rotations!
  
  * Euler angles
  
  * We can compose rotations using matrix multiplication!
  
  * Order is important!
  
$$
R = R_y \cdot R_x \cdot R_z
$$

---

# Practice

What's the matrix that rotates an object by 60 degrees around the y axis, *after* it moves it `$\sqrt{3}\:\:$` units in the z direction?

How does it change the vector v?

$$
\vec{v} = \begin{pmatrix} 
1 \\\\
1 \\\\
0
\end{pmatrix}
$$

Helpful:
$$
\sin(60) = \frac{\sqrt{3}}{2}, \cos(60) = \frac{1}{2}, \sqrt{3} \approx 1.73
$$

---

# Gimbal Lock

---

# Interpolating between rotations

<div class="webgl-content">
      <div id="gameContainer" style="width: 700px; height: 400px"></div>
      <div class="footer">
        <div class="webgl-logo"></div>
        <div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>
      </div>
    </div>
    
---

# Quaternions!

* Alternative representation for 3D rotations 
  
  * Use *four* coordinates/numbers
  
  * Can be converted to/from rotation matrices
  
  * Any rotation can be represented as a single rotation around an axis
  
$$
q = \cos\left(\frac{\theta}{2}\right) + \sin\left(\frac{\theta}{2}\right) \cdot (x \cdot i + y \cdot j + z \cdot k)
$$

---

# Quaternion properties

Composition is easy:

$$
q' = q \cdot p \not = p \cdot q
$$

Self-inverse (for rotations):

$$
q \equiv -q
$$

Rotating a vector:

$$
v' = q \cdot v \cdot q^{-1}
$$

---

# Quaternions in Unity

* Rotations in Unity *are* quaternions 
  
  * You can multiply two quaternions to compose them
  
  * You can multiply a quaternion and a vector to rotate it
  
  * You can interpolate between quaternions to get smooth rotations:
  
```
Quaternion.Slerp(p, q, t)
```

---

# Rendering

---

# Recall from last week

* Model coordinates need to be translated to world coordinates (where is the mesh)
  
  * World coordinates are then translated to Camera coordinates (where in the field of view of the camera is the mesh?)
  
  * The Camera coordinates need to be projected onto a Viewport (objects that are further away become smaller)
  
---

# Recall from last week

* Model coordinates need to be translated to world coordinates (where is the mesh): *Model matrix*
  
  * World coordinates are then translated to Camera coordinates (where in the field of view of the camera is the mesh?): *View Matrix*
  
  * The Camera coordinates need to be projected onto a Viewport (objects that are further away become smaller): *Projection Matrix*
  
---

# View Matrix

* So far we have talked about how to move the objects in our scene around
  
  * But where is the Camera?
  
  * That's where the *View Matrix* comes in 
  
Futurama, Season 2, Episode 14:

*The engines don’t move the ship at all. The ship stays where it is and the engines move the universe around it.*

---

# View Matrix

---

# View Matrix

* Instead of defining where the Camera is, we give it a fixed position
  
  * Then, we move the scene into the field of view of the Camera
  
  * The picture is always in the xy plane
  
  * Larger z coordinates means something is further away from the Camera!  
  
  * Added bonus: We can do all these movements with a matrix
  
---

# Projection Matrix

* Now we need to figure out what our objects look like
  
  * Objects that are further away should be smaller 
  
$$
\begin{pmatrix} 
1 & 0 & 0 & 0  \\\\
0 & 1 & 0 & 0 \\\\
0 & 0 & 0 & 0 \\\\
0 & 0 & 1 & 0 
\end{pmatrix}
\cdot
\begin{pmatrix} 
x \\\\ 
y \\\\ 
z \\\\
1 
\end{pmatrix} 
=
\begin{pmatrix} 
x \\\\ 
y \\\\ 
0 \\\\
z 
\end{pmatrix} 
$$

---

# What now?

* We said earlier that the last coordinate is always 1
  
  * What are we supposed to do with this?
  
$$
\begin{pmatrix} 
x \\\\ 
y \\\\ 
0 \\\\
z 
\end{pmatrix} 
$$

---

# Actually ...

* To map from homogeneous coordinates to 3D vectors, we actually perform this operation:
  
$$
\begin{pmatrix} 
x \\\\ 
y \\\\ 
z \\\\
w
\end{pmatrix} 
\equiv 
\begin{pmatrix} 
x/w \\\\ 
y/w \\\\ 
z/w
\end{pmatrix} 
$$

* Our w was just always 1, so we could just discard it
  
---

# Projection Matrix
  
$$
\begin{pmatrix} 
1 & 0 & 0 & 0  \\\\
0 & 1 & 0 & 0 \\\\
0 & 0 & 0 & 0 \\\\
0 & 0 & 1 & 0 
\end{pmatrix}
\cdot
\begin{pmatrix} 
x \\\\ 
y \\\\ 
z \\\\
1 
\end{pmatrix} 
=
\begin{pmatrix} 
x \\\\ 
y \\\\ 
0 \\\\
z 
\end{pmatrix} 
\equiv 
\begin{pmatrix} 
x/z \\\\ 
y/z \\\\ 
0 
\end{pmatrix}
$$

* The further away an object is, the smaller it is 
  
  * We projected our objects onto the xy plane at z=0
  
---

# Matrices: summary

* We can represent arbitrary 3D movements as matrices 
   
   * The camera placement is represented by moving the objects to a fixed camera 
   
   * Projecting the objects onto the view plane is another matrix 
   
   * All of these matrices are composed 
   
$$
M = M_P \cdot M_V \cdot M_M
$$

---

# Let there be light

---

# The Phong Reflection Model

* The Phong Reflection Model is an empirical model for how lights are reflected off of surfaces 
  
  * Consists of ambient, diffuse and specular components
  
<img src="/CI-2700/assets/img/phongcomponents.png" width="100%"/>

---

# The Phong Reflection Model

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   width="500"
   height="300"
   viewBox="0 0 1100 700"
   id="svg2"
   version="1.0">
  <defs
     id="defs4">
    <marker
       orient="auto"
       refY="0"
       refX="0"
       id="Arrow2Lend"
       style="overflow:visible">
      <path
         id="path3656"
         style="font-size:12px;fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round"
         d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
         transform="matrix(-1.1,0,0,-1.1,-1.1,0)" />
    </marker>
    <marker
       orient="auto"
       refY="0"
       refX="0"
       id="Arrow1Mend"
       style="overflow:visible">
      <path
         id="path2934"
         d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
         style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;marker-start:none"
         transform="matrix(-0.4,0,0,-0.4,-4,0)" />
    </marker>
    
  </defs>
  <g
     id="layer1"
     transform="translate(55.210452,196.86586)">
    <g
       id="g4030"
       transform="matrix(1.6238686,0,0,1.6238686,-611.62146,-326.84403)">
      <path
         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
         d="m 913.4375,316.375 -261.86366,128.32712 1.21105,2.92981 L 915.125,319.78125 913.4375,316.375 z"
         id="path1876"
         sodipodi:nodetypes="ccccc" />
      <path
         style="fill-rule:evenodd;stroke:#000000;stroke-width:1.51999998pt;marker-start:none"
         d="m 900.66093,324.81482 -3.44322,10.18156 20.4742,-18.60449 -27.21255,4.97971 10.18157,3.44322 z"
         id="path4036" />
    </g>
    <path
       style="fill:none;stroke:none"
       id="path2762"
       d="m 457.14287,462.36218 a 38.57143,38.57143 0 1 1 -77.14286,0 38.57143,38.57143 0 1 1 77.14286,0 z"
       transform="matrix(0.22119995,0,0,0.22119995,216.82831,-201.07086)" />
    <path
       style="fill:#000000;fill-opacity:1;stroke:none"
       id="path3649"
       d="m 448.57143,415.21933 a 68.571426,71.428574 0 1 1 -137.14286,0 68.571426,71.428574 0 1 1 137.14286,0 z"
       transform="matrix(0.25806661,0,0,0.25216783,202.18698,-211.71736)" />
    <path
       transform="matrix(0.20684421,0,0,0.20211625,221.65158,-190.93488)"
       d="m 448.57143,415.21933 a 68.571426,71.428574 0 1 1 -137.14286,0 68.571426,71.428574 0 1 1 137.14286,0 z"
       id="path3732"
       style="fill:#ffffff;fill-opacity:1;stroke:none"
       sodipodi:type="arc" />
    <path
       style="fill:#000000;fill-opacity:1;stroke:none"
       id="path3734"
       d="m 448.57143,415.21933 a 68.571426,71.428574 0 1 1 -137.14286,0 68.571426,71.428574 0 1 1 137.14286,0 z"
       transform="matrix(0.09159318,0,0,0.08949948,267.07083,-139.30266)" />
    <path
       style="fill:none;stroke:#000000;stroke-width:5.11305046;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
       d="m 250.3243,-103.02959 c 24.01599,-25.28 66.99199,-41.71199 87.84798,1.896 -20.22399,12.639994 -51.99775,16.050532 -79.96819,-6.10099"
       id="path1874" />
    <path
       style="fill:none;stroke:#000000;stroke-width:3.79999995;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
       id="path3988"
       d="m 1077.1428,323.79075 -27.1356,-23.48389 3.099,35.75236 -16.0831,-32.08064 -10.8187,34.21683 -2.5821,-35.7934 -23.0894,27.47211 11.3119,-34.05694 -31.84487,16.545 23.48387,-27.13562 -35.75234,3.09907 32.08064,-16.08315 -34.21683,-10.81867 35.79343,-2.58216 -27.47214,-23.08936 34.05694,11.31194 -16.545,-31.84491 27.1356,23.48389 -3.099,-35.75236 16.0831,32.08064 10.8187,-34.21683 2.5821,35.7934 23.0894,-27.47211 -11.3119,34.05694 31.8449,-16.545 -23.4839,27.13562 35.7523,-3.09907 -32.0806,16.08315 34.2168,10.81867 -35.7934,2.58216 27.4721,23.08936 -34.0569,-11.31193 16.545,31.8449 z"
       transform="matrix(0.81193429,0,0,0.81193429,94.8186,-59.126889)" />
    <path
       style="fill:none;stroke:#000000;stroke-width:22.89999962;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
       d="M 176.53177,465.83031 C 305.76254,382.75339 607.301,391.98415 711.91638,471.98415"
       id="path4299" />
    <text
       xml:space="preserve"
       style="font-size:100px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Times New Roman;-inkscape-font-specification:Times New Roman"
       x="23.778008"
       y="303.32327"
       id="text4301"><tspan
         id="tspan4303"
         x="23.778008"
         y="303.32327">R</tspan></text>
    <text
       xml:space="preserve"
       style="font-size:100px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Times New Roman;-inkscape-font-specification:Times New Roman"
       x="226.81129"
       y="35.705002"
       id="text4301-1"
       ><tspan
         id="tspan4379"
         x="226.81129"
         y="35.705002">V</tspan></text>
    <text
       xml:space="preserve"
       style="font-size:100px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Times New Roman;-inkscape-font-specification:Times New Roman"
       x="468.65744"
       y="4.9357758"
       id="text4301-0"><tspan
         id="tspan4377"
         x="468.65744"
         y="4.9357758">N</tspan></text>
    <text
       xml:space="preserve"
       style="font-size:100px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Times New Roman;-inkscape-font-specification:Times New Roman"
       x="824.67297"
       y="303.15155"
       id="text4301-5"><tspan
         id="tspan4373"
         x="824.67297"
         y="303.15155">L</tspan></text>
    
    <g
       id="g4030-2"
       transform="matrix(0.28198182,-1.5991984,1.5991984,0.28198182,-450.30544,1314.4226)">
      <path
         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
         d="m 913.4375,316.375 -261.86366,128.32712 1.21105,2.92981 L 915.125,319.78125 913.4375,316.375 z"
         id="path1876-7" />
      <path
         style="fill-rule:evenodd;stroke:#000000;stroke-width:1.51999998pt;marker-start:none"
         d="m 900.66093,324.81482 -3.44322,10.18156 20.4742,-18.60449 -27.21255,4.97971 10.18157,3.44322 z"
         id="path4036-6" />
    </g>
    <g
       id="g4030-4"
       transform="matrix(0.71185714,-1.4595235,1.4595235,0.71185714,-667.3957,1029.4639)">
      <path
         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
         d="m 913.4375,316.375 -261.86366,128.32712 1.21105,2.92981 L 915.125,319.78125 913.4375,316.375 z"
         id="path1876-2" />
      <path
         style="fill-rule:evenodd;stroke:#000000;stroke-width:1.51999998pt;marker-start:none"
         d="m 900.66093,324.81482 -3.44322,10.18156 20.4742,-18.60449 -27.21255,4.97971 10.18157,3.44322 z"
         id="path4036-3" />
    </g>
    <g
       id="g4030-22"
       transform="matrix(-1.6238686,0,0,1.6238686,1504.5433,-328.44065)">
      <path
         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
         d="m 913.4375,316.375 -261.86366,128.32712 1.21105,2.92981 L 915.125,319.78125 913.4375,316.375 z"
         id="path1876-16" />
      <path
         style="fill-rule:evenodd;stroke:#000000;stroke-width:1.51999998pt;marker-start:none"
         d="m 900.66093,324.81482 -3.44322,10.18156 20.4742,-18.60449 -27.21255,4.97971 10.18157,3.44322 z"
         id="path4036-8" />
    </g>
  </g>
</svg>

$$
I = k_a \cdot i_a + \sum_m \left(k_d (L_m \cdot N) i_d + k_s (R_m \cdot V)^\alpha i_s \right)
$$

---

# How do we use this information?

* Flat shading: Calculate one value for the center of each triangle, and color the entire triangle that way 
  
  * Gouraud shading: Calculate one value for each vertex of a triangle and interpolate the color in between
  
  * Phong shading: Interpolate normals between the vertices of a triangle, and calculate the color for each pixel
  
<img src="/CI-2700/assets/img/Phong-shading-sample.jpg" width="60%"/><img src="/CI-2700/assets/img/Gouraud_low_anim.gif" width="30%"/>

---

# Note

* Phong reflection *model*: Equation to determine how light affects the color of a point 
    
  * Phong shading/Gouraud shading/Flat shading: Methods to *use* this equation
  
  * Shader: The *implementation*/*program* that performs shading
  
---

# Alternatives: Non-Photorealistic Shading

* Toon/Cel shaders!
  
<img src="/CI-2700/assets/img/unitytoon.png" width="100%"/>

---

# Animation

---

# T-Pose

---

# 3D Character Models

* The T-Pose exposes many parts of the model to be able to fill holes
  
  * Characters are therefore usually modeled this way 
  
  * But we want the character to move!
  
  * How do people move?
  
  * Skeletons and muscles!
  
---

# Skeletons

---

# Attaching the Skin

---

# Muscles

* The animation clips are the "muscles"
  
  * They determine where each bone should go and when 
  
  * The animator often only defines *keyframes* beTWEEN which the system *interpolates*
  
  * [Mixamo](https://www.mixamo.com/#/?page=1&query=gangnam&type=Motion%2CMotionPack)

---

# References

* <a href="http://www.opengl-tutorial.org/beginners-tutorials/tutorial-3-matrices/">OpenGL tutorial on matrices</a>

* <a href="https://www.youtube.com/watch?v=o1n02xKP138">Math for Game Programmers: Understanding Homogeneous Coordinates</a>
  
  * <a href="https://www.youtube.com/watch?v=4mXL751ko0w">Quaternion description video</a>
  
  * <a href="https://eater.net/quaternions">Interactive videos about Quaternions</a>
  
  * <a href="https://docs.unity3d.com/ScriptReference/Quaternion.html">Unity Quaternion documention</a>