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$ Luminous flux
$I$ Luminous intensity
$E$ Illuminance
$L$ Luminance
$\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

Light

  • Light is a quantized, electromagnetic wave
  • The visible range is between 380 and 770nm
  • The color of visible light corresponds to its wavelength
  • Light sources often emit a wide spectrum. Due to the superposition of many frequencies, the light appears white (e.g., daylight)
light_wavelength

Perception of Light by the Human Eye

lightpaths
  • 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_human_eye
      Wavelength
      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

Color Spaces

rgb_add
RGB color model
  • A color space comprises all colors that can be represented within the color model
  • In this lecture the additive RGB color space (red, green, blue) is used exclusively
  • But there are also numerous other models, such as

Rendering equation

Rendering Equation Fundamentals: Solid Angle

steradian
$r$
$r^2$
$\Omega=1\,\mathrm{sr}$
solidangle
  • 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 $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 polar angles $\theta$ and $\phi$:

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

Rendering Equation Fundamentals: Luminous Flux

luminous_flux
  • Luminous flux $\Phi$
  • Luminous flux = Luminous energy per time

    $\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
    • Luminous flux = Sum of the photon energies that are emitted per time $\Delta t$
  • Unit is "lumen": $[\mathrm{lm}]$. Examples:
    • Lightbulb: $1000\,\mathrm{lm}$
    • Fluorescent lamp: $2000\,\mathrm{lm}$
    • Projector: $2500\,\mathrm{lm}$

Rendering Equation Fundamentals: Luminous Intensity

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

Rendering Equation Fundamentals: Illuminance

illuminance
  • Illuminance $E$
  • Illuminance = Luminous flux per area

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

  • The luminous flux comes from all directions within the hemisphere above the surface
  • Unit: Lux $[\mathrm{lx}] = [\mathrm{lm}/\mathrm{m}^2]$
  • Simplified view: Sum of the photon energies that are received per time and area

Rendering Equation Fundamentals: Luminance

luminance
  • Luminance $L$ $[\mathrm{cd}/\mathrm{m}^2]$
  • Luminance = Luminous flux per solid angle and visble area

    $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
    • Luminous flux in the direction of the eye
    shorter
    $\theta$
    $\theta$
    $\Delta A$
    $\cos(\theta) \,dA$
  • Simplified view: Sum of the photon energies that are emitted per time, solid angle, and visible area

Rendering Equation

  • The rendering equation calculates the outgoing luminance $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 luminances $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})}$

render_eqn
$\mathbf{x}$
$\theta$
$L_i(\mathbf{l})$
$L_o(\mathbf{v})$
$\Omega$
$\mathbf{n}$
  • $L_o(\mathbf{v})$ outgoing luminance
  • $L_e(\mathbf{v})$ is the luminance emitted by the surface itself
  • $L_i(\mathbf{l})$ incoming luminance
  • $E(\mathbf{l})$ illuminance
  • $\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 luminance $L_o$ and the incomming illuminance $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
glossyTodiffuse
glossyTodiffuse

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 luminance $L_o$ of one (infinitely small) surface is incoming luminance $L_i$ bei allen anderen. for all others. Even if all luminance 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 illuminance $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 illuminance $E$ of a light source can be calculated. Until then, we are using a simple directional light source with the illuminance:
    $E = E_\perp \cos(\theta)$
  • First, we deal with several parametric BRDF models

Phong BRDF

Phong BRDF

phong_angles
$\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 luminance 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}$
    reflect_angles
    $-\mathbf{l}$
    $\mathbf{r}$
    $\mathbf{n}$
  • GLSL provides the function reflect to calculate the reflection direction  $\mathbf{r}$
    vec3 reflectDir = reflect(-lightDir, normal);

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}$
phong_angles
$\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 luminance $L_a$
  • $L_a$ is the luminance that the ambient light would produce on ideal white surface

Example: Phong BRDF with a Directional Light Source

  • The ambient component $k_a$ can be added to the emitted luminance. If the emitted luminance 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})$
    phong
    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 with a Directional Light Source

opengl_opengl_shaderphongbrdf

Example: Phong BRDF in GLSL

Vertex Shader:
#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

