A comprehensive deep dive into implementing real-time volumetric lighting for the web using post-processing and raymarching in React Three Fiber and Three.js. Covers coordinate space transformations (screen space to world space and back), depth-based ray stopping, light shaping with SDFs, shadow mapping from a virtual light camera, Henyey-Greenstein phase functions, Beer's Law transmittance, Fractal Brownian Motion noise for fog, and blue noise dithering for performance. Also explores multi-light setups and omnidirectional shadow casting using a CubeCamera workaround. Includes interactive demos of an arched corridor scene and an asteroid belt space scene.

29m read timeFrom blog.maximeheckel.com
Post cover image
Table of contents
Raymarching Light with Post-ProcessingShadow MappingLight Scattering and other improvementsElevating your work with lightBeyond
38 Impressions