Environmental Effects & Atmospheric Control

Create immersive atmospheric conditions in your virtual spaces using environmental effects. These effects enhance the sense of depth, mood, and realism in 3D environments, making virtual spaces feel more natural and engaging.

updateFog

updateFog(options: object, [callback: Function])

Controls fog effects in the virtual environment to create atmospheric depth, mood, and visual interest. Fog can simulate weather conditions, create mysterious atmospheres, or enhance the sense of scale in large spaces.

Parameters:

• options: object - Fog configuration options (see FogOptions below)

Available Options:

• fogStart?: number - Distance from camera where fog begins to appear
• fogEnd?: number - Distance where fog reaches maximum density
• color?: [r: number, g: number, b: number] - RGB color values (0.0 to 1.0)

// Create mysterious morning fog
api.updateFog({
  fogStart: 10,
  fogEnd: 50,
  color: [0.9, 0.9, 1.0] // Light blue-white
}, function() {
  console.log('Morning fog effect applied');
});

// Create dramatic sunset atmosphere
api.updateFog({
  fogStart: 5,
  fogEnd: 30,
  color: [1.0, 0.6, 0.3] // Warm orange
}, function() {
  console.log('Sunset fog atmosphere created');
});

// Clear fog for crystal clear visibility
api.updateFog({
  fogStart: 1000,
  fogEnd: 2000,
  color: [1.0, 1.0, 1.0] // White (minimal effect)
}, function() {
  console.log('Fog cleared for maximum visibility');
});

Fog Effect Examples

Dynamic Weather System:

class WeatherFogController {
  constructor() {
    this.weatherPresets = {
      clear: {
        fogStart: 1000,
        fogEnd: 2000,
        color: [0.8, 0.9, 1.0]
      },
      misty: {
        fogStart: 20,
        fogEnd: 80,
        color: [0.9, 0.9, 0.95]
      },
      stormy: {
        fogStart: 5,
        fogEnd: 25,
        color: [0.4, 0.4, 0.5]
      },
      sunset: {
        fogStart: 15,
        fogEnd: 60,
        color: [1.0, 0.7, 0.4]
      },
      night: {
        fogStart: 8,
        fogEnd: 40,
        color: [0.1, 0.1, 0.3]
      }
    };
  }
  
  setWeather(weatherType) {
    const preset = this.weatherPresets[weatherType];
    if (!preset) {
      console.error('Unknown weather type:', weatherType);
      return;
    }
    
    api.updateFog(preset, () => {
      console.log(`Weather atmosphere set to: ${weatherType}`);
      this.updateEnvironmentalLighting(weatherType);
    });
  }
  
  updateEnvironmentalLighting(weatherType) {
    // Adjust lighting to match fog atmosphere
    const lightingPresets = {
      clear: { intensity: 1.0 },
      misty: { intensity: 0.7 },
      stormy: { intensity: 0.4 },
      sunset: { intensity: 0.8 },
      night: { intensity: 0.3 }
    };
    
    // Apply lighting changes (assuming lighting API)
    // api.updateLight({ intensity: lightingPresets[weatherType].intensity });
  }
}

const weatherController = new WeatherFogController();
weatherController.setWeather('misty');

Interactive Fog Controls:

function createFogControls() {
  const controlPanel = document.createElement('div');
  controlPanel.innerHTML = `
    <div class="fog-controls">
      <h3>Atmospheric Controls</h3>
      
      <label>Fog Start Distance:
        <input type="range" id="fogStart" min="1" max="100" value="20" 
               onchange="updateFogSettings()">
        <span id="fogStartValue">20</span>
      </label>
      
      <label>Fog End Distance:
        <input type="range" id="fogEnd" min="10" max="200" value="80" 
               onchange="updateFogSettings()">
        <span id="fogEndValue">80</span>
      </label>
      
      <label>Fog Color:
        <input type="color" id="fogColor" value="#e6e6f0" 
               onchange="updateFogSettings()">
      </label>
      
      <div class="preset-buttons">
        <button onclick="applyFogPreset('clear')">Clear</button>
        <button onclick="applyFogPreset('misty')">Misty</button>
        <button onclick="applyFogPreset('dramatic')">Dramatic</button>
        <button onclick="applyFogPreset('sunset')">Sunset</button>
      </div>
    </div>
  `;
  
  document.body.appendChild(controlPanel);
}

function updateFogSettings() {
  const fogStart = document.getElementById('fogStart').value;
  const fogEnd = document.getElementById('fogEnd').value;
  const fogColor = hexToRgb(document.getElementById('fogColor').value);
  
  // Update display values
  document.getElementById('fogStartValue').textContent = fogStart;
  document.getElementById('fogEndValue').textContent = fogEnd;
  
  // Apply fog settings
  api.updateFog({
    fogStart: parseInt(fogStart),
    fogEnd: parseInt(fogEnd),
    color: fogColor
  });
}

