 | [TOC] Chapter 7: Reflection Models |  |
Reflection models are essential for simulating how light interacts with surfaces, capturing effects like glossiness, roughness, and metallicity to make materials appear realistic. They define the balance between reflected, refracted, and absorbed light, ensuring surfaces respond accurately to lighting in the environment.
| Reflection Model Basics | |
Reflection models describe how light interacts with surfaces and determines the final color at a given point. These models take into account the physical properties of the surface and the incoming and outgoing light directions. A reflection model defines how light is reflected (or transmitted) when it hits a surface, and it influences the appearance of materials, like how shiny, rough, or matte they look.
The reflection equation (also known as the Bidirectional Reflectance Distribution Function, or BRDF) governs how much light is reflected from an incoming direction \(\mathbf{L_i}\) to an outgoing direction \(\mathbf{L_o}\) based on the surface properties:
\[
L_o(\mathbf{p}, \mathbf{\omega_o}) = \int_{\Omega} f_r(\mathbf{p}, \mathbf{\omega_o}, \mathbf{\omega_i}) L_i(\mathbf{p}, \mathbf{\omega_i}) (\mathbf{n} \cdot \mathbf{\omega_i}) d\mathbf{\omega_i}
\]
where:
\(L_o(\mathbf{p}, \mathbf{\omega_o})\) is the outgoing radiance at point \(\mathbf{p}\) in direction \(\mathbf{\omega_o}\),
\(f_r(\mathbf{p}, \mathbf{\omega_o}, \mathbf{\omega_i})\) is the BRDF that describes the reflection properties,
\(L_i(\mathbf{p}, \mathbf{\omega_i})\) is the incoming radiance at point \(\mathbf{p}\) from direction \(\mathbf{\omega_i}\),
\(\mathbf{n} \cdot \mathbf{\omega_i}\) is the cosine term accounting for the angle between the surface normal \(\mathbf{n}\) and the incoming light direction.
| Specular Reflection and Transmission | |
Specular reflection is the perfect mirror-like reflection where the angle of reflection equals the angle of incidence. This is typically used for shiny surfaces such as polished metal, glass, or water.
For specular transmission, the ray passes through the surface, like in transparent materials such as glass or water, but it may change direction due to refraction (Snell's law).
Reflection (Perfect Mirror) Example in JavaScript
function reflect(direction, normal) {
// Reflection equation: r = d - 2 * (d . n) * n
return subtract(direction, scale(normal, 2 * dot(direction, normal)));
}
// Usage
const rayDir = [1, -1, 0];
const normal = [0, 1, 0];
const reflectedRay = reflect(rayDir, normal);
console.log(reflectedRay); // Reflected ray direction
Snell's Law for Refraction (Transmission)
\[
\eta_i \sin \theta_i = \eta_t \sin \theta_t
\]
where \(\eta_i\) and \(\eta_t\) are the refractive indices of the two materials, and \(\theta_i\) and \(\theta_t\) are the angles of incidence and refraction, respectively.
Refraction Example in JavaScript
function refract(direction, normal, eta) {
const cosi = -dot(direction, normal);
const cost2 = 1.0 - eta * eta * (1.0 - cosi * cosi);
if (cost2 < 0) return null; // Total internal reflection
const t = scale(direction, eta);
const n = scale(normal, eta * cosi - Math.sqrt(cost2));
return add(t, n); // Refracted ray direction
}
// Usage
const incidentRay = [1, -1, 0];
const normal = [0, 1, 0];
const eta = 1.5; // For glass, for example
const refractedRay = refract(incidentRay, normal, eta);
| Lambertian Reflection | |
Lambertian reflection models the behavior of rough, diffuse surfaces. In this model, the light is scattered uniformly in all directions, which makes the surface appear equally bright from any angle.
The Lambertian BRDF is:
\[
f_r(\mathbf{p}, \mathbf{\omega_o}, \mathbf{\omega_i}) = \frac{\rho}{\pi}
\]
where \(\rho\) is the diffuse reflectivity of the surface (i.e., albedo).
Lambertian Reflection Example in JavaScript
function lambertianReflection(normal, lightDir, albedo) {
// The Lambertian reflection is just the cosine of the angle between the light direction and normal
const cosTheta = Math.max(dot(normal, lightDir), 0);
return scale(albedo, cosTheta / Math.PI); // Return the reflected color
}
// Usage
const normal = [0, 1, 0];
const lightDir = [0, 1, -1];
const albedo = [1, 0, 0]; // Red surface
const reflectedColor = lambertianReflection(normal, lightDir, albedo);
console.log(reflectedColor); // Reflected light color
| Microfacet Models | |
Microfacet models are used to simulate reflections from rough surfaces, where the surface is made up of tiny facets (microfacets) that reflect light like small mirrors. The reflection depends on the distribution of the microfacets and the shadowing and masking effects.
One common microfacet distribution is the Beckmann distribution, which models how microfacet normals are distributed across a rough surface.
The BRDF for the microfacet model is:
\[
f_r = \frac{D(h) F(\omega_i \cdot h) G(\omega_i, \omega_o)}{4 (\mathbf{n} \cdot \mathbf{\omega_i}) (\mathbf{n} \cdot \mathbf{\omega_o})}
\]
where:
\(D(h)\) is the normal distribution function (NDF) describing the distribution of microfacets,
\(F(\omega_i \cdot h)\) is the Fresnel factor,
\(G(\omega_i, \omega_o)\) is the geometric attenuation factor,
\(h\) is the half-vector between the incoming and outgoing directions: \(h = \frac{\omega_i + \omega_o}{|\omega_i + \omega_o|}\).
Example: Microfacet Reflection in JavaScript (simplified)
function microfacetReflection(wo, wi, normal, roughness) {
const halfway = normalize(add(wo, wi));
const cosThetaH = Math.max(dot(normal, halfway), 0);
// Beckmann distribution (simplified)
const D = Math.exp((cosThetaH * cosThetaH - 1) / (roughness * roughness)) / (roughness * roughness * Math.PI);
// Fresnel term (Schlick approximation)
const F = fresnelSchlick(dot(halfway, wi), 1.0, 0.04); // assuming a dielectric material
// Geometry term (simplified)
const G = Math.min(1, 2 * dot(normal, halfway) * dot(normal, wo) / dot(wo, halfway));
return D * F * G / (4 * dot(normal, wi) * dot(normal, wo));
}
function fresnelSchlick(cosTheta, F0, F1) {
return F0 + (F1 - F0) * Math.pow(1 - cosTheta, 5);
}
| Fresnel Incidence Effects | |
The Fresnel effect describes how the amount of reflection changes based on the angle of incidence. At normal incidence, surfaces reflect less light than at glancing angles. This is especially important for materials like glass or water, where you can see a mix of reflection and refraction depending on the angle.
The Fresnel equation for dielectrics (non-conductors) is given by:
\[
R(\theta) = R_0 + (1 - R_0)(1 - \cos \theta)^5
\]
where:
\(R_0\) is the reflectance at normal incidence,
\(\theta\) is the angle between the incoming light direction and the surface normal.
Example: Fresnel Term in JavaScript (Schlick's Approximation)
function fresnelSchlickApprox(cosTheta, R0) {
return R0 + (1 - R0) * Math.pow(1 - cosTheta, 5);
}
// Usage
const cosTheta = 0.5; // cosine of the angle between light direction and normal
const R0 = 0.04; // Reflectance at normal incidence for glass-like material
const fresnel = fresnelSchlickApprox(cosTheta, R0);
console.log(fresnel); // Fresnel reflection term
| Fourier Basis BSDFs | |
Fourier Basis Bidirectional Scattering Distribution Functions (BSDFs) provide a more general way to represent surface interactions by decomposing them into a Fourier series. Instead of using a simple function for reflection, transmission, or absorption, the Fourier basis provides a compact way to represent complex scattering behavior, especially for anisotropic materials (those whose properties vary with direction).
The Fourier BSDF stores scattering data in a frequency domain, enabling the modeling of very complex light interactions efficiently. This approach is particularly useful for realistic materials that have intricate reflectance properties.
However, Fourier BSDFs are typically not directly computed in real-time applications, but precomputed data can be used for rendering. In code, this would usually involve querying from precomputed tables rather than directly implementing Fourier transformations in JavaScript.
Fourier Basis BSDFs are beyond typical real-time JS implementation, but here's a general idea
// Fourier BSDFs would be loaded from a precomputed lookup table
function sampleFourierBSDF(fourierData, incomingDir, outgoingDir) {
// Lookup the Fourier coefficients based on the incoming and outgoing directions
const coefficients = lookupFourierCoefficients(fourierData, incomingDir, outgoingDir);
// Perform inverse Fourier transform to get the reflection/transmission value
return inverseFourierTransform(coefficients);
}
|
