Fog и FogExp2: туман

Three.js предоставляет два основных типа тумана для сцен: Fog и FogExp2. Оба позволяют создавать эффект атмосферной перспективы, когда дальние объекты становятся менее различимыми и окрашиваются в цвет тумана. Это повышает реализм 3D-сцен, особенно при больших пространствах или открытых ландшафтах.

Fog (линейный туман)

Fog создаёт линейное изменение плотности тумана в зависимости от расстояния от камеры.

const scene = new THREE.Scene();
scene.fog = new THREE.Fog(0xcccccc, 10, 50);

  • Параметры конструктора:

    • color — цвет тумана в шестнадцатеричном формате.
    • near — расстояние от камеры, с которого начинается эффект тумана.
    • far — расстояние, на котором туман становится полностью непрозрачным.

Особенности Fog:

  • Линейное увеличение плотности тумана.
  • Простая настройка для сцен с равномерной перспективой.
  • Работает хорошо при небольших и средних расстояниях.

Пример визуализации: объекты, находящиеся ближе к near, практически не затуманены; объекты у far полностью окрашены цветом тумана. Между этими границами создаётся плавный переход.

FogExp2 (экспоненциальный туман)

FogExp2 создаёт экспоненциальное увеличение плотности тумана, что делает дальние объекты более мягко растворяющимися в воздухе.

const scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0xcccccc, 0.02);

  • Параметры конструктора:

    • color — цвет тумана.
    • density — коэффициент плотности. Чем выше значение, тем быстрее объекты исчезают в тумане.

Особенности FogExp2:

  • Более реалистичный вид для больших открытых пространств.
  • Плотность увеличивается экспоненциально с расстоянием от камеры.
  • Хорошо подходит для сцен с природными пейзажами и атмосферными эффектами.

Формула изменения плотности: [ f(d) = 1 - e^{- d^2}] где d — расстояние до объекта. Этот подход позволяет создать ощущение глубины и пространства без резких границ.

Различия между Fog и FogExp2

Характеристика Fog (линейный) FogExp2 (экспоненциальный)
Распределение Линейное Экспоненциальное
Настройка дальности near и far density
Визуальный эффект Чёткий переход Мягкое постепенное исчезновение
Подходит для Малых и средних сцен Больших открытых пространств

Настройка материалов и освещения с туманом

  1. Материалы: большинство стандартных материалов (MeshStandardMaterial, MeshLambertMaterial, MeshPhongMaterial) автоматически реагируют на туман.
  2. Фоны сцен: если сцена использует цвет фона, совпадающий с туманом, эффект выглядит более естественно:
scene.background = new THREE.Color(0xcccccc);
  1. Освещение: туман не зависит напрямую от источников света, но освещённые объекты будут визуально контрастировать с затуманенными удалёнными объектами.

Комбинирование с анимацией камеры

Туман особенно заметен при движении камеры. Можно динамически изменять параметры тумана:

function animate() {
    requestAnimationFrame(animate);

    // Динамическое изменение плотности FogExp2
    scene.fog.density = 0.01 + 0.01 * Math.sin(Date.now() * 0.001);

    renderer.render(scene, camera);
}

Такой подход позволяет создавать эффекты, имитирующие утренний туман или туман в движении.

Практические советы

  • Для городских или закрытых сцен лучше использовать Fog, так как резкий линейный переход выглядит естественно при ограниченном пространстве.
  • Для пейзажей и природных сцен лучше подходит FogExp2 для мягкой перспективы.
  • Цвет тумана должен гармонировать с освещением и основной палитрой сцены.
  • Не стоит задавать слишком высокую плотность, чтобы не потерять детали объектов на средних расстояниях.

Взаимодействие с другими эффектами

  • Skybox и фоновые текстуры: при использовании тумана рекомендуется синхронизировать цвет неба с цветом тумана, чтобы избежать визуального разрыва.
  • Частицы и дым: туман усиливает эффект глубины для частиц, делая их более реалистичными при больших дистанциях.
  • Post-processing: эффекты вроде bloom или depth-of-field можно комбинировать с туманом для усиления атмосферы.

Итоговая формула выбора

  • Fog — сцены с ограниченной дальностью и равномерным пространством.
  • FogExp2 — большие открытые пространства, природные ландшафты, динамическая перспектива.

Хотите, я могу подготовить полный пример сцены с обоими типами тумана, где наглядно видно разницу между ними?

Оглавление