### Control Keys

move to next slide (also Enter or Spacebar).
move to previous slide.
d  enable/disable drawing on slides
p  toggles between print and presentation view
CTRL  +  zoom in
CTRL  -  zoom out
CTRL  0  reset zoom

Slides can also be advanced by clicking on the left or right border of the slide.

### Notation

Type Font Examples
Variables (scalars) italics $a, b, x, y$
Functions upright $\mathrm{f}, \mathrm{g}(x), \mathrm{max}(x)$
Vectors bold, elements row-wise $\mathbf{a}, \mathbf{b}= \begin{pmatrix}x\\y\end{pmatrix} = (x, y)^\top,$ $\mathbf{B}=(x, y, z)^\top$
Matrices Typewriter $\mathtt{A}, \mathtt{B}= \begin{bmatrix}a & b\\c & d\end{bmatrix}$
Sets calligraphic $\mathcal{A}, B=\{a, b\}, b \in \mathcal{B}$
Number systems, Coordinate spaces double-struck $\mathbb{N}, \mathbb{Z}, \mathbb{R}^2, \mathbb{R}^3$

### List of Math Symbols

Symbol Meaning
$\Omega$ Solid angle
$\theta$ Polar angle in the spherical coordinate system
$\phi$ Azimuth angle in the spherical coordinate system
$\Phi$ Radiant flux
$I$ Radiant intensity
$E$ Irradiance
$L$ Radiance
$\mathrm{f}_r$ BRDF (Bidirectional Reflection Distribution Function)
$\mathrm{f}_d$ Diffuse part of the BRDF
$\mathrm{f}_s$ Specular part of the BRDF

### List of Math Symbols

Symbol Meaning
$\mathbf{n}$ Surface normal
$\mathbf{v}$ Unit vector in view direction
$\mathbf{l}$ Unit vector in light direction
$\eta$ Refractive index
$F$ Fresnel reflectance
$\mathbf{h}$ Halfway vector between light and view direction
$(\dots)_+$ Ramp function
$\langle \mathbf{a}\cdot \mathbf{b}\rangle$ Scalar product
$\lambda$ Wavelength

### Light

• Light is a quantized, electromagnetic wave
• Speed of light in vacuum $c = 299\,792\,458 \frac{\mathrm{m}}{\mathrm{s}}$
• The visible range is between 380 and 770 $\mathrm{nm}$
• Visible light of a specific wavelength corresponds to a spectral color

### Light

• Light sources often emit a wide spectrum of different wavelengths
• White light is the superposition of many wavelengths (e.g., daylight)
Spectral Power Distribution of Daylight (CIE illuminant D65)
Wavelength $\lambda$
Rel.  Spectral  Power
Data source for figure: CIE D65 Reference Spectrum,

### Light Transport

• Light is emitted from a light source
• Some rays of light may hit the eye directly; others are reflected from an object's surface towards the eye
• When it is reflected on the object surface, part of the light is typically absorbed, i.e. the light changes its color
• If the light rays hit the eye, receptors on the retina are activated and an image is formed in the brain

### Color Perception: Trichromatic Theory

There are two systems of light sensory cells in humans:

• System 1: rods that only react to light/dark contrasts
• System 2: Three types of color receptors
• L-cones
Wavelength $\lambda$
Normalized absorption
• M-cones
• S-cones
Data source for figure: J. K. Bowmaker, H. J. A. Dartnall: Visual pigments of rods and cones in a human retina., The Journal of Physiology, Volume 298, Issue 1, Jan. 1980

### RGB Color Space

• Additive mixture of three primary colors (red, green, blue)
(red, green, blue) Farbe
(1.0, 0.0, 0.0)
(0.0, 1.0, 0.0)
(0.0, 0.0, 1.0)
(1.0, 1.0, 0.0)
(1.0, 0.0, 1.0)
(0.0, 1.0, 1.0)
(0.0, 0.0, 0.0)
(0.5, 0.5, 0.5)
(1.0, 1.0, 1.0)
(0.2, 0.4, 0.0)
(0.8, 0.2, 0.3)

### CIE RGB Color Space

all perceivable colors
CIE RGB with
positive $R$, $G$, $B$
$x$
$y$

• Color space developed by the CIE in 1931 based on tests with human participants
• Three lights: 700 nm (red), 546.1 nm (green), 435.8 nm (blue)
• Question: Can all perceptible colors be mixed from these three primary colors?
• Result: Yes, but not all coefficients are positive
$\bar{r}(\lambda)$
$\bar{g}(\lambda)$
$\bar{b}(\lambda)$
• Any spectral power distribution $S(\lambda)$ can be represented as follows:
${\small R = \int\limits_0^\infty S(\lambda) \,\bar{r}(\lambda) \,d\lambda \quad\quad G = \int\limits_0^\infty S(\lambda) \,\bar{g}(\lambda) \,d\lambda \quad\quad B = \int\limits_0^\infty S(\lambda) \,\bar{b}(\lambda) \,d\lambda \quad\quad }$

### sRGB Color Space

• The current standard for monitors, websites, images without an explicit color profile
• RGB values ​​are in the range [0.0, 1.0]
• The range of displayable colors is smaller than with CIE RGB
• Linear transformation to CIE RGB if gamma correction is performed beforehand

### sRGB Gamma

sRGB Gamma
2.2 Gamma
• Digital images often only use 8-bit (256 values) per color channel
• Because the human visual system is better at distinguishing darker intensities than lighter ones, the non-linear gamma function aims to reduce the perceived quantization error (rounding error)
• sRGB values ​​are approximately linear in perception but not linear in measured radiometric values
• The function to decode a color channel $C$ from sRGB to the radiometric linear color space is:
${\small C_\mathrm{linear}= \begin{cases}\dfrac{C_\mathrm{srgb}}{12.92}, & C_\mathrm{srgb}\le0.04045 \\[5mu] \left(\dfrac{C_\mathrm{srgb}+0.055}{1.055}\right)^{\!2.4}, & C_\mathrm{srgb}>0.04045 \end{cases}}$

### More Color Spaces

Mapping of CIE XYZ color space to CIE chromaticity diagram

## Rendering equation

### Rendering Equation Fundamentals: Solid Angle

