TBack to Home
Atmospherics & Optics•12 min read•Oct 2026

Implementing Screen-Space Refraction and Volumetric Light Shafts in WebGL

Simulating chromatic light distortion across glass media and crepuscular light rays in dusty atmospheric interior CAD viewports.

Transparent materials like glass or water require bending light rays according to Snell's law. Combining Screen-Space Refraction (SSR) with post-processing Volumetric Light Shafts enhances architectural realism without heavy offline path tracing.

1. Snell's Law & Chromatic Dispersion in Screen Space

Fragment shaders offset background scene texture UV coordinates based on surface normal vectors and Index of Refraction (IOR) ratios, separating RGB channels slightly to reproduce physical glass dispersion.

2. Radial Blur Crepuscular Light Shafts

Sampling occlusion depth masks along radial screen vectors origin-centered at light positions generates atmospheric light shafts (God Rays) piercing through architectural windows and structural openings.

3. Mie Scattering & Atmospheric Phase Functions

Evaluating the Henyey-Greenstein phase function inside volumetric ray-marching loops simulates directional forward light scattering through atmospheric haze and dust particles.