Add the rest of university notes

docs/lectures/graphics/01_rendering.md

@@ -0,0 +1,71 @@
+# Rendering
+
+**Rendering** is the process of drawing images on the computer display. In this course we will focus on images which are made up of triangles.
+
+Rendering in 2-Dimensions involves the following 
+
+1. The graphics programmer specifies vertices which make up some triangles to be drawn. 
+2. The API assembles triangles from the vertices. 
+3. The API rasterises the triangles to calculate which pixels are inside each triangle.
+4. The pixels inside triangles, called fragments, are shaded to calculate the colour. 
+5. The colours are displayed at the appropriate pixels.
+
+A **vertex** is a point in space and is used to model geometry. A vertex can be presented using a vector, which is like an arrow. Can be written as $v=(3,2,0)$ 
+
+A *fragement* is a piece of a triangle which will be drawn to a pixel.
+
+A section of memory called a **frame buffer** (or colour buffer) stores the colour values that will be used at each pixel.
+
+A shader is a program. Shaders are run on the GPU.
+
+#### Rendering Stages
+
+1. Vertex Specification
+   - In the application the vertices making up the triangles are specified, that is, given positions. The application is a software program which might be a Computer Aided Design (CAD), some kind of simulation, a visualisation, or a videogame. The graphics programmer specifies the location of vertices which make up the triangles to be rendered. These vertices are passed to the vertex shaders.
+2. Vertex Shader
+   - Vertex processing by the vertex shader moves the vertices around. . The Vertices are used to construct triangles.
+3. Rasterisation
+   - There may be empty space around the triangles. Rasterisation is the process of taking all of the triangles and figuring out which pixels are inside each of the triangles.
+   - Each of these pixels inside the triangles is called a fragment.
+   - Rasterisation will generate a fragment for each pixel which is inside a triangle. The fragments are passed to the fragment shaders.
+4.  Fragment Shader
+   - The colour of Fragments is calculated by the fragment shader.
+
+## Rasterisation
+
+```java
+for each pixel y in Y dimension {
+	for each pixel x in X dimension {
+		for each triangle t {
+ 			if pixel x,y is inside triangle t {
+                Call fragment shader to
+				calculate the fragment colour
+			}
+        }
+	}
+}
+```
+
+#### Barcentric Coordinates
+
+We can use this to calculate if a point is inside a triangle or not.
+
+The barrcentric coordintates are $\alpha, \beta, \gamma$.
+
+$\alpha$ corresponds to the normalised linear distance of P between the line $\alpha$=0 and $\alpha$=1
+
+$\beta$ corresponds to the normalised linear distance of P between the line AC and point B
+
+$\gamma$ corresponds to the normalised linear distance of P between the line AB and point C
+
+If $\alpha, \beta, \gamma$ are all in the range $[0..1]$ then the point is within the triangle.
+
+##### Calculating Barycentric Coordinates
+
+$line(A, B, P) = (B_y-A_y)P_x+(A_x-B_x)P_y+B_xA_y-A_xB_y$
+
+$\alpha = \frac{line(B,C,P)}{line(B,C,A)}$
+
+$\beta = \frac{line(A,C,P)}{line(A,C,B)}$
+
+$\gamma = \frac{line(A,B,P)}{line(A,B,C)}$

docs/lectures/graphics/02_opengl_glfw_glad.md

@@ -0,0 +1,20 @@
+# OpenGL, GLFW and GLSL
+
+#### Structure of a graphics program
+
+1. Make a window and a context
+
+   - This is OS specific, therefore we need GLFW to set this up for us
+
+2. Load all OpenGL methods (GLAD)
+
+3. Compile shaders
+
+4. Specify vertices (C)
+
+5. Setup objects to communicate to the shaders (OpenGL)
+
+6. Render loop (OpenGL)
+
+7. Deinitialisation (GLFW)
+

docs/lectures/graphics/03_graphic_math.md

