Hey everyone!
I built a GPU-friendly, height-based ground fog system for Three.js, designed for real-time games and FPS-style movement. It uses multi-octave FBM noise for subtle drifting effects, while staying extremely fast, even with instanced geometry and shadows.
Features:
-
Fog intensity based on world Y coordinate (height-only).
-
FBM noise for natural turbulence and drifting motion.
-
Works on instanced meshes with minimal overhead.
-
Configurable: fog height, depth, opacity, noise, wind, and vertical billow.
-
Fully compatible with standard Three.js lights and shadows.
Performance Notes:
-
Cheap enough for real-time games.
-
Reduce noise octaves or opacity for tighter budgets.
-
Only patch materials that need fog to save shader compile time.
Inspired by SimonDevs’ procedural fog experiments and Ashima/Stegu noise.
