Linear Fog vs Exponential Fog in Three.js

This article explains the core differences between linear fog (THREE.Fog) and exponential fog (THREE.FogExp2) in Three.js. You will learn how each fog type calculates depth, how their configuration parameters differ, and how to choose the right atmospheric effect for your 3D web applications.

Linear Fog (THREE.Fog)

Linear fog in Three.js is defined by a starting distance (near) and an ending distance (far). The fog begins applied at the near distance and increases in a straight, linear progression until it reaches maximum density at the far distance. Any object positioned beyond the far limit will be completely obscured by the fog color.

To implement linear fog, you define it using three parameters:

scene.fog = new THREE.Fog(color, near, far);

Because of its distinct start and end points, linear fog is highly predictable. It is ideal for performance optimization, such as hiding the abrupt spawning (pop-in) of 3D models at the edge of the camera’s view frustum. However, it can look artificial because real-world fog does not have a defined starting line or a sudden maximum threshold.

Exponential Fog (THREE.FogExp2)

Exponential fog simulates realistic atmospheric haze by defining fog density rather than physical start and end boundaries. It uses an exponential function of distance, meaning the fog starts immediately at the camera lens and grows exponentially thicker the further an object is from the camera.

To implement exponential fog, you define it using two parameters:

scene.fog = new THREE.FogExp2(color, density);

The density parameter determines how quickly the fog saturates the view. Even with low density values (e.g., 0.02), objects gradually fade into the background. Because exponential decay mimics how light scatters through real-world particulates, FogExp2 is the preferred choice for creating realistic outdoor environments, natural mist, smoke, or underwater scenes.

Key Differences Summary

• Parameters: Linear fog requires a defined range (near and far limits), whereas exponential fog requires only a density value.
• Visual Realism: Linear fog has a noticeable boundary where the fog starts and ends. Exponential fog provides a smooth, natural transition that starts immediately at the camera and thickens over distance.
• Use Cases: Use linear fog when you need strict control over where the fog starts and stops (e.g., rendering boundaries or stylized games). Use exponential fog when aiming for realistic environmental effects like natural weather, depth perception, or realistic lighting attenuation.