@@ -0,0 +1,130 @@
+# Mathematics for Graphics
+
+### Vectors
+
+- The n-dimensional Euclidean Space is $\mathbb{R}^n$
+  - $\mathbb{R}^n = \{(v_0, v_1, ... v_{n-1}) | v_0, v_1, ...v_{n-1} \in \mathbb{R}\}$ 
+- A vector is an n-turple
+- $v\in \mathbb{R}^n \Longleftrightarrow v=(v_0, v_1, ...v_{n-1}) | v_0, v_1, ...v_{n-1} \in \mathbb{R}$
+- In computer graphics we normally deal with 3-Dimensional Euclidean space $\mathbb{R}^3$
+  - vec3 notation:
+    - $v=(v_0, v_1, v_2)$
+    - $v = \begin{pmatrix} {v_0}\\{v_1}\\{v_2} \end{pmatrix}$
+  - Where $v_0$ represents x, $v_1$ represents y, and $v_2$ represents z axis
+
+##### Vector Scaling
+
+Each element of $v$ is scaled independently by $s$. Only the length is changed
+
+$$
+v\cdot s = \begin{pmatrix} {v_0\cdot s}\\{v_1\cdot s}\\{v_2\cdot s} \end{pmatrix}
+$$
+
+##### Vector Addition
+
+$$
+v + u = \begin{pmatrix} {v_0+u_0}\\{v_1+u_1}\\{v_2+u_2} \end{pmatrix}
+$$
+
+##### Vector Length
+
+$$
+||v|| = \sqrt{v_0^2 + v_1^2 + v_2^2}
+$$
+
+##### Vector Normalisation
+
+To change the length of the vector to 1.
+
+$$
+\frac{1}{||v||} \cdot v
+$$
+
+$\hat{v}$ is the notation for a normalised vector
+
+##### Dot Product
+
+$$
+u\cdot v = \sum_{i=0}^{n-1} u_i \times v_i
+$$
+
+or $u\cdot v = (u_0 * v_0) + (u_1 * v_1) + (u_2 * v_2)$
+
+The dot product is also defined in $\mathbb{R}^2$ and $\mathbb{R}^3$ as:
+
+$$
+u\cdot v = ||u||\times||v||cos\theta
+$$
+
+where $\theta$ is the smallest angle between $u$ and $v$
+
+If the dot product is **0**: the two vectors are **perpendicular**
+
+If the dot product is **positive**: $0 \leq \theta \leq \frac{\pi}{2}$
+
+If the dot product is **negative**: $\frac{\pi}{2} \leq \theta \leq \pi$
+
+##### Cross Product
+
+In $\mathbb{R}^3$ cross product is defined as follows:
+
+$$
+u \times v = \begin{pmatrix} 
+(u_1 * v_2)-(u_2*v_1)\\
+(u_2 * v_0)-(u_0*v_2)\\
+(u_0 * v_1)-(u_1*v_0) \end{pmatrix}
+$$
+
+##### Matrices
+
+**Identity Matrix**
+
+$$
+\begin{pmatrix}
+1 \quad 0 \quad 0 \quad 0 \\
+0 \quad 1 \quad 0 \quad 0 \\
+0 \quad 0 \quad 1 \quad 0 \\
+0 \quad 0 \quad 0 \quad 1
+\end{pmatrix}
+$$
+
+###### Transpose of a Matrix
+
+Turns each row into a column
+
+![1645633205.png](img/1645633205.png)
+
+###### Matrix addition
+
+![1645633407.png](img/1645633407.png)
+
+###### Matrix Multiplication
+
+Two matrices can only be multiplied if they both have the same number of columns and rows.
+
+To get the resulting matrix, for each $(x,y)$ pair, is the cross product of the $x^{th}$ column and the $y^{th}$ row.
+
+- Matrix multiplication is not communative
+  - $MN \neq NM$
+
+###### Matrix-Vector Multiplication
+
+A matrix multiplied by vector gives new vector
+
+Each row of the resulting vector is that row of the vector, dot producted with that row on the matrix.
+
+##### Trigonometry
+
+If $p=(p_x, p_y)$ is a unit vector, we can write them as:
+
+$$
+p_x = cos \space \alpha \\
+p_y = sin \space \alpha
+$$
+
+$$
+sin \space \alpha = \frac{opp}{hyp} \\
+cos \space \alpha = \frac{adj}{hyp} \\
+tan \space \alpha = \frac{opp}{adj} \\
+hyp^2 = opp^2 + adj^2
+$$

docs/lectures/graphics/04_transformations.md

