2026-01-30.13-53-04.1.MP4
A fully real-time, physically-based planetary atmosphere and volumetric cloud rendering engine built from the ground up using Three.js and GLSL. This project serves as an educational tool and a demonstration of advanced real-time graphics techniques in a web browser.
It simulates light scattering through a planetary atmosphere (Rayleigh and Mie scattering) and renders dynamic, three-dimensional clouds using raymarching. All parameters are exposed through a control panel, allowing for deep customization of the final look.
- Physically-Based Atmosphere: Accurate simulation of atmospheric light scattering, creating realistic sunsets, blue skies, and atmospheric haze that correctly colors distant objects.
- Volumetric Cloud Rendering: Clouds are rendered as true 3D volumes using a raymarching algorithm in a GLSL fragment shader.
- Procedural Generation: All cloud shapes are generated on-the-fly using a combination of procedurally generated 3D Perlin and Worley (cellular) noise textures, which are "baked" at runtime.
- Dynamic Weather System: A global 2D weather map influences cloud coverage and shape across the entire planet, creating large-scale weather fronts and clearings.
- Advanced Post-Processing: Features high-quality effects like God Rays (crepuscular rays), Temporal Anti-Aliasing (TAA) for smooth cloud rendering, and filmic tone mapping.
- Floating Origin System: Allows for exploring virtually infinite distances without encountering floating-point precision issues, enabling true planetary-scale flight.
- Highly Customizable: An extensive
lil-guicontrol panel allows for real-time manipulation of nearly every parameter, from the physical laws of the atmosphere to the shape, density, and color of the clouds.
- W, A, S, D: Move forward, left, backward, and right.
- SPACE: Ascend.
- SHIFT: Descend.
- MOUSE: Look around.
- ESC: Lock/Unlock the mouse cursor.
The engine uses a deferred rendering pipeline combined with several post-processing passes. Here is a high-level overview:
At startup, the engine pre-calculates complex noise patterns into 3D textures. This is a critical optimization.
- A Base Shape Texture is generated by mixing Perlin and Worley noise to define the main cloud structures.
- A Detail Texture is generated using multiple frequencies of Worley noise, which is later used to "erode" the edges of the clouds, creating fine, wispy details.
- A Weather Map is generated as a 2D texture that wraps around the planet.
The planet, terrain, and any other solid objects are rendered into a texture (the sceneRenderTarget), which also stores their depth information in a depth buffer.
This is the core of the engine. A full-screen shader is run to render the clouds.
- For each pixel on the screen, a ray is cast from the camera.
- The shader "marches" along this ray, step-by-step, sampling the 3D cloud textures at each point to determine the cloud density.
- While marching, it calculates how light from the sun and sky would scatter and be absorbed inside the cloud volume, accumulating color and opacity.
- This pass uses Temporal Anti-Aliasing (TAA), blending the current frame with the previous one to create a much smoother and higher-quality result than would be possible in a single frame.
The final image is assembled:
- The atmospheric scattering (the sky) is calculated.
- The solid world from Pass 2 is blended with the atmospheric fog.
- The volumetric clouds from Pass 3 are blended on top.
- Post-effects like God Rays are added.
- Finally, exposure control and tone mapping are applied to produce the final color.
This project was developed by leoawen with the assistance of Google's AI for code structuring, documentation, and translation.
This project was built using techniques and mathematical foundations inspired by the amazing work of the graphics community. Special thanks to:
- Fast Atmosphere by Fewes in 2024-01-19 on Shadertoy - This was a primary reference for the atmosphere.
This project is open-source and available under the MIT License. See the LICENSE file for more info.
