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 10: Volume Scattering


Volume scattering processes simulate how light interacts with participating media such as fog, smoke, or clouds. These interactions play a crucial role in creating realistic atmospheric effects and enhancing the depth of scenes. This section will delve into the concepts of volume scattering processes, phase functions, media, and the BSSRDF (Bidirectional Scattering Surface Reflectance Distribution Function), providing examples, equations, and JavaScript code snippets.

Volume Scattering Processes


Volume scattering refers to the scattering of light within a medium where the medium itself has physical properties that can absorb or scatter light. Examples include smoke, fog, and translucent materials. In computer graphics, volume scattering is important for simulating effects like atmospheric haze, soft shadows, and other optical phenomena.

The scattering of light in a participating medium can be described using the Henye-Greenstein phase function, which models the angular distribution of scattered light. The intensity of light scattered in a medium can be described by the radiative transfer equation:

\[
\frac{dI}{ds} = -\sigma_a I + \sigma_s \int_{4\pi} p(\theta) I(\theta) d\omega
\]

where:
\( I \) is the intensity of light,
\( s \) is the distance,
\( \sigma_a \) is the absorption coefficient,
\( \sigma_s \) is the scattering coefficient,
\( p(\theta) \) is the phase function that describes the scattering direction,
\( d\omega \) is the solid angle.

Phase Functions


A phase function \( p(\theta) \) describes how light is scattered in different directions as it interacts with a medium. It defines the probability distribution of the scattered light relative to the incoming light direction. Common phase functions include:

1. Henye-Greenstein Phase Function:

The Henye-Greenstein phase function is defined as:

\[
p(\theta) = \frac{1}{4\pi} \frac{1 - g^2}{(1 + g^2 - 2g \cos \theta)^{3/2}}
\]

Where \( g \) is the anisotropy factor, which ranges from -1 to 1:
- \( g = 1 \): Light is scattered directly forward.
- \( g = -1 \): Light is scattered directly backward.
- \( g = 0 \): Isotropic scattering.

Here's how you can implement the Henye-Greenstein phase function in JavaScript:

ript
function henyeGreensteinPhaseFunction(thetag) {
    const 
cosTheta Math.cos(theta);
    const 
denominator Math.pow(cosTheta1.5);
    return (
g) / (Math.PI denominator);
}


Environments


An environment medium can have properties like absorption and scattering coefficients, which determine how much light is absorbed or scattered as it passes through.

In a ray tracing system, a medium can be represented as a class that holds these properties and provides methods for computing light interactions.

Here's an example of how to define a media class in JavaScript:

class Medium {
    
constructor(scatteringCoefficientabsorptionCoefficientphaseFunction) {
        
this.scatteringCoefficient scatteringCoefficient// _s
        
this.absorptionCoefficient absorptionCoefficient// _a
        
this.phaseFunction phaseFunction// Phase function
    
}

    
// Calculate the extinction coefficient
    
getExtinctionCoefficient() {
        return 
this.scatteringCoefficient this.absorptionCoefficient;
    }

    
// Example method to compute light intensity after passing through the medium
    
computeLightIntensity(intensitydistance) {
        const 
extinction this.getExtinctionCoefficient();
        const 
transmittance Math.exp(-extinction distance);
        return 
intensity transmittance;
    }
}


The BSSRDF


The BSSRDF (Bidirectional Scattering Surface Reflectance Distribution Function) models light scattering in participating media at the interface of a surface. Unlike traditional BRDFs, which only account for light reflection on surfaces, BSSRDFs consider how light penetrates a surface and scatters within a medium before being reflected back out.

The BSSRDF is essential for rendering materials like skin, wax, or marble, where subsurface scattering significantly affects the appearance.

The BSSRDF can be mathematically expressed as:

\[
BSSRDF(p, \omega_i, \omega_o) = \int_{\mathcal{S}} f_r(p, \omega_i, \omega_o, \mathbf{s}) \cdot T(p, \mathbf{s}) \, d\mathbf{s}
\]

where:
\( p \) is the point on the surface,
\( \omega_i \) and \( \omega_o \) are the incoming and outgoing light directions,
\( f_r \) is the reflectance function,
\( T \) is the transmittance function,
\( \mathbf{s} \) represents points in the scattering medium.

Here's a JavaScript implementation outline for computing BSSRDF:

class BSSRDF {
    
constructor(media) {
        
this.media media// Instance of the Medium class
    
}

    
compute(pomega_iomega_o) {
        
// Placeholder function to compute BSSRDF
        
const sampleCount 100// Number of samples to take
        
let totalReflectance 0;

        for (
let i 0sampleCounti++) {
            
// Sample point s within the medium
            
const this.samplePoint(p);
            const 
transmittance this.media.computeLightIntensity(1p.distanceTo(s));
            
totalReflectance += this.reflectanceFunction(pomega_iomega_os) * transmittance;
        }

        return 
totalReflectance sampleCount// Average the results
    
}

    
samplePoint(p) {
        
// Placeholder for sampling a point in the medium
        // Implement your sampling logic here
        
return new Point3f(...); // Sampled point
    
}

    
reflectanceFunction(pomega_iomega_os) {
        
// Placeholder function for reflectance
        
return 1// Simple model for demonstration
    
}
}








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.