@@ -0,0 +1,151 @@
+# Transformations
+
+### Translation
+
+Translation is done by adding/subtracting the translation distance to either the x or y (or both) component
+
+A translation of $(3,2)$ done on vector $u=\begin{pmatrix} u_0\\u_1\end{pmatrix}$
+
+$u'=\begin{pmatrix} u_0+3\\u_1+2\end{pmatrix}$
+
+This can be applied to a triangle, where every vertex is translated by the same amount.
+
+### Rotation
+
+Vector $v$ can be rotated by angle $\theta$ radians anticlockwise as follows
+
+$$
+rot(v) = \begin{pmatrix}
+cos\theta * v_0 - sin\theta * v_1 \\
+sin\theta * v_0 - cos\theta * v_1
+\end{pmatrix}
+$$
+
+![1646415138.png](img/1646415138.png)
+
+We can rotate triangles by rotating each vertex
+
+### Scale
+
+The vector $v$ can be scaled by scalar $s$ in each dimension independently
+
+$$
+v \cdot s = \begin{pmatrix} v_0 \cdot s_0 \\ v_1\cdot s_1 \end{pmatrix}
+$$
+
+We can scale triangles by scaling each of its vertices
+
+### Transformation Matrix
+
+#### Translation
+
+This is where we represent a transformation in the form of a matrix
+
+- The translation matrix, **T**, which translates by some vector **t** $= (t_x, t_y, t_z)$
+
+$$
+T(t) = \begin{pmatrix}
+1 \quad 0 \quad 0 \quad t_x \\
+0 \quad 1 \quad 0 \quad t_y \\
+0 \quad 0 \quad 1 \quad t_z \\
+0 \quad 0 \quad 0 \quad 1
+\end{pmatrix}
+$$
+
+#### Rotation
+
+- The rotations around each axis by some angle $\theta$ are represented as matrices $R_x, R_y, R_z$
+- This is in 2 dimensions
+
+![1646415811.png](img/1646415811.png)
+
+#### Scale
+
+$$
+S(t) = \begin{pmatrix}
+s_x \quad 0 \quad 0 \quad 0 \\
+0 \quad s_y \quad 0 \quad 0 \\
+0 \quad 0 \quad s_z \quad 0 \\
+0 \quad 0 \quad 0 \quad 1
+\end{pmatrix}
+$$
+
+### Homogeneous Coordinates
+
+- Vector defines a **direction** or a **position**
+- We can rotate directions and positions
+- We can scale directions and positions
+- We can only translate positions
+
+A homogeneous vector is $p=(p_x, p_y, p_z, p_w)$
+
+- Transforming a point $p$ is done by multiplying the vector (with $w$ set to 1) by the transformation matrix $M$
+- To transform vectors the $w$ must be set to 1
+
+![1646416149.png](img/1646416149.png)
+
+The translation matrix can be applied to point $p$ by multiplying the point by the matrix
+
+![1646416282.png](img/1646416282.png)
+
+The scale matrix can be applied to a point $p$ by multiplying the point by the matrix
+
+![1646416316.png](img/1646416316.png)
+
+The rotation around x matrix can be applied to a point $p$ by multiplying the point by the matrix
+
+![1646416447.png](img/1646416447.png)
+
+y:
+
+![1646416456.png](img/1646416456.png)
+
+z:
+
+![1646416468.png](img/1646416468.png)
+
+#### Combining Transformations
+
+For example if point $p$ needs to be scaled by $s=(2,1,1)$ and then translated by $t=(1,0,0)$
+
+$$
+S = \begin{pmatrix}
+2 \quad 0 \quad 0 \quad 0 \\
+0 \quad 1 \quad 0 \quad 0 \\
+0 \quad 0 \quad 1 \quad 0 \\
+0 \quad 0 \quad 0 \quad 1
+\end{pmatrix}
+\\\\
+T = \begin{pmatrix}
+1 \quad 0 \quad 0 \quad 1 \\
+0 \quad 1 \quad 0 \quad 0 \\
+0 \quad 0 \quad 1 \quad 0 \\
+0 \quad 0 \quad 0 \quad 1
+\end{pmatrix}
+\\\\
+TS = T\times S =
+\begin{pmatrix}
+2 \quad 0 \quad 0 \quad 1 \\
+0 \quad 1 \quad 0 \quad 0 \\
+0 \quad 0 \quad 1 \quad 0 \\
+0 \quad 0 \quad 0 \quad 1
+\end{pmatrix}
+$$
+
+Matrix multiplication is read from right to left
+
+The order of the transformations makes a difference and can change the resulting vector for example
+
+$$
+ST = S\times T =
+\begin{pmatrix}
+2 \quad 0 \quad 0 \quad 2 \\
+0 \quad 1 \quad 0 \quad 0 \\
+0 \quad 0 \quad 1 \quad 0 \\
+0 \quad 0 \quad 0 \quad 1
+\end{pmatrix}
+$$
+
+![1646417286.png](img/1646417286.png)
+
+The difference between translating and scaling vs scaling and translating vector $v$

docs/lectures/graphics/05_2d_to_3d.md