$r$
$r^2$
$\Omega=1\,\mathrm{sr}$
• The solid angle $\Omega$ of an arbitrary area $A$ corresponds to the quotient of the area $S$, which results when $A$ is projected onto a sphere of radius $r$, and $r^2$:

$\Omega = \int\limits_{\omega}d\omega = \frac{S}{r^2}$

• Although the solid angle is a dimensionless quantity, it is specified in the unit "steradian" $\mathrm{sr}$
• The solid angle of a surface of constant size decreases quadratically with the distance from the center of the sphere
• Example: A solid angle of $\Omega=1\,\mathrm{sr}$ encloses ​​on a sphere with radius of $1\,\mathrm{m}$ an area of $1\,\mathrm{m}^2$. The same area located at twice the radius results in $\Omega=\frac{1}{4}\,\mathrm{sr}$
• The following relationship exists between the differential solid angle $d\omega$ and the spherical coordinates $\theta$ and $\phi$:

$\Omega = \int\limits_{\omega}d\omega = \int\limits_{\omega}d\theta(\sin \theta \, d\phi)= \int\limits_{\phi}\int\limits_{\theta}\sin \theta \, d\theta \, d\phi$

### Rendering Equation Fundamentals: Radiant Flux

• Radiant flux $\Phi$

$\Phi = \frac{dQ}{dt} \approx \frac{\Delta Q}{\Delta t}$

• Simplified view:
• Every photon has the energy $E_{\small\mathrm{photon}}=\frac{h \, c}{\lambda}$ with
$h$: Planck constant
$c$: Speed ​​of light
$\lambda$: Wavelength
• Radiant flux = Sum of the photon energies that are emitted per time $\Delta t$
• Unit: Watt $[\mathrm{W}] = [\frac{\mathrm{J}}{\mathrm{s}}]$.

### Rendering Equation Fundamentals: Radiant Intensity

• Radiant intensity $I$
$I = \frac{d\Phi}{d\omega} \approx \frac{\Delta \Phi}{\Delta \omega}$
• Radiant intensity = Sum of the photon energies that are emitted per time and solid angle
• Unit: Watt per steradian $[\frac{\mathrm{W}}{\mathrm{sr}}]$
• Required if the light source does not radiate equally in all directions

• Irradiance $E$

$E = \frac{d\Phi}{dA} \approx \frac{\Delta \Phi}{\Delta A}$

• The radiant flux comes from all directions within the hemisphere above the surface
• Unit: Watt per square meter $[\frac{\mathrm{W}}{\mathrm{m}^2}]$
• Simplified view: Sum of the photon energies that are received per time and area

• Radiance $L$

$L = \frac{d^2\Phi}{d\omega\, \cos(\theta) \,dA} \approx \frac{\Delta \Phi}{\Delta \omega\, \cos(\theta) \,\Delta A}$

• The area viewed from direction $\theta$ appears shortened by the factor $\cos(\theta)$
• Application:
• Corresponds to the observed brightness/color
• Radiant flux in the direction of the eye
$\theta$
$\theta$
$\Delta A$
$\cos(\theta) \,dA$
• Simplified view: Sum of the photon energies that are emitted per time, solid angle, and visible area
• Unit: Watt per steradian per square meter $[\frac{\mathrm{W}}{\mathrm{sr}\, \mathrm{m}^2}]$

### Rendering Equation

• The rendering equation calculates the outgoing radiance $L_o(\mathbf{v})$ for the surface point $\mathbf{x}$ with normal $\mathbf{n}$ in the direction $\mathbf{v}$ by integrating over the contributions of all incoming radiances $L_i(\mathbf{l})$ of the hemisphere above the surface

$L_o(\mathbf{v}) = L_e(\mathbf{v}) + \int\limits_\Omega \mathrm{f}_r(\mathbf{v}, \mathbf{l})\, \, \underbrace{L_i(\mathbf{l}) \cos(\theta) \, d\omega}_{dE(\mathbf{l})}$

$\mathbf{x}$
$\theta$
$L_i(\mathbf{l})$
$L_o(\mathbf{v})$
$\Omega$
$\mathbf{n}$
• $L_o(\mathbf{v})$ outgoing radiance
• $L_e(\mathbf{v})$ is the radiance emitted by the surface itself
• $L_i(\mathbf{l})$ incoming radiance
• $E(\mathbf{l})$ irradiance
• $\mathrm{f}_r(\mathbf{v}, \mathbf{l})$ is the so-called "Bidirectional Reflection Distribution Function" (BRDF)
• $\Omega$ is the totality of all angles of the hemisphere above the surface

## BRDF

### BRDF (Bidirectional Reflection Distribution Function)

• The BRDF describes the angle-dependent spectral reflection factor of a surface by the ratio of the outgoing radiance $L_o$ and the incoming irradiance $E$

$\mathrm{f}_r(\mathbf{v}, \mathbf{l}) = \frac{ dL_o(\mathbf{v})} { dE(\mathbf{l})}$

• Incoming direction $\mathbf{l}$ and outgoing direction $\mathbf{v}$ can be parameterized with polar angles $\theta$ und $\phi$. Consequently, the BRFD is a 4-dimensional function.
• By specifying this 4D function, the reflection properties of a surface are described precisely

### BRDF (Bidirectional Reflection Distribution Function)

• The "shape" of the BRDF determines the reflective properties of a surface

### BRDF (Bidirectional Reflection Distribution Function)

• The BRDF of a particular material can be measured and stored in a 4D table
• Such tables can be found in material databases
• 4D tables require a lot of memory and the materials cannot be edited directly
• Therefore, for most cases, parametric BRDF models are used (Phong, Blinn-Phong, Cook-Torrance, etc.)

### BRDF Properties

• Positivity:
$\mathrm{f}_r(\mathbf{v}, \mathbf{l}) \ge 0 \quad \forall \, \mathbf{v}, \mathbf{l} \in \Omega$
• Helmholtz reciprocity:
$\mathrm{f}_r(\mathbf{v}, \mathbf{l}) = \mathrm{f}_r(\mathbf{l}, \mathbf{v})$
i.e., incoming and outgoing directions can be swapped
• Energy conservation:
$\int\limits_\Omega \mathrm{f}_r(\mathbf{v}, \mathbf{l})\, \cos(\theta) d\omega \le 1$