function hexToRgb(hex) {
  const r = parseInt(hex.slice(1, 3), 16) / 255;
  const g = parseInt(hex.slice(3, 5), 16) / 255;
  const b = parseInt(hex.slice(5, 7), 16) / 255;
  return [r, g, b];
}

function applyFogPreset(presetName) {
  const presets = {
    clear: { fogStart: 100, fogEnd: 200, color: [0.9, 0.9, 1.0] },
    misty: { fogStart: 20, fogEnd: 80, color: [0.9, 0.9, 0.95] },
    dramatic: { fogStart: 5, fogEnd: 30, color: [0.3, 0.3, 0.4] },
    sunset: { fogStart: 15, fogEnd: 60, color: [1.0, 0.6, 0.3] }
  };
  
  const preset = presets[presetName];
  api.updateFog(preset, () => {
    console.log(`Applied ${presetName} fog preset`);
    updateControlsFromPreset(preset);
  });
}

Animated Fog Transitions:

class FogAnimator {
  constructor() {
    this.isAnimating = false;
    this.currentFog = { fogStart: 50, fogEnd: 100, color: [0.8, 0.8, 0.9] };
  }
  
  animateTo(targetFog, duration = 3000) {
    if (this.isAnimating) return;
    
    this.isAnimating = true;
    const startTime = Date.now();
    const startFog = { ...this.currentFog };
    
    const animate = () => {
      const elapsed = Date.now() - startTime;
      const progress = Math.min(elapsed / duration, 1);
      
      // Smooth easing function
      const easeProgress = 1 - Math.pow(1 - progress, 3);
      
      // Interpolate fog values
      const currentFog = {
        fogStart: this.lerp(startFog.fogStart, targetFog.fogStart, easeProgress),
        fogEnd: this.lerp(startFog.fogEnd, targetFog.fogEnd, easeProgress),
        color: [
          this.lerp(startFog.color[0], targetFog.color[0], easeProgress),
          this.lerp(startFog.color[1], targetFog.color[1], easeProgress),
          this.lerp(startFog.color[2], targetFog.color[2], easeProgress)
        ]
      };
      
      // Apply current fog state
      api.updateFog(currentFog);
      this.currentFog = currentFog;
      
      if (progress < 1) {
        requestAnimationFrame(animate);
      } else {
        this.isAnimating = false;
        console.log('Fog animation completed');
      }
    };
    
    animate();
  }
  
  lerp(start, end, progress) {
    return start + (end - start) * progress;
  }
}

const fogAnimator = new FogAnimator();

// Animate to dramatic fog over 5 seconds
fogAnimator.animateTo({
  fogStart: 5,
  fogEnd: 25,
  color: [0.2, 0.2, 0.3]
}, 5000);

Scene-Based Fog Management:

class SceneFogManager {
  constructor() {
    this.scenes = new Map();
    this.currentScene = null;
  }
  
  registerScene(sceneId, fogSettings) {
    this.scenes.set(sceneId, fogSettings);
  }
  
  switchToScene(sceneId, animated = true) {
    const fogSettings = this.scenes.get(sceneId);
    if (!fogSettings) {
      console.error('Scene not found:', sceneId);
      return;
    }
    
    if (animated && this.currentScene) {
      // Animate transition between scenes
      this.animateSceneTransition(fogSettings);
    } else {
      // Immediate switch
      api.updateFog(fogSettings, () => {
        console.log(`Switched to scene: ${sceneId}`);
      });
    }
    
    this.currentScene = sceneId;
  }
  
  animateSceneTransition(targetFog) {
    // Use the fog animator for smooth transitions
    if (window.fogAnimator) {
      window.fogAnimator.animateTo(targetFog, 2000);
    }
  }
}

// Usage example
const sceneManager = new SceneFogManager();

// Register different scenes
sceneManager.registerScene('lobby', {
  fogStart: 50, fogEnd: 150, color: [0.9, 0.9, 1.0]
});

sceneManager.registerScene('gallery', {
  fogStart: 30, fogEnd: 100, color: [0.95, 0.95, 0.98]
});

sceneManager.registerScene('outdoor', {
  fogStart: 80, fogEnd: 300, color: [0.8, 0.9, 1.0]
});

// Switch scenes with animation
sceneManager.switchToScene('gallery', true);

Best Practices

Visual Design:

• Use fog to create depth and atmosphere in large spaces
• Match fog color to overall lighting scheme
• Adjust fog density based on space size and purpose

Performance:

• Fog effects are generally lightweight but test on target devices
• Use fog to hide distant geometry and improve performance
• Consider user preferences for visual effects

User Experience:

• Provide fog controls for accessibility
• Use fog transitions to guide user attention
• Balance atmospheric effects with visibility needs