www.xbdev.net
xbdev - software development
Friday February 20, 2026
Home | Contact | Support | Computer Graphics Powerful and Beautiful ...
     
 

Physically-Based
Rendering

Lights and Rays ...

 



[TOC] Chapter 14: Light Transport II: Volume Rendering


Volume rendering focuses on simulating the interaction of light within participating media, such as fog, smoke, clouds, or other translucent materials, where light scatters, absorbs, or emits. In this part of ray tracing, we expand from surface reflection to include light transport through volumes.

This chapter discusses the equation of transfer, sampling volume scattering, volumetric light transport, and methods for subsurface scattering using diffusion equations.


The Equation of Transfer


The Radiative Transfer Equation (RTE) governs how light interacts with a participating medium (volumes like fog, smoke, etc.). This equation accounts for absorption, emission, and scattering of light within the medium. The RTE is defined as:

\[
\frac{dL(x, \omega)}{ds} = -\sigma_a(x) L(x, \omega) + \sigma_s(x) \int_{\Omega} f_s(\omega', \omega) L(x, \omega') d\omega' + q(x, \omega)
\]

where:
\( L(x, \omega) \) is the radiance at position \(x\) in direction \( \omega \),
\( \sigma_a(x) \) is the absorption coefficient, which describes how much light is absorbed,
\( \sigma_s(x) \) is the scattering coefficient, which describes how much light is scattered in the medium,
\( f_s(\omega', \omega) \) is the phase function, describing how light is scattered from direction \( \omega' \) to \( \omega \),
\( q(x, \omega) \) is the emission term (light emitted by the medium).

This equation integrates light's interaction with the volume as it travels through, and it's typically solved using numerical methods like Monte Carlo integration or ray marching.

Example: Numerical Approximation of RTE Using Ray Marching


In a simple volume renderer, we can approximate the radiative transfer equation by marching along the ray through the medium and accumulating the absorption and scattering effects:

function volumeRendering(raymediumstepSize) {
    
let L 0// Accumulated radiance
    
let t 0// Current distance along the ray
    
    
while (medium.maxDistance) {
        const 
point ray.origin ray.direction;
        
        
// Evaluate the medium properties at this point
        
const sigma_a medium.absorptionCoefficient(point);
        const 
sigma_s medium.scatteringCoefficient(point);
        
        
// Compute the attenuation factor
        
const transmittance Math.exp(-sigma_a stepSize);
        
        
// Sample in-scattered radiance
        
const inScatteredRadiance sampleInScattering(ray.directionpointsigma_s);
        
        
// Accumulate the radiance
        
+= inScatteredRadiance transmittance stepSize;
        
        
// Move to the next step
        
+= stepSize;
    }
    
    return 
L;
}


In this example, the ray is marched through the medium in small steps (`stepSize`), and at each point, we compute the transmittance due to absorption and the in-scattered radiance from nearby light sources.


Sampling Volume Scattering


Volume scattering occurs when light bounces off particles suspended in the medium (e.g., dust in the air). This process is controlled by the scattering phase function, which determines how likely light is to scatter in a given direction.

Phase Function


The phase function \( f_s(\omega', \omega) \) describes how light scatters from direction \( \omega' \) to \( \omega \). Common phase functions include:

Isotropic Scattering: Light scatters equally in all directions.
Henyey-Greenstein Phase Function: A parameterized phase function that can model forward or backward scattering.

\[
f_{HG}(\omega', \omega) = \frac{1 - g^2}{4 \pi (1 + g^2 - 2g (\omega' \cdot \omega))^{3/2}}
\]

where \( g \) is the anisotropy factor, controlling how much scattering is forward (\( g > 0 \)) or backward (\( g < 0 \)).

Example: Henyey-Greenstein Sampling


function heneyGreensteinSample(g) {
    const 
Math.random(); // Random number for sampling
    
const cosTheta = (/ (g)) * (- ((g) / (u)));
    const 
phi Math.PI Math.random(); // Random azimuthal angle
    
    
const sinTheta Math.sqrt(cosTheta cosTheta);
    return {
        
xsinTheta Math.cos(phi),
        
ysinTheta Math.sin(phi),
        
zcosTheta
    
};
}


This code samples a random scattering direction from the Henyey-Greenstein phase function, which is commonly used in volumetric light transport to approximate scattering behavior in participating media.


Volumetric Light Transport


Volumetric light transport combines absorption, scattering, and emission inside a medium. It can be thought of as light interacting with every point inside the volume, not just at surface boundaries.

Volumetric Light Transport Equation


In volumetric rendering, the radiance accumulated along a ray through the medium is:

\[
L(x, \omega) = \int_0^d T(t) \sigma_s f_s(\omega', \omega) L_i(t, \omega') dt
\]