### Simplification of the Rendering Equation

• The exact evaluation of the rendering equation is very computationally intensive
• The outgoing radiance $L_o$ of one (infinitely small) surface is incoming radiance $L_i$ for all others. Even if all radiance values have been exchanged once, it continues recursively.
• The equation becomes much simpler if the light exchange between surfaces is neglected and only the so-called "direct" light is taken into account, which is emitted from a small number $j$ of light sources
• With the irradiance $E_j$ of light source $j$ the equation becomes a simple sum
$L_o(\mathbf{v}) = L_e(\mathbf{v}) + \sum \limits_j \mathrm{f}_r(\mathbf{v}, \mathbf{l}) \, E_j(\mathbf{l})$
• We will see later how the irradiance $E$ of a light source can be calculated. Until then, we are using a simple directional light source with the irradiance:
$E = E_\perp \cos(\theta)$
• First, we deal with several parametric BRDF models

## Phong BRDF

### Phong BRDF

$\mathbf{x}$
$\theta$
$\alpha$
$\mathbf{v}$
$-\mathbf{l}$
$\mathbf{r}$
$\mathbf{n}$
• Simple non-physical BRDF model [Phong 1975]
• Superposition of diffuse + specular reflection
$\mathrm{f}_r(\mathbf{v}, \mathbf{l}) = \mathrm{f}_d(\mathbf{v}, \mathbf{l}) + \mathrm{f}_s(\mathbf{v}, \mathbf{l})$
• The diffuse reflection creates a constant radiance in all directions
$\mathrm{f}_d(\mathbf{v}, \mathbf{l}) = k_d$
• The specular reflection is approximated by a cosine lobe, the exponent   $n_s$ controls the roughness of the surface
$\mathrm{f}_s(\mathbf{v}, \mathbf{l}) = k_s \cos(\alpha)^{n_s}$
with
$\cos \alpha = \langle \mathbf{v} \cdot \mathbf{r}\rangle$
• The larger the exponent $n_s$, the more the reflected light is bundled (smoother surface)

### Phong BRDF

• According to the law of reflection, the reflection direction has the same angle to the surface normal as the light direction
Angle of incidence = Angle of reflection
• The reflection direction $\mathbf{r}$ is therefore calculated from the surface normal $\mathbf{n}$ and the light direction $\mathbf{l}$ by:
$\mathbf{r} = 2 \,(\mathbf{l}^\top \mathbf{n}) \, \mathbf{n} - \mathbf{l}$
$-\mathbf{l}$
$\mathbf{r}$
$\mathbf{n}$
• GLSL provides the function reflect to calculate the reflection direction  $\mathbf{r}$
vec3 reflectDir = reflect(-lightDir, normal);

### Phong BRDF

$\mathbf{l}$    $k_d$    $k_s$    $n_s$

$\mathrm{f}_r(\mathbf{v}, \mathbf{l}) = k_d + k_s \cos(\alpha)^{n_s}$

### Phong BRDF

$\mathbf{l}$    $k_d$    $k_s$    $n_s$

$L_o(\mathbf{v}) = \left(k_d + k_s \cos(\alpha)^{n_s}\right) \, E_\perp \cos(\theta)$

### Example: Phong BRDF with a Directional Light Source

• Example: To render a 3D model with one directional light source and the Phong BRDF, the following function must be implemented:
\begin{align} L_o(\mathbf{v}) &= L_e(\mathbf{v}) + \mathrm{f}_r(\mathbf{v}, \mathbf{l}) \,\, E_\perp \cos(\theta) \\ &= L_e(\mathbf{v}) + \left(k_d + k_s \,\cos(\alpha)^{n_s} \right) \,\, E_\perp \cos(\theta)\\ &= L_e(\mathbf{v}) + \left(k_d + k_s \,\,\langle \mathbf{v} \cdot \mathbf{r}\rangle^{n_s} \right) \, E_\perp \,\,\left(\langle \mathbf{l} \cdot \mathbf{n}\rangle\right)_+\\ \end{align}
$\mathbf{x}$
$\theta$
$\alpha$
$\mathbf{v}$
$-\mathbf{l}$
$\mathbf{r}$
$\mathbf{n}$
• There should only be a contribution when the surface faces the light. Hence, $(x)_+$ denotes the ramp function
$(x)_+ = \begin{cases} x & \,\,:\,\, x \ge 0 \\ 0 & \,\,:\,\, 0 < 0 \end{cases}$
this can be implemented in GLSL with
 x = max(x, 0.0);

### Ambient Term

• By simplifying the rendering equation, indirect light is not modeled
• As a result, those parts of the scene that are not directly illuminated are not visible
• Therefore, the missing indirect lighting is approximated by a constant radiance $L_a$
• $L_a$ is the radiance that the ambient light would produce on an ideal white surface

### Example: Phong BRDF with a Directional Light Source

• The ambient component $k_a$ can be added to the emitted radiance. If the emitted radiance is zero, this results in:
$L_e = k_a$
• So there are three parts in total:
$\quad \quad \quad k_a \quad \quad \quad + \quad k_d E_\perp \cos(\theta) \quad + k_s \cos(\alpha)^{n_s} E_\perp \cos(\theta) = \quad L_o(\mathbf{v})$
Ambient Diffus Spekular
• Since this is a non-physical model, the user can freely set the parameters $k_a$, $k_d$, $k_s$ and the exponent $n_s$
• The larger the exponent $n_s$, the more the reflected light is bundled (smoother surface)

### Example: Phong BRDF in GLSL

#version 140
in vec3 position;
in vec2 texcoord;
in vec3 normal;

uniform mat4 projection;
uniform mat4 modelview;
uniform mat4 normalMat;

out vec2 tc;
out vec3 fn;
out vec3 vertPos;

void main(){
tc = texcoord;
fn = vec3(normalMat * vec4(normal, 0.0));
vec4 vertPos4 = modelview * vec4(position, 1.0);
vertPos = vec3(vertPos4) / vertPos4.w;
gl_Position = projection * modelview * vec4(position, 1.0);
}

### Example: Phong BRDF in GLSL