@@ -0,0 +1,41 @@
+# 2D to 3D
+
+#### Spaces and Transformations
+
+![1646763917.png](img/1646763917.png)
+
+- **Model Space**
+    - Model space is relative to an individual model which is made up of vertices.
+    - A cube has one vertex at each corner which are positioned relative to the centre of the cube
+    - In model space there is no information about where a model is relative to anything in the world, there is only information about the relative positions of the vertices which make up the model
+- **World Space**
+    - World space is relative top a larger coordinate system
+    - Vertices are positioned in model space and then all moved to the appropriate position in the world
+- **View Space**
+    - View space has all vertices from the perspective of the viewer
+    - Vertices aren’t defined in view space. The world is moved relative to the viewer position
+- **Clip space**
+    - Clip space is an intermediate space after vertices have been projected to what is going to be drawn to the screen
+- **Normalised Device Coordinate space**
+    - NDC space is almost identical to the pixels on the screen. 
+    - Vertices inside the NDC space will be rendered at those positions
+- **Screen space**
+    - Screen space maps directly to the pixels on the screen
+    - From now vertices can be used to construct triangles, which are rasterised and the appropriate pixels are coloured
+
+- Model Transform
+    - The transformation of vertices from model space to world space
+- View transform
+    - The transform of vertices from world space to view space
+- Projection transform
+    - The projection of vertices from view space to clip space
+- Perspective Division
+    - The division of each component by its homogeneous $w$ component
+- Viewport Transformation
+    - The mapping of normalised coordinates to vertices at screen pixel coordinates 
+
+#### View Space with Frustum
+
+![1646764884.png](img/1646764884.png)
+
+Everything outside the frustum isn’t rendered

docs/lectures/graphics/06_rendering_pipeline.md

@@ -0,0 +1,26 @@
+# The Rendering Pipeline
+
+The four rendering stages:
+
+1. Vertex Specification
+2. Vertex processing
+3. Rasterisation
+4. Fragment shader
+
+![1647365644.png](img/1647365644.png)
+
+- **Application stage** is the software that runs on the CPU
+  - ![1647366052.png](img/1647366052.png)
+- **Vertex processing stage** is responsible for processing operations on individual vertices
+  - In this stage vertex positions are transformed from model space to world and then view space, and projected to clip coordinates
+  - Vertex **post processing**:
+    1. Primitive Assembly
+    2. Clipping
+       - ![1647366278.png](img/1647366278.png)
+    3. Perspective divide
+    4. View-port transformation
+- **Rasterisation stage** is responsible for calculating all of the pixels inside the triangles that are being rendered
+- **Pixel processing stage** is responsible for processing operations on individual fragments.
+  - Texturing can also happen in the fragment shader
+  - Fragment shader computes a colour which is then merged with the colour buffer
+  - Merging calculates which fragments are hidden behind other fragments and only keeps the colour for the visible fragment

docs/lectures/graphics/07_camera.md

@@ -0,0 +1,64 @@
+# Camera Essentials
+
+There are two types of camera:
+
+1. A model-viewer camera
+2. A fly-through camera
+
+A camera involves
+
+1. A position in 3D space
+2. A forward direction
+3. A right direction
+4. An up direction
+
+Calculating a camera direction can be achieved using Euler angles, **pitch**, **yaw** and **roll** .
+
+- Pitch rotates the camera on the x axis
+  - Think of a plane pointing its nose to the floor or to the sky
+- Yaw rotates the camera on the y axis
+  - Think a plane moving the nose left to right keeping the wings parallel with the ground
+- Roll rotates the camera on the z axis
+  - Think tilting the plane’s wings left and right, but not changing the direction of the nose
+
+#### Model-Viewer Camera
+
+This is a camera that can rotate around the model in a sphere.
+
+![1648476699.png](img/1648476699.png)
+
+Changing the pitch of the camera makes the camera move upwards and point downwards, here the camera moves around the sphere where the direction is always towards the model
+
+![1648476784.png](img/1648476784.png)
+
+The camera can also move back and forwards, making the sphere bigger or smaller.
+
+![1648476819.png](img/1648476819.png)
+
+$$
+\begin{aligned}
+p_x = &\cos\theta * \cos\alpha \\
+p_y = &\sin\alpha \\
+p_z = &\sin\theta * \cos\alpha
+\end{aligned}
+$$
+
+#### Fly-Through Camera
+
+The camera has a position in world space and a focus direction `front`, which can be focused on the model or not.
+
+We can move this kind of camera, forward, backward, left and right along with pitch, roll and yaw.
+
+The camera is at the center of the sphere, and the model moves around the edge of the sphere.
+
+A unit vector points from the camera to the model as the front direction of the camera
+
+We can move the camera forwards and backwards by
+
+```c
+pos += front //forwards
+pos -= front //backwards
+
+pos += right //move right
+pos -= right //move left
+```