# In the BeginningThere Was Pixels

### AA = Filter Before Sampling

Gaussian Blur, MIP Mapping, Anisotropic Filter

### Sub-Pixel AA (RGB)

-webkit-font-smoothing

# This is the Part Where You LearnLinear Algebra

### Matrix

$$\begin{bmatrix} \class{mj-blue}{0.53} & \class{mj-green}{0.42} \\ \class{mj-blue}{-0.32} & \class{mj-green}{0.77} \end{bmatrix}$$

### Matrix-Vector Multiply

$$\class{mj-purple}{\vec v'} = \mathbf{M} \cdot \class{mj-orangered}{\vec v}$$

$$\begin{bmatrix} \class{mj-purple}{x'} \\ \class{mj-purple}{y'} \end{bmatrix} = \begin{bmatrix} \class{mj-blue}{0.53} & \class{mj-green}{0.42} \\ \class{mj-blue}{-0.32} & \class{mj-green}{0.77} \end{bmatrix} \cdot \begin{bmatrix} \class{mj-orangered}{x} \\ \class{mj-orangered}{y} \end{bmatrix}$$

### Disassemble and Reassemble

$$\class{mj-purple}{\vec v'} = \mathbf{M} \cdot \class{mj-orangered}{\vec v}$$

$$\begin{bmatrix} \class{mj-purple}{x'} \\ \class{mj-purple}{y'} \end{bmatrix} = \class{mj-orangered}{x} \cdot \begin{bmatrix} \class{mj-blue}{0.53} \\ \class{mj-blue}{-0.32} \end{bmatrix} + \class{mj-orangered}{y} \cdot \begin{bmatrix} \class{mj-green}{0.42} \\ \class{mj-green}{0.77} \end{bmatrix}$$

### Matrix-Matrix Multiplication

$$\class{mj-purple}{\vec v'} = \mathbf{M'} \cdot \class{mj-orangered}{\vec v} = \mathbf{R} \cdot \mathbf{M} \cdot \class{mj-orangered}{\vec v}$$

$$\begin{bmatrix} \class{mj-purple}{x'} \\ \class{mj-purple}{y'} \end{bmatrix} = \begin{bmatrix} \class{mj-blue}{-0.32} & \class{mj-green}{0.77} \\ \class{mj-blue}{-0.53} & \class{mj-green}{-0.42} \end{bmatrix} \begin{bmatrix} \class{mj-orangered}{x} \\ \class{mj-orangered}{y} \end{bmatrix}$$
$$= \begin{bmatrix} \class{mj-blue}{0} & \class{mj-green}{1} \\ \class{mj-blue}{-1} & \class{mj-green}{0} \end{bmatrix} \begin{bmatrix} \class{mj-blue}{0.53} & \class{mj-green}{0.42} \\ \class{mj-blue}{-0.32} & \class{mj-green}{0.77} \end{bmatrix} \begin{bmatrix} \class{mj-orangered}{x} \\ \class{mj-orangered}{y} \end{bmatrix}$$

### 3D

$$\class{mj-purple}{\vec v'} = \mathbf{M} \cdot \class{mj-orangered}{\vec v}$$

$$\begin{bmatrix} \class{mj-purple}{x'} \\ \class{mj-purple}{y'} \\ \class{mj-purple}{z'} \end{bmatrix} = \begin{bmatrix} \class{mj-blue}{a} & \class{mj-green}{d} & \class{mj-red}{g} \\ \class{mj-blue}{b} & \class{mj-green}{e} & \class{mj-red}{h} \\ \class{mj-blue}{c} & \class{mj-green}{f} & \class{mj-red}{i} \end{bmatrix} \begin{bmatrix} \class{mj-orangered}{x} \\ \class{mj-orangered}{y} \\ \class{mj-orangered}{z} \end{bmatrix}$$

### 4D?

$$\class{mj-purple}{\vec v'} = \mathbf{M} \cdot \class{mj-orangered}{\vec v}$$

$$\begin{bmatrix} \class{mj-purple}{x'} \\ \class{mj-purple}{y'} \\ \class{mj-purple}{z'} \\ \class{mj-purple}{w'} \end{bmatrix} = \begin{bmatrix} \class{mj-blue}{a} & \class{mj-green}{e} & \class{mj-red}{i} & \class{mj-indigo}{m} \\ \class{mj-blue}{b} & \class{mj-green}{f} & \class{mj-red}{j} & \class{mj-indigo}{n} \\ \class{mj-blue}{c} & \class{mj-green}{g} & \class{mj-red}{k} & \class{mj-indigo}{o} \\ \class{mj-blue}{d} & \class{mj-green}{h} & \class{mj-red}{l} & \class{mj-indigo}{p} \end{bmatrix} \begin{bmatrix} \class{mj-orangered}{x} \\ \class{mj-orangered}{y} \\ \class{mj-orangered}{z} \\ \class{mj-orangered}{w} \end{bmatrix}$$

### Projective 3D Transform = 3D XYZ Matrix + Translation + Perspective

$$\begin{bmatrix} \class{mj-blue}{a} & \class{mj-green}{e} & \class{mj-red}{i} & \class{mj-indigo}{m} \\ \class{mj-blue}{b} & \class{mj-green}{f} & \class{mj-red}{j} & \class{mj-indigo}{n} \\ \class{mj-blue}{c} & \class{mj-green}{g} & \class{mj-red}{k} & \class{mj-indigo}{o} \\ \class{mj-orangered}{d} & \class{mj-orangered}{h} & \class{mj-orangered}{l} & 1 \end{bmatrix}$$

# The Rise Of TheShaders

// Global Variables
uniform mat4 projectionMatrix;
uniform mat4 viewMatrix;
uniform mat4 modelMatrix;

// Per Vertex Attributes
attribute vec3 position;

// Per Vertex Code
void main() {
gl_Position = projectionMatrix
* viewMatrix
* modelMatrix
* vec4(position, 1.0);
}

// Global Variables
uniform vec3 color;
uniform vec3 direction;

// Interpolated Per-Vertex Quantities
varying vec3 vNormal;

// Per Fragment Code
void main() {
float diffuse = dot(vNormal, direction);
gl_FragColor =
vec4(diffuse * color, 1.0);
}

### Color Map

// Global Variables
uniform sampler2D colorMap;

// Interpolated Per-Vertex Quantities
varying vec2 vUV;

// Per Fragment Code
void main() {
gl_FragColor = texture2D(colorMap, vUV);
}
+ Specular Map, Normal Map, …

# Thanks!

More like this:
Making Things With Maths Talk + Video
Never Seen The Sky Xmas Demo

Cyberdemon © id Software, Three.js port by AlteredQualia