Fog for Three.js & React Three Fiber

Fog fades everything in a scene into a single colour with distance. Close to the camera, objects keep their full colour; further away they wash out toward the fog colour; past a set distance they disappear into it completely. It is the simplest way to give a scene depth, hide where it ends and set a mood, from a pale morning haze to a black void.

How it works

3DRise fog is linear distance fog. Two distances define it: Near, where the fog begins, and Far, where it is complete. Between them every surface blends evenly from its own colour toward the fog colour according to how far it is from the camera. Because it depends only on distance, it is the same in every direction and costs almost nothing to draw.

It applies across the scene: your models, the terrain, the ocean and weather objects such as snow all fade into it. The night-sky stars are left out, so they still shine through.

Settings

• Color: the colour everything fades toward. Match it to the horizon of your sky or to the page background so the scene melts into it.
• Near: the distance at which the fog starts, from 0.1 to 100 units.
• Far: the distance at which the fog is complete, up to 1,000 units.

A short gap between Near and Far gives a dense wall of fog; a long gap gives a gentle haze that only shows on distant objects.

Ways to use it

• Depth: fog makes far objects recede, which separates foreground from background even in a simple scene.
• Hiding the edge: a floor, grid or landscape that fades into fog has no visible end, so the scene feels endless.
• Blending with the page: set the fog colour to the page background and the 3D scene dissolves into the layout around it.
• Mood: cool grey for mystery, warm beige for a dusty desert, deep blue for night, black for a spotlight on a product.

Fog and the rest of the environment

The terrain, the ocean and the clouds also fade into the sky with distance through their own haze settings, so a landscape already has a sense of air without scene fog; add fog when you want that effect stronger or tinted. For fog you can see in one part of the scene, a pool of ground mist that thins with height and glows when you look toward the light, use the Volumetric Fog effect. For dust in the air, the Sandstorm object fills a volume with billowing dust.