where:
\( T(t) \) is the transmittance, which accounts for the attenuation of light due to absorption,
\( \sigma_s \) is the scattering coefficient,
\( f_s(\omega', \omega) \) is the phase function, and
\( L_i(t, \omega') \) is the incoming radiance at distance \( t \).

Example: Monte Carlo Estimation of Volumetric Light


function volumetricLight(raymediumstepSize) {
    
let accumulatedRadiance 0;
    
let transmittance 1.0;
    
let t 0;

    while (
medium.maxDistance) {
        const 
point ray.origin ray.direction;
        const 
sigma_s medium.scatteringCoefficient(point);
        const 
sigma_a medium.absorptionCoefficient(point);

        
// Sample scattering direction
        
const scatterDir heneyGreensteinSample(medium.anisotropy);

        
// Estimate incoming radiance from this point
        
const incomingRadiance computeIncomingRadiance(pointscatterDir);

        
// Accumulate radiance contribution
        
accumulatedRadiance += incomingRadiance transmittance sigma_s stepSize;

        
// Update transmittance due to absorption
        
transmittance *= Math.exp(-sigma_a stepSize);

        
// Move along the ray
        
+= stepSize;
    }

    return 
accumulatedRadiance;
}


This function uses Monte Carlo estimation to accumulate the radiance inside the volume by marching through the medium in small steps and sampling scattering events.

Sampling Subsurface Reflection Functions


Subsurface scattering refers to light entering a surface, scattering internally within the material, and exiting at a different point. This effect is common in translucent materials like skin, marble, or wax.

The Bidirectional Subsurface Scattering Distribution Function (BSSRDF) governs subsurface scattering. It describes the transfer of radiance from an incoming ray entering the surface at one point to an outgoing ray leaving the surface at another point.

BSSRDF Equation


The BSSRDF \( S(\mathbf{x_i}, \mathbf{x_o}, \omega_i, \omega_o) \) is defined as:

\[
S(\mathbf{x_i}, \mathbf{x_o}, \omega_i, \omega_o) = f_s(\mathbf{x_i}, \mathbf{x_o}, \omega_i, \omega_o) T_r(\mathbf{x_i}, \mathbf{x_o})
\]

where:
\( f_s \) is the scattering function,
\( T_r \) is the transmittance from the incident point \( \mathbf{x_i} \) to the exit point \( \mathbf{x_o} \).

Example: Subsurface Scattering Sampling


function subsurfaceScatterSample(surfacePointnormalmaterial) {
    
// Sample a point below the surface for subsurface scattering
    
const radius Math.random() * material.scatteringDistance;
    const 
theta Math.random() * Math.PI;

    const 
samplePoint = {
        
xsurfacePoint.radius Math.cos(theta),
        
ysurfacePoint.radius Math.sin(theta),
        
zsurfacePoint.material.thickness Math.random() // Sampling below the surface
    
};

    return 
samplePoint;
}


This function samples a point below the surface for subsurface scattering, simulating how light diffuses through the material before exiting at a different location.

Subsurface Scattering Using the Diffusion Equation


For materials like skin or marble, where subsurface scattering is dominant, solving the exact BSSRDF is computationally expensive. Instead, the diffusion equation offers an approximation. The diffusion equation models how light spreads out after entering a medium, assuming that light scatters many times before exiting.

Diffusion Approximation


The diffusion equation approximates subsurface scattering as:

\[
L_o(x_o, \omega_o) = \int_A R_d(\mathbf{x

_o}, \mathbf{x_i}) L_i(x_i, \omega_i) dA_i
\]

where \( R_d \) is the diffusion reflectance profile and approximates how light spreads within the medium.

Example: Diffusion Profile Sampling


function diffusionProfileSample(surfacePointnormalmaterial) {
    const 
Math.random() * material.scatteringRadius;
    const 
theta Math.random() * Math.PI;

    
// Sample a point around the surface using the diffusion profile
    
const samplePoint = {
        
xsurfacePoint.Math.cos(theta),
        
ysurfacePoint.Math.sin(theta),
        
zsurfacePoint.z
    
};

    return 
samplePoint;
}


Here, we sample a point within the diffusion radius, approximating how light scatters and spreads inside the material using a diffusion profile.







Ray-Tracing with WebGPU kenwright WebGPU Development Cookbook - coding recipes for all your webgpu needs! WebGPU by Example: Fractals, Image Effects, Ray-Tracing, Procedural Geometry, 2D/3D, Particles, Simulations WebGPU Games WGSL 2d 3d interactive web-based fun learning WebGPU Compute WebGPU API - Owners WebGPU & WGSL Essentials: A Hands-On Approach to Interactive Graphics, Games, 2D Interfaces, 3D Meshes, Animation, Security and Production Kenwright graphics and animations using the webgpu api 12 week course kenwright learn webgpu api kenwright programming compute and graphics applications with html5 and webgpu api kenwright real-time 3d graphics with webgpu kenwright webgpu for dummies kenwright webgpu api develompent a quick start guide kenwright webgpu by example 2022 kenwright webgpu gems kenwright webgpu interactive compute and graphics visualization cookbook kenwright wgsl webgpu shading language cookbook kenwright WebGPU Shader Language Development: Vertex, Fragment, Compute Shaders for Programmers Kenwright wgsl webgpugems shading language cookbook kenwright WGSL Fundamentals book kenwright WebGPU Data Visualization Cookbook kenwright Special Effects Programming with WebGPU kenwright WebGPU Programming Guide: Interactive Graphics and Compute Programming with WebGPU & WGSL kenwright



 
Advert (Support Website)

 
 Visitor:
Copyright (c) 2002-2025 xbdev.net - All rights reserved.
Designated articles, tutorials and software are the property of their respective owners.