Fog visualization is a key component of atmospheric effects in 3D scenes. This page explores the techniques and implementations used to create realistic and stylized fog effects.

Overview

Fog adds depth, atmosphere, and mood to 3D scenes. In the 3D background system, fog is implemented using GPU-based particle systems for optimal performance.

Implementation Techniques

Particle-Based Fog

The fog system uses point sprites rendered as particles:

• GPU-based animation: All movement calculations happen in the vertex shader
• Per-particle attributes: Each particle has its own size and position
• Sine wave motion: Creates organic, floating movement patterns

Shader Implementation

The fog shader uses custom vertex and fragment shaders:

// Vertex shader animates particles on GPU
pos.y += sin(time + position.x * 0.1 + position.z * 0.1) * 0.1;

This approach ensures:

• No CPU overhead for animation
• Parallel processing of all particles
• Smooth performance even with hundreds of particles

Visual Aesthetic

The fog system creates an atmospheric effect inspired by Chinese landscape paintings:

• Organic clustering: Random positioning creates natural fog banks
• Gentle floating: Sine wave animation creates smooth, organic motion
• Depth perception: Fog adds atmospheric perspective to the scene
• Minimalist style: Matches the overall aesthetic of the background

Performance Considerations

Fog visualization is optimized for performance:

• GPU-based animation (no CPU updates)
• Efficient point sprite rendering
• Configurable particle count
• IntersectionObserver pauses when not visible

Related Articles

• 3d Background - Atmospheric Effects - Main atmospheric effects page
• 3d Background - Atmospheric Effects - Rain Visualization - Rain effects
• 3d Background - Atmospheric Effects - Snow Visualization - Snow effects
• The 3d background - Overview of the 3D background system