Chapter 815: Fog (Manual)

Core Idea

How to fade a scene to a color with distance using Fog (linear near/far fade) or FogExp2 (exponential falloff), why the fog color must match the scene background color, and how to disable fog per-material for interiors.

Key Concepts

• Fog(color, near, far): linear fade — unaffected before near, fully fog-colored past far, blended in between.
• FogExp2(color, density): exponential falloff with distance; more physically realistic but harder to art-direct precisely than Fog.
• scene.fog: where a fog instance is assigned to take effect.
• Matching background: fog only affects rendered pixels, so scene.background should be set to the same color as the fog or the horizon won't blend seamlessly.
• material.fog (boolean): defaults to true; turning it off per-material excludes that surface from fog, useful for interiors (e.g. inside a vehicle cockpit or a house) that shouldn't be washed out by short-range exterior fog.

Code Examples

class FogGUIHelper {
  constructor(fog, backgroundColor) {
    this.fog = fog;
    this.backgroundColor = backgroundColor;
  }
  get near() { return this.fog.near; }
  set near(v) { this.fog.near = v; this.fog.far = Math.max(this.fog.far, v); }
  get far() { return this.fog.far; }
  set far(v) { this.fog.far = v; this.fog.near = Math.min(this.fog.near, v); }
  get color() { return `#${this.fog.color.getHexString()}`; }
  set color(hexString) {
    this.fog.color.set(hexString);
    this.backgroundColor.set(hexString);
  }
}

• What it demonstrates: a GUI-friendly wrapper that keeps near <= far and syncs the fog color with the scene background color.

Key Takeaways

1. Fog fades linearly between a near and far distance; FogExp2 grows exponentially and is more realistic but less controllable.
2. Fog only affects rendered pixels — set scene.background to the same color as the fog color or the fade will look wrong at the horizon.
3. Keep near <= far when driving fog settings from a UI; a small wrapper class can enforce that automatically.
4. Turn material.fog = false off for surfaces that shouldn't be affected, such as interior walls under a short-range exterior fog setting.

Connects To

• PerspectiveCamera: near/far clipping concepts from the Cameras manual chapter are conceptually related but distinct from fog's near/far.