Fragment Shader:
#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.094, 0.0, 0.0, 1.0);
const vec4 diffuseColor = vec4(0.5, 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);
const float illumiPerp = 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 luminance = ambientColor.rgb;
  
  float illuminance = max(dot(lightDir, n), 0.0) * illumiPerp;
  if(illuminance > 0.0) {
    vec3 brdf = phongBRDF(lightDir, viewDir, n, 
                          diffuseColor.rgb, specularColor.rgb, shininess);
    luminance += brdf * illuminance * lightColor.rgb;
  }

  outColor.rgb = luminance;
  outColor.a = 1.0;
}

Shading in World Space

  • 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

Shading in World 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

Vertex Shader: PhongBrdfWorldSpace.vert
#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

Fragment Shader: PhongBrdfWorldSpace.frag
#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.094, 0.0, 0.0, 1.0);
const vec4 diffuseColor = vec4(0.5, 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);
const float illumiPerp = 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 luminance = ambientColor.rgb;
  
  float illuminance = max(dot(lightDir, n), 0.0) * illumiPerp;
  if(illuminance > 0.0) {
    vec3 brdf = phongBRDF(lightDir, viewDir, n, 
                          diffuseColor.rgb, specularColor.rgb, shininess);
    luminance += brdf * illuminance * lightColor.rgb;
  }

  outColor.rgb = luminance;
  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 luminance 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$
modified_phong
$\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;
}

Example: Modified Phong BRDF with Textures

shader_stone_demon

Blinn-Phong BRDF

Blinn-Phong BRDF

blinn_angles
$\mathbf{x}$
$\theta$
$\mathbf{v}$
$-\mathbf{l}$
$\mathbf{h}$
$\mathbf{n}$
  • Published by Jim Blinn at SIGGRAPH 1977 [Blinn 1977]
  • 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.

Example: Blinn-Phong BRDF in GLSL

opengl_shaderblinnphong
Blinn-Phong
opengl_shaderblinn_vs_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

microfacet_model
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]
  • 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
fresnel_example
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)
dielectric
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
metals
Microfacets
Macroscopic behavior
$\mathbf{n}$
Specular part

Fresnel Equations

fresnel_reflection
$\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 optically denser medium ($\eta_1 < \eta_2$), the ray is deviated towards the normal. In the other case, the ray is deviated 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}$
microfacet_model_sidebyside
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$
fresnel_vs_schlick
$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]:
    compare_blinn_beckmann_ggx
    $\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 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.
    geometry_term
    No interference
    Masking effect
    Shadowing effect
    $\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

geometry_term_backmann_ggx
$\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

opengl_shader_ggx_microfactet_brdf

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

lighttypes_directional
Point light source
lighttypes_spot
Spotlight
lighttypes_directional
Directional light source
lighttypes_env
Environment lighting

Point Light Source

pointlight
  • Sending evenly in all directions (isotropic)
  • No expansion (infinitesimal small)
  • Simplified mathematical model, not exactly physical
  • Typical parameters
    • 3D position
    • Luminous flux $\Phi$ in lumen $[\mathrm{lm}]$
pointlightmax

Point Light Source

pointlight
$\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
    luminous intensity $I$ at distance $r$ produces a perpendicular illuminance 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 luminous 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 illuminance from a perpendicular direction at a distance $r$ is:
    $E_\perp = \frac{I}{r^2} = \frac{\Phi}{4\pi \,r^2}$
  • Or at 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

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

Spotlight

spot
  • Light propagation is limited to certain solid angle (light cone)
  • Luminous 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
strahlermax

Spotlight

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

Spotlight

  • The relationship between the light intensity $I$ and the luminous 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 illuminance 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

directional
$-\mathbf{l}$
  • With directional light sources, distant light sources (e.g. the sun) can be simulated
  • Parameters:
    • Direction of light propagation: $-\mathbf{l}$
    • Perpendicular illuminance: $E_\perp$
  • All light rays hit the scene in the same direction and generate an illuminance of
    $E = E_\perp \cos(\theta) = E_\perp \langle\mathbf{n} \cdot \mathbf{l}\rangle$
  • Examples:
    • Sun with a clear sky: $E_\perp = 100000 \,\mathrm{lx}$
    • Sun with an overcast sky: $E_\perp = 25000 \,\mathrm{lx}$
    • Full moon with a clear sky: $E_\perp = 0,3 \,\mathrm{lx}$

Environment lighting

env
  • Environment lighting considers light from all directions
  • Often the emitted luminance $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?

questions

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

More lecture slides

Slides in German (Folien auf Deutsch)