Developer creates real-time atmospheric shaders for browser-based planetary rendering
Using techniques such as Rayleigh and Mie scattering, Heckel has developed a system capable of simulating Earth's sunset gradients and a specific model for Mars' dusty orange atmosphere.
Developer Maxime Heckel has published a comprehensive technical guide detailing a month-long project to create real-time atmospheric scattering shaders that execute directly within web browsers. The work enables the rendering of realistic skies, sunsets, and planetary atmospheres using raymarching and physics-based models for Rayleigh, Mie, and ozone scattering. Heckel integrates these effects into 3D scenes via React Three Fiber, utilising Look Up Tables (LUTs) to optimise performance and demonstrating a specific model for Mars' dusty, orange atmosphere. The project was inspired by imagery of the space shuttle Endeavour and recent Artemis II mission developments.
The core of the implementation relies on established physics models to simulate how light interacts with air and its constituents. Heckel casts rays from the camera into the scene, stepping through the transparent medium to accumulate optical depth based on altitude. This process calculates transmittance using Beer's Law, determining the fraction of light that survives while traveling through the atmosphere. By accounting for the angle between incoming sunlight and the view ray, the system models how scattered light accumulates along a given ray, resulting in the characteristic blue sky during the day and the redder hues of a sunset.
To move beyond a simple flat background, Heckel adapted the shader into a post-processing effect that fills the space between the camera and 3D objects. This requires integrating the atmospheric volume with the scene's depth buffer. A significant technical challenge involved preventing depth fighting between the planet surface and the atmosphere shell at a distance. This was resolved by enabling a logarithmic depth buffer and using ray-sphere intersection tests to limit the raymarching loop to the specific segment of the atmosphere surrounding the planet.
Performance optimisation was a key focus, as the original nested light-marching loops proved expensive to run. Heckel replaced these costly calculations with a Look Up Table approach based on texture lookups. By precomputing transmittance and sky view data into textures, the final render can fetch lighting information quickly rather than recalculating it for every sample point. This LUT-based method significantly improves render speed while maintaining the visual fidelity of the atmospheric scattering.
The guide also details the creation of a Mars-specific atmospheric model by adjusting scattering constants to simulate a dusty, orange atmosphere with a distinctive blue sunset hue. Additionally, the implementation includes logic to handle celestial bodies blocking the sun, calculating angular separation to determine sun visibility when objects like the moon obstruct the light source. However, ongoing work on volumetric clouds currently yields mixed results and is not yet ready for public showcase.
The technical foundation relies on WebGPU concepts, including frame buffer objects and compute shaders, though the demonstration is currently executed within the WebGL and React Three Fiber ecosystem. Heckel cites the work of Sebastian Hillaire and Shoda Matsuda as key references for scalable and production-grade geospatial rendering. The resulting system offers an interactive experience that makes the complex topic of atmospheric physics more accessible while providing a powerful tool for developers creating immersive space-related visual content.
