Incoming light
energy as a function of the light direction. |
||

(a) Incoming light nearly
tangent to the surface |
(b) Incoming light perpendicular
to the surface |
(c) Incoming light energy as a
fuction of incoming direction $s$ |

This incoming energy per area is: $$ L_i = L_s n.s$$ where $n$ is the normal to the surface, $s$ is the direction where the light comes from, and $L_i$ is the power of the light source in this direction.

Reflection and refraction of
light hitting the boundary between material 1 and 2. |

The Descartes law relates the vectors and the physical parameters of the materials:

$$ \nu_1 \cos \theta_1 = \nu_2 \cos \theta_2 $$

where $\nu_1$ and $\nu_2$ ane the refraction indices of materials 1 and 2, respectively ($\nu=1$ in empty space)...

This type of reflection/refraction is typically not simulated in WebGL, since they require complex, recursive mappings of objects on each other. This is tractable using another image synthesis technique called ray-tracing. Some multi-pass OpenGL techniques are able to implement one level of reflection.

The BRDF describes the
distribution of reflection of light. |

The BRDF (bidirectional light distribution function) $f(s,v)$ describes the distribution as a function of the incoming direction $s$ and the outcoming direction $v$.

The energy reflected from direction $s$ to direction $v$ is the product of the incoming energy with the BRDF:

\begin{equation} \label{eq brdf}

L_r (s,v) = L(s) n.s f(s,v)

\end{equation}

When there are several light sources, the reflected energy is the sum of their contributions:

$$ L_r(s,v) = L(s_1) n.s_1 f(s_1,v) + L(s_2) n.s_2 f(s_2,v) + ... $$

BRDF modeled as the sum of a two
functions: diffuse (shown in blue) and specular (shown in red) |

The diffuse component (also called Lambertian) distibutes the light uniformly. Its value is given by a simple parameter $k_d$, which represents the percentage of light reflected this way:

\begin{equation}\label{eq diffuse}

f_d = k_d

\end{equation}

The specular component distributes most of the light in the direction $r$ of the perfect reflection. It is modeled using two parameters, $k_s$ which represents the percentage of light reflected this way. The value is computed using the dot product of the two directions:

\begin{equation} \label{eq specular}

f_s = (r.s)^\beta

\end{equation}

The brightess parameter $\beta$ represents the concentration of light in this direction (the higher value, the thinner red shape centered on $r$).

Since energy can not be negative, the formula is actually $max(0,(r.s)^\beta)$

Color is represented using three values (channels) for Red, Green, Blue. Each value represents energy.

Equations \ref{eq brdf},\ref{eq diffuse} and \ref{eq specular} are defined for each color channel.

Light source energy is thus defined by three values

- Save and edit lightOnCube.zip locally
- Add forms to interactively tune the parameters of the lights and the material of the cube.
- Create controls to move the light source interactively
- Insert a second light source in the scene
- Add a texture to the cube

Francois Faure, University of Grenoble. Main page