How to Implement Three.js FogExp2 for Realistic Fog

In Three.js, creating environmental depth and realism often relies on fog effects. This article provides a quick, direct guide on how to implement FogExp2 to create realistic exponential distance fog in your 3D scenes. You will learn the difference between linear and exponential fog, how to configure the FogExp2 parameters, and how to apply it directly to your Three.js project.

Understanding FogExp2

Three.js offers two types of fog: linear fog (THREE.Fog) and exponential fog (THREE.FogExp2).

While linear fog defines a clear start and end distance where the fog begins and reaches maximum density, THREE.FogExp2 models real-world fog more accurately. It grows exponentially denser with the distance from the camera, resulting in a smoother, more natural transition that is ideal for outdoor environments, atmospheric rendering, and misty landscapes.

Step-by-Step Implementation

To implement exponential fog, you need to instantiate THREE.FogExp2 and assign it to your scene’s fog property.

1. Define the Fog Parameters

FogExp2 accepts two parameters: * Color: The color of the fog (typically represented as a hexadecimal value). * Density: A decimal value representing how quickly the fog accumulates. Standard values usually range between 0.01 and 0.1.

2. Add Fog to the Scene

Here is the minimal code required to set up exponential fog in a Three.js scene:

import * as THREE from 'three';

// 1. Initialize the scene
const scene = new THREE.Scene();

// 2. Define the fog color and density
const fogColor = 0xcccccc; // Light gray
const fogDensity = 0.015;

// 3. Apply FogExp2 to the scene
scene.fog = new THREE.FogExp2(fogColor, fogDensity);

3. Match the Background/Clear Color

For the fog to look realistic, the background or canvas clear color must match the fog color. If they do not match, 3D objects will fade into the fog color, but the background of the canvas will remain a different color, breaking the illusion of depth.

// Set up the renderer and match its clear color to the fog color
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(fogColor);
document.body.appendChild(renderer.domElement);

Disabling Fog on Specific Materials

By default, most standard Three.js materials (such as MeshStandardMaterial or MeshPhongMaterial) react to the scene’s fog. If you have specific objects in your scene that should not be affected by the fog—such as a user interface element or a skybox—you can disable fog on their materials:

const material = new THREE.MeshStandardMaterial({
    color: 0xff0000,
    fog: false // This material will ignore the scene's FogExp2
});

Tuning Your Fog

If your scene appears completely white or gray, your density is likely too high. Decrease the density value (e.g., to 0.005) to make the fog more subtle. Conversely, if the fog is barely visible, slowly increase the density parameter until you achieve the desired atmospheric depth.