#version 140
out vec4 outColor;

in vec2 tc;
in vec3 fn;
in vec3 vertPos;

uniform int mode;
uniform vec3 lightDirection;

const vec4 ambientColor = vec4(0.01, 0.0, 0.0, 1.0);
const vec4 diffuseColor = vec4(0.25, 0.0, 0.0, 1.0);
const vec4 specularColor = vec4(1.0, 1.0, 1.0, 1.0);
const float shininess = 20.0;
const vec4 lightColor = vec4(1.0, 1.0, 1.0, 1.0);

vec3 phongBRDF(vec3 lightDir, vec3 viewDir, vec3 normal,
vec3 phongDiffuseCol, vec3 phongSpecularCol, float phongShininess) {
vec3 color = phongDiffuseCol;
vec3 reflectDir = reflect(-lightDir, normal);
float specDot = max(dot(reflectDir, viewDir), 0.0);
color += pow(specDot, phongShininess) * phongSpecularCol;
return color;
}

void main() {
vec3 lightDir = normalize(-lightDirection);
vec3 viewDir = normalize(-vertPos);
vec3 n = normalize(fn);

vec3 brdf = phongBRDF(lightDir, viewDir, n,
diffuseColor.rgb, specularColor.rgb, shininess);
}

outColor.a = 1.0;
}

• The previous example transforms the normals into the camera coordinate system (this corresponds to the approach in the OpenGL Fixed-Function-Pipeline)
• This means that the global light direction must also be available in the camera coordinate system. Therefore, when the camera is moving the direction of light in the host code is dynamically transformed and sent to the shader using a uniform variable (as shown in the previous example)
• As the trend is towards more and more light sources in a scene, it can be advantageous to perform the shading in the global coordinate system
• Instead of transforming many light sources into the camera coordinate system, only a single camera position has to be transformed into the global world coordinate system
• In order to carry out the shading in the world coordinate system, the normals must also be transformed into this space

• In order to calculate normals in the world coordinate system, the model view matrix must be split in the shader:
$\underline{\tilde{\mathbf{P}}} = \mathtt{A} \, \underbrace{\mathtt{T}_{\mathrm{\small cam}}^{-1} \, \mathtt{T}_{\mathrm{\small obj}}}_{\mathtt{T}_{\mathrm{\small modelview}}} \, \underline{\mathbf{P}}$
• In the following example:
• mat4 cameraProjection is the transformation $\mathtt{A}$ from the camera coordinate system into the image plane
• mat4 cameraLookAt is the transformation $\mathtt{T}_{\mathrm{\small cam}}^{-1}$ from the world coordinate system to the camera coordinate system
• mat4 meshTransform is the transformation $\mathtt{T}_{\mathrm{\small obj}}$ from the local coordinate system to the world coordinate system
• mat4 meshTransformTransposedInverse is the transformation $\mathtt{T}_{\mathrm{\small obj}}^{-\top}$ of the normal into the world coordinate system

### Example: Phong Shading in World Space

#version 140
in vec3 position;
in vec2 texcoord;
in vec3 normal;

uniform mat4 cameraLookAt;
uniform mat4 cameraProjection;
uniform mat4 meshTransform;
uniform mat4 meshTransformTransposedInverse;

out vec2 tc;
out vec3 wfn;
out vec3 vertPos;

void main(){
tc = texcoord;
wfn = vec3(meshTransformTransposedInverse * vec4(normal, 0.0));
vec4 vertPos4 = meshTransform * vec4(position, 1.0);
vertPos = vec3(vertPos4) / vertPos4.w;
gl_Position = cameraProjection * cameraLookAt * vertPos4;
}

### Example: Phong Shading in World Space

#version 140
out vec4 outColor;

in vec2 tc;
in vec3 wfn;
in vec3 vertPos;

uniform int mode;
uniform vec3 cameraPosition;

const vec3 lightDirection = vec3(0.0, -1.0, -1.0);
const vec4 ambientColor = vec4(0.01, 0.0, 0.0, 1.0);
const vec4 diffuseColor = vec4(0.25, 0.0, 0.0, 1.0);
const vec4 specularColor = vec4(1.0, 1.0, 1.0, 1.0);
const float shininess = 20.0;
const vec4 lightColor = vec4(1.0, 1.0, 1.0, 1.0);

vec3 phongBRDF(vec3 lightDir, vec3 viewDir, vec3 normal,
vec3 phongDiffuseCol, vec3 phongSpecularCol, float phongShininess) {
vec3 color = phongDiffuseCol;
vec3 reflectDir = reflect(-lightDir, normal);
float specDot = max(dot(reflectDir, viewDir), 0.0);
color += pow(specDot, phongShininess) * phongSpecularCol;
return color;
}

void main() {
vec3 lightDir = normalize(-lightDirection);
vec3 viewDir = normalize(cameraPosition - vertPos);
vec3 n = normalize(wfn);

vec3 brdf = phongBRDF(lightDir, viewDir, n,
diffuseColor.rgb, specularColor.rgb, shininess);
}

outColor.a = 1.0;
} 

### Modified Phong BRDF

• One problem with the original Phong BRDF is that the principle of energy conservation is not fulfilled. In reality, it is not possible to reflect more radiance than was received. Thus:
$\int\limits_\Omega \underbrace{\left(\mathrm{f}_d(\mathbf{v}, \mathbf{l}) + \mathrm{f}_s(\mathbf{v}, \mathbf{l})\right)}_{\mathrm{f}_r(\mathbf{v}, \mathbf{l})}\, \cos(\theta) d\omega \le 1$
• Integration over the half-space for the diffuse part:
\begin{align}\int\limits_\Omega \mathrm{f}_d(\mathbf{v}, \mathbf{l})\, \cos(\theta) d\omega = \int\limits_{0}^{2\pi}\, \int\limits_{0}^{\pi/2} k_d \cos(\theta) \sin(\theta) \, d\theta \, d\phi &= 2\pi \, \Bigg[\frac{-\cos^2(\theta)}{2}\Bigg]_{0}^{\pi/2} \\ &= k_d \, \pi = \rho_d \end{align}
• Integration over the half-space for the specular part:
$\int\limits_\Omega \mathrm{f}_s(\mathbf{v}, \mathbf{l})\, \cos(\theta) d\omega = \int\limits_{0}^{2\pi}\, \int\limits_{0}^{\pi/2} k_s \cos(\theta)^{n_s} \cos(\theta) \sin(\theta) \, d\theta \, d\phi = k_s \frac{2 \pi}{n_s+2} = \rho_s$
• If the condition $\rho_d + \rho_s \le 1$ is met, energy conservation is fulfilled

### Modified Phong BRDF

• Inserting $k_d$ and $k_s$ into the original Phong BRDF results in the energy-conserving modified Phong BRDF:
$\mathrm{f}_r(\mathbf{v}, \mathbf{l}) = \rho_d \frac{1}{\pi} + \rho_s \frac{n_s+2}{2 \pi} \,\cos(\alpha)^{n_s}$
with
$\rho_d + \rho_s \le 1$
$\mathrm{f}_s$
Angle in degree

### Modified Phong BRDF in GLSL

#define RECIPROCAL_PI 0.3183098861837907
#define RECIPROCAL_2PI 0.15915494309189535

vec3 modifiedPhongBRDF(vec3 lightDir, vec3 viewDir, vec3 normal,
vec3 phongDiffuseCol, vec3 phongSpecularCol, float phongShininess) {
vec3 color = phongDiffuseCol * RECIPROCAL_PI;
vec3 reflectDir = reflect(-lightDir, normal);
float specDot = max(dot(reflectDir, viewDir), 0.001);
float normalization = (phongShininess + 2.0) * RECIPROCAL_2PI;
color += pow(specDot, phongShininess) * normalization * phongSpecularCol;
return color;
}


## Blinn-Phong BRDF

### Blinn-Phong BRDF

$\mathbf{x}$
$\theta$
$\mathbf{v}$
$-\mathbf{l}$
$\mathbf{h}$
$\mathbf{n}$
• Instead of the reflected direction, the halfway-vector $\mathbf{h}$ is used:
$\mathbf{h} = \frac{\mathbf{l} +\mathbf{v}}{|\mathbf{l} +\mathbf{v}|}$
$\mathrm{f}_r(\mathbf{v}, \mathbf{l}) = k_d + k_s \, \langle\mathbf{h} \cdot \mathbf{n}\rangle^{n_s}$
• Faster, as it avoids the calculation of the reflected direction
• Closer to physics than the original Phong model, because the reciprocity constraint of the BRDF is fulfilled $\mathrm{f}_r(\mathbf{v}, \mathbf{l}) = \mathrm{f}_r(\mathbf{l}, \mathbf{v})$
• Again, the exponent $n_s$ determines the bundling of the light (larger $n_s$ for a smoother surface)
• If there is also an ambient component $k_a$, the approach is called "Blinn–Phong reflection model". This is very widely used and is also supported by the OpenGL Fixed Function Pipeline.

Blinn-Phong
Phong

### Example: Blinn-Phong BRDF in GLSL

vec3 blinnPhongBRDF(vec3 lightDir, vec3 viewDir, vec3 normal,
vec3 phongDiffuseCol, vec3 phongSpecularCol, float phongShininess) {
vec3 color = phongDiffuseCol;
vec3 halfDir = normalize(viewDir + lightDir);
float specDot = max(dot(halfDir, normal), 0.0);
color += pow(specDot, phongShininess) * phongSpecularCol;
return color;
}

## Microfacet BRDF

### Microfacet BRDF

Microfacets
Macroscopic behavior
$\mathbf{v}$
$-\mathbf{l}$
$\mathbf{h}$
$\mathbf{n}$
• Mathematical modeling of the surface by microfacets (much smaller than a pixel). The rougher the surface, the larger is the variation of their orientation [Cook Torrance 1981]
• The basis for many current physics-based rendering approaches ("Physically-Based Rendering", PBR) [Disney 2012] [Unreal Engine 2013] [Frostbite 2014]
• The BRDF of the specular part is:
$\Large \mathrm{f}_s(\mathbf{v}, \mathbf{l}) = \frac{\mathrm{F}(\mathbf{v},\mathbf{h})\,\mathrm{D}(\mathbf{h})\,\mathrm{G}(\mathbf{l},\mathbf{v},\mathbf{h})}{4\,\,\langle\mathbf{n} \cdot \mathbf{l}\rangle\,\,\langle\mathbf{n} \cdot \mathbf{v}\rangle}$
with
• $\mathrm{F}$: Fresnel reflectance
• $\mathrm{D}$: Normal distribution function (NDF)
• $\mathrm{G}$: Geometry term

### Fresnel Reflectance

• The ratio of reflected and transmitted light depends on the angle of incidence of the light rays and the refractive indices of the materials
Image source: Blue Lounger Beside Swimming Pool, CC0, public domain

### Fresnel Reflectance: Dielectrics

• Light is either reflected, transmitted or absorbed with an angle-dependent relative frequency
• The reflected part is scattered on the microfacets. Macroscopically, this creates the specular part of the reflection.
• In opaque materials, the transmitted parted is randomly deflected below the surface, partially absorbed (wavelength dependent) and emitted at different angles. Macroscopically, this creates the diffuse part of the reflection.
• The more light is reflected, the less light is transmitted (and the diffuse part becomes smaller)
Microfacets
Macroscopic behavior
$\mathbf{n}$
Specular part
Diffuse part

### Fresnel Reflectance: Metals

• In metals, the transmitted portion is absorbed, i.e. there is no diffuse reflection
• The reflected part depends on the wavelength, so the specular part is colored
Microfacets
Macroscopic behavior
$\mathbf{n}$
Specular part

### Fresnel Equations

$\eta_1$
$\eta_2$
$\theta_1$
$\theta_1$
$\theta_2$
$\mathrm{F}$
$1-\mathrm{F}$
• Reflected part:
\begin{align} \mathrm{F}_{\tiny\mbox{para}} &= \frac{\eta_2 \cos \theta_1 - \eta_1 \cos \theta_2}{\eta_2 \cos \theta_1 + \eta_1 \cos \theta_2}\\ \mathrm{F}_{\tiny\mbox{perp}} &= \frac{\eta_1 \cos \theta_1 - \eta_2 \cos \theta_2}{\eta_2 \cos \theta_1 + \eta_1 \cos \theta_2}\\ \mathrm{F} &= \frac{1}{2} \left(\mathrm{F}_{\tiny \mbox{para}}^2 + \mathrm{F}_{\tiny\mbox{perp}}^2\right) \end{align}
• Refracted part: $1 - F$
• In case of a transition from an optically thinner to an optically denser medium ($\eta_1 < \eta_2$), the ray deviates towards the normal. In the other case, the ray deviates away from the normal.
• The mathematical relationship between the angle of incidence $\theta_1$ and the angle of the refracted ray $\theta_2$ is:
$\eta_1 \sin(\theta_1) = \eta_2 \sin(\theta_2)$

### Fresnel Reflectance (Dielectrics)

Material Index of Refraction $\mathrm{F}_0$
Vacuum 1.0 0%
Air 1.000292 ≈ 0%
Water 1.333 2%
Glass 1.5 4%
Plastic 1.5 to 1.58 4% to 5%
Diamond 2.42 17.24%
• $\mathrm{F}_0$ is the reflectance for perpendicular incidence of light $\theta_1 = 0$:
$\mathrm{F}_0 = \frac{(\eta_2 - \eta_1)^2}{(\eta_2 + \eta_1)^2}$

### Fresnel Reflectance (Metals)

Metals $\mathrm{F}_0$ (Linear, Float) $\mathrm{F}_0$ (sRGB, 8-bit) Color
Titanium (0.542, 0.497, 0.449) (194, 187, 179)
Chrome (0.549, 0.556, 0.554) (196, 197, 196)
Iron (0.562, 0.565, 0.578) (198, 198, 200)
Nickel (0.660, 0.609, 0.526) (212, 205, 192)
Platinum (0.673, 0.637, 0.585) (214, 209, 201)
Copper (0.733, 0.697. 0.652) (250, 209, 194)
Palladium (0.733, 0.697, 0.652) (222, 217, 211)
Zinc (0.664, 0.824, 0.850) (213, 234, 237)
Gold (1.022, 0.782, 0.344) (255, 229, 158)
Aluminum (0.913, 0.922, 0.924) (245, 246, 246)
Silver (0.972, 0.960, 0.915) (252, 250, 245)
Source: Naty Hoffman: Physics and Math of Shading, SIGGRAPH 2015 Course: Physically Based Shading in Theory and Practice

### Fresnel Reflectance

• In the microfacet model, the angle $\theta_1$ is the angle between the viewing direction $\mathbf{v}$ and the half-vector $\mathbf{h}$, because only those microfacets, which have the macroscopic half-vector as normal, have a reflection in the viewing direction
• According to [Cook Torrance 1981] the reflectance for $\eta_1 = 1$ is calculated by:
\begin{align}c &= \langle\mathbf{v} \cdot \mathbf{h}\rangle \\ g &= \sqrt{\eta_2^2+ c^2 - 1}\\ F_{\tiny \mbox{Cook-Torrance}}(\mathbf{v}, \mathbf{h}) &= \frac{1}{2} \left( \frac{g - c}{g + c} \right)^2 \left( 1 + \left( \frac{ c\,(g + c) - 1 }{ c\,(g - c)+ 1 } \right)^2 \right) \end{align}
Microfacets
Macroscopic behavior
$\mathbf{v}$
$-\mathbf{l}$
$\mathbf{h}$
$\mathbf{n}$

### Fresnel Reflectance

• Alternatively, the Schlick approximation [Schlick 1994] of the Fresnel reflectance can be used, which is faster to compute:
$F_{\tiny \mbox{Schlick}}(\mathbf{v}, \mathbf{h}) = \mathrm{F}_0 + \left(1.0 − \mathrm{F}_0\right) \left(1.0 − \langle\mathbf{v} \cdot \mathbf{h}\rangle \right)^5$
• The figure shows the comparison for glass with $\mathrm{F}_0 = 0.04$
$F_{\tiny \mbox{Cook-Torrance}}$
$F_{\tiny \mbox{Schlick}}$
Angle in degree
Reflectance

### Normal Distribution Function (NDF)

• The distribution of the microfacet normals changes depending on the roughness of the surface
• For a rougher surface, the distribution around the surface normal is more scattered
• There are several suggestions for the normal distribution in the literature [Walter et al. 2007]:
$\mathrm{D}_{\tiny \mbox{Blinn}}(\mathbf{h}) = \frac{1}{ \pi \alpha^2 } \langle\mathbf{n} \cdot \mathbf{h}\rangle^{n_s}$   with  $n_s = 2\alpha^{-2} - 2$
$\mathrm{D}_{\tiny \mbox{Beckmann}}(\mathbf{h}) = \frac{1}{ \pi \alpha^2 \langle\mathbf{n} \cdot \mathbf{h}\rangle^4 } \exp{ \left( \frac{ \langle\mathbf{n} \cdot \mathbf{h}\rangle^2 - 1}{\alpha^2 \langle\mathbf{n} \cdot \mathbf{h}\rangle^2} \right) }$
$\mathrm{D}_{\tiny \mbox{GGX}}(\mathbf{h}) = \frac{\alpha^2}{\pi \left(\langle\mathbf{n} \cdot \mathbf{h}\rangle^2 (\alpha^2-1)+1\right)^2}$
• where $\alpha = r_p^2$ with the perceived roughness $r_p$ in the range [0.0, 1.0]

### Geometry Term

• Depending on the direction of incidence of the light and the viewing direction of the observer, shadowing and masking effects occur at the microfacets
• [Blinn 1977] and [Cook Torrance 1981] assume the microfacets are V-shaped and derive a geometry factor $0 \le G \le 1$ from this model.
No interference
$\mathbf{n}$
$-\mathbf{l}$
$\mathbf{v}$
$\mathbf{h}$
$\mathbf{n}$
$-\mathbf{l}$
$\mathbf{v}$
$\mathbf{h}$
$\mathbf{n}$
$-\mathbf{l}$
$\mathbf{v}$
$\mathbf{h}$
$\mathrm{G}_{\tiny \mbox{Cook-Torrance}}(\mathbf{l},\mathbf{v},\mathbf{h}) = \operatorname{min}\left( 1, \frac{ 2 \langle\mathbf{n} \cdot \mathbf{h}\rangle \langle\mathbf{n} \cdot \mathbf{v}\rangle }{ \langle\mathbf{v} \cdot \mathbf{h}\rangle}, \frac{ 2 \langle\mathbf{n} \cdot \mathbf{h}\rangle \langle\mathbf{n} \cdot \mathbf{l}\rangle }{ \langle\mathbf{v} \cdot \mathbf{h}\rangle} \right)$

### Geometry Term

• Another well-known model from [Smith 1967] combines the geometry factor from a component for light direction and one for the view direction:
$\mathrm{G}_{\tiny \mbox{Smith}}(\mathbf{l},\mathbf{v},\mathbf{h}) = \mathrm{G}_1(\mathbf{l}) \mathrm{G}_1(\mathbf{v})$
• Different $\mathrm{G}_1$ according to [Walter et al. 2007] are:
$\mathrm{G}_{1\ \tiny \mbox{Beckmann}}(\mathbf{v}) =\left\{ \begin{array}{l l} \frac{ 3.535 \,c \,+ \,2.181 \,c^2 }{ 1 \,+ \,2.276 \,c \,+ \,2.577 \,c^2 } & : \,\, c < 1.6\\ 1 & : \,\, c \ge 1.6\\ \end{array} \right.$    mit   $c = \frac{\langle\mathbf{n} \cdot \mathbf{v}\rangle}{ \alpha \sqrt{1 - \langle\mathbf{n} \cdot \mathbf{v}\rangle^2} }$
$\mathrm{G}_{1\ \tiny \mbox{GGX}}(\mathbf{v}) = \frac{ 2 \, \langle\mathbf{n} \cdot \mathbf{v}\rangle }{ \langle\mathbf{n} \cdot \mathbf{v}\rangle + \sqrt{ \alpha^2 + (1 - \alpha^2)\langle\mathbf{n} \cdot \mathbf{v}\rangle^2 } }$
• Fast approximation [Schlick 1994] for the GGX variant:
$\mathrm{G}_{1\ \tiny \mbox{Schlick-GGX}}(\mathbf{v}) =\frac{\langle\mathbf{n} \cdot \mathbf{v}\rangle}{\langle\mathbf{n} \cdot \mathbf{v}\rangle(1 - k) + k }$    mit   $k = \frac{\alpha}{2}$

### Geometry Term

$\mathrm{G}_{1\ \tiny \mbox{Beckmann}}$
$\mathrm{G}_{1\ \tiny \mbox{GGX}}$
$\mathrm{G}_{1\ \tiny \mbox{Schlick-GGX}}$
$r_p = 0.00$
$r_p = 0.25$
$r_p = 0.50$
$r_p = 0.75$
$r_p = 1.00$
$\alpha = r_p^2$

### Example: GGX Microfacet BRDF in GLSL

vec3 fresnelSchlick(float cosTheta, vec3 F0) {
return F0 + (1.0 - F0) * pow(1.0 - cosTheta, 5.0);
}

float D_GGX(float NoH, float roughness) {
float alpha = roughness * roughness;
float alpha2 = alpha * alpha;
float NoH2 = NoH * NoH;
float b = (NoH2 * (alpha2 - 1.0) + 1.0);
return alpha2 / (PI * b * b);
}

float G1_GGX_Schlick(float NdotV, float roughness) {
//float r = roughness; // original
float r = 0.5 + 0.5 * roughness; // Disney remapping
float k = (r * r) / 2.0;
float denom = NdotV * (1.0 - k) + k;
return NdotV / denom;
}

float G_Smith(float NoV, float NoL, float roughness) {
float g1_l = G1_GGX_Schlick(NoL, roughness);
float g1_v = G1_GGX_Schlick(NoV, roughness);
return g1_l * g1_v;
}

vec3 microfacetBRDF(in vec3 L, in vec3 V, in vec3 N,
in vec3 baseColor, in float metallicness,
in float fresnelReflect, in float roughness) {

vec3 H = normalize(V + L); // half vector

// all required dot products
float NoV = clamp(dot(N, V), 0.0, 1.0);
float NoL = clamp(dot(N, L), 0.0, 1.0);
float NoH = clamp(dot(N, H), 0.0, 1.0);
float VoH = clamp(dot(V, H), 0.0, 1.0);

// F0 for dielectics in range [0.0, 0.16]
// default FO is (0.16 * 0.5^2) = 0.04
vec3 f0 = vec3(0.16 * (fresnelReflect * fresnelReflect));
// in case of metals, baseColor contains F0
f0 = mix(f0, baseColor, metallicness);

// specular microfacet (cook-torrance) BRDF
vec3 F = fresnelSchlick(VoH, f0);
float D = D_GGX(NoH, roughness);
float G = G_Smith(NoV, NoL, roughness);
vec3 spec = (D * G * F) / max(4.0 * NoV * NoL, 0.001);

// diffuse
vec3 rhoD = vec3(1.0) - F; // if not specular, use as diffuse
rhoD *= 1.0 - metallicness; // no diffuse for metals
vec3 diff = rhoD * baseColor / PI;

return diff + spec;
}

### Light Sources

Point light source
Spotlight
Directional light source
Environment lighting

### Point Light Source

• Sending evenly in all directions (isotropic)
• No expansion (infinitesimally small)
• Simplified mathematical model, not exactly physical
• Typical parameters
• 3D position
• Radiant flux $\Phi$ in watt $[\mathrm{W}]$

### Point Light Source

$\mathbf{n}$
$-\mathbf{l}$
$-\mathbf{l}$
$\cos(\theta)dA$
$\theta$
$\theta$
$E_\perp$
$dA$
$dA$
• For a solid angle element, it applies that $d\omega = \frac{dA}{r^2}$.
A point light source with
radiant intensity $I$ at distance $r$ produces a perpendicular irradiance of
$E_\perp = \frac{d\Phi}{dA} = \frac{d\Phi}{d\omega \,r^2} = \frac{I}{r^2}$
• At an angle of incidence $\theta$, the area is reduced by $\cos(\theta)$. Therefore, we have:
$E = E_\perp \cos(\theta) = \frac{I}{r^2} \cos(\theta) = \frac{I}{r^2} \langle\mathbf{n} \cdot \mathbf{l}\rangle$

### Point Light Source

• Since the point light source sends uniformly in all directions, the relationship between the light intensity $I$ and the radiant flux $\Phi$ is given by:
\begin{align} &\Phi = \int\limits_{\Omega} I \, d\omega = \int\limits_{0}^{2\pi}\, \int\limits_{0}^{\pi} I\, \sin(\theta) \, d\theta \, d\phi = I \Bigg[-\cos(\theta)\Bigg]_{0}^{\pi} \left(\int\limits_{0}^{2\pi}d\phi\right) = 4\pi \, I\\ \Leftrightarrow & I = \frac{\Phi}{4\pi} \end{align}
• Consequently, the irradiance from a perpendicular direction at a distance $r$ is:
$E_\perp = \frac{I}{r^2} = \frac{\Phi}{4\pi \,r^2}$
• Or at the angle of incidence $\theta$:
$E = E_\perp \cos(\theta) = \frac{\Phi}{4\pi \,r^2} \cos(\theta) = \frac{\Phi}{4\pi \,r^2} \langle\mathbf{n} \cdot \mathbf{l}\rangle$

### Example: Blinn-Phong Shading with a Point Light Source

• The position of the point light source is marked by a white ball
• The irradiance decreases quadratically with the distance from the light source

### Spotlight

• Light propagation is limited to a certain solid angle (light cone)
• Radiant intensity decrease from the highest value $I_0$ in the main direction of radiation to the edge according to:
$I = I_0 \cos^n(\beta)$
where $\beta$ is the angle between the considered direction and the main direction
• The exponent $n$ determines how the light is focused

### Spotlight

$\mathbf{d}$
$\mathbf{p}$
• Light intensity:
$I = I_0 \cos^n(\beta)$
with radiant intensity in the main direction $I_0$
• Typical parameters:
• 3D position $\mathbf{p}$
• Main direction $\mathbf{d}$
• Radiant flux $\Phi$ in watt $[\mathrm{W}]$
• Maximum angle $\beta_{\tiny \mbox{ max}}$
• Focus exponent $n$

### Spotlight

• The relationship between the light intensity $I$ and the radiant flux $\Phi$ is given by:
\begin{align} &\Phi = \int\limits_{0}^{2\pi}\, \int\limits_{0}^{\beta_{\tiny \mbox{ max}}} I_0\, \cos^{n}(\theta) \sin(\theta) \, d\theta \, d\phi = 2\pi \Bigg[\frac{-\cos^{n+1}(\theta)}{n+1}\Bigg]_{0}^{\beta_{\tiny \mbox{ max}}} \, I_0 \\ & \quad = \frac{2\pi}{n+1} \left(1 - \cos^{n+1}(\beta_{\tiny \mbox{ max}}) \right) \, I_0 \\ \Leftrightarrow & I_0 = \frac{n+1}{2\pi \left(1 - \cos^{n+1}(\beta_{\tiny \mbox{ max}}) \right)} \Phi \end{align}
• For the irradiance at the angle of incidence $\theta$ at a distance $r$ we get:
$E = E_\perp \cos(\theta) = \frac{I}{r^2} \cos(\theta) = \frac{I_0}{r^2} \cos^{n} (\beta)\cos(\theta)= \frac{\Phi}{2\pi r^2}\frac{(n+1) \cos^{n}(\beta)\cos(\theta)}{\left(1 - \cos^{n+1}(\beta_{\tiny \mbox{ max}}) \right)}$
• With $n = 1$ and $\beta_{\tiny \mbox{ max}} = \frac{\pi}{2}$:
$E = \frac{\Phi}{\pi r^2} \cos(\beta)\cos(\theta) =\frac{\Phi}{\pi r^2} \langle-\mathbf{l}\cdot \mathbf{d}\rangle \langle\mathbf{n} \cdot \mathbf{l}\rangle$

### Directional Light Source

$-\mathbf{l}$
• With directional light sources, distant light sources (e.g. the sun) can be simulated
• Parameters:
• The direction of light propagation: $-\mathbf{l}$
• Perpendicular irradiance: $E_\perp$
• All light rays hit the scene in the same direction and generate an irradiance of
$E = E_\perp \cos(\theta) = E_\perp \langle\mathbf{n} \cdot \mathbf{l}\rangle$

### Environment lighting

• Environment lighting considers light from all directions
• Often the emitted radiance $L_i$ of the environment is represented by a spherical environment image (Image-based Lighting)
⟶ see next chapter

### References

• [Phong 1975] Bui-T. Phong: Illumination for computer generated pictures. Communications of the ACM, 18(6):311-317, June 1975
• [Blinn 1977] James F. Blinn: Models of light reflection for computer synthesized pictures. SIGGRAPH 1977, pp. 192-198, July 1977
• [Cook Torrance 1981] R. L. Cook and K. E. Torrance: A reflectance model for computer graphics. TOG 1(1):7-24, Jan. 1981.
• [Disney 2012] Brent Burley: Physically Based Shading at Disney SIGGRAPH 2012 SIGGRAPH 2012 Course: Practical Physically Based Shading in Film and Game Production
• [Unreal Engine 2013] Brian Karis: Real Shading in Unreal Engine 4, SIGGRAPH 2013 Course: Physically Based Shading in Theory and Practice
• [Frostbite 2014] S. Lagarde, C. de Rousiers: Moving Frostbite to PBR, SIGGRAPH 2014 Course: Physically Based Shading in Theory and Practice

### References

• [Schlick 1994] Christophe Schlick: An Inexpensive BRDF Model for Physically-Based Rendering. Computer Graphics Forum, 13 (3), 233–246, 1994.
• [Walter et al. 2007] B. Walter, S. R. Marschner, H. Li, K. E. Torrance: Microfacet Models for Refraction through Rough Surfaces. Eurographics Symposium on Rendering, 2007.
• [Smith 1967] B. Smith: Geometrical shadowing of a random rough surface. IEEE Transactions on Antennas and Propagation 15(5):668-671, Sep. 1967

### Are there any questions?

Please notify me by e-mail if you have questions, suggestions for improvement, or found typos: Contact