Fog эффект

Fog — это механизм атмосферного затуманивания сцены в MapLibre GL JS, позволяющий имитировать воздушную перспективу, дымку и постепенное растворение удалённых объектов в атмосфере. Эффект особенно востребован при работе с глобусом, трёхмерным рельефом и большими масштабами обзора карты.

Без атмосферного затухания удалённые объекты выглядят слишком контрастными и искусственными. Fog создаёт визуальную глубину сцены, улучшает восприятие расстояний и делает отображение карты более реалистичным.

Основные задачи эффекта:

создание ощущения объёма пространства;
улучшение восприятия рельефа;
смягчение горизонта;
реалистичное отображение больших территорий;
стилизация картографического интерфейса.

Принцип работы

Fog представляет собой полупрозрачный атмосферный слой, который постепенно смешивается с изображением карты по мере удаления объектов от камеры.

С точки зрения рендеринга происходит интерполяция между цветом объекта и цветом атмосферы:

Итоговый цвет = Цвет объекта × (1 - коэффициент тумана)
                + Цвет атмосферы × коэффициент тумана

Чем дальше объект расположен от наблюдателя, тем выше влияние атмосферного цвета.

В результате:

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

Поддержка Fog в MapLibre GL JS

Эффект задаётся через объект настроек карты.

Общая схема выглядит следующим образом:

map.setFog({
    color: "#ffffff"
});

После применения карта начинает использовать указанные параметры атмосферы при рендеринге сцены.

Чаще всего Fog применяется совместно с:

Globe Projection;
Terrain;
3D Buildings;
Sky Layer.

Базовая настройка

Минимальный пример:

map.setFog({
    color: "#d8e8ff"
});

В данном случае удалённые объекты начинают постепенно смешиваться со светло-голубым оттенком.

Полный пример настройки

Более реалистичный вариант:

map.setFog({
    color: "#d8e8ff",
    "high-color": "#245bde",
    "horizon-blend": 0.15,
    "space-color": "#000814",
    "star-intensity": 0.25
});

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

Свойство color

Назначение

Параметр color определяет основной цвет атмосферы.

Пример:

map.setFog({
    color: "#ffffff"
});

или

map.setFog({
    color: "rgb(200, 220, 255)"
});

или

map.setFog({
    color: "rgba(220, 240, 255, 1)"
});

Влияние на визуальное восприятие

Белый туман:

color: "#ffffff"

Создаёт эффект облачной погоды или сильной дымки.

Светло-голубой:

color: "#d8e8ff"

Имитирует ясную атмосферу.

Серый:

color: "#b0b0b0"

Подходит для индустриальных карт и стилизации под пасмурную погоду.

Тёплый оранжевый:

color: "#ffb066"

Создаёт эффект закатного освещения.

Свойство high-color

Назначение

Параметр задаёт цвет верхних слоёв атмосферы.

Пример:

map.setFog({
    color: "#d8e8ff",
    "high-color": "#245bde"
});

Особенности

При наблюдении под большим углом карта получает дополнительный атмосферный градиент.

Нижняя часть атмосферы:

color

Верхняя часть атмосферы:

high-color

Это позволяет получить плавный переход между слоями воздуха.

Пример дневной атмосферы

map.setFog({
    color: "#d8e8ff",
    "high-color": "#4f7dff"
});

Пример закатной атмосферы

map.setFog({
    color: "#ffcb8c",
    "high-color": "#ff6b35"
});

Свойство horizon-blend

Назначение

Управляет степенью смешивания атмосферы возле линии горизонта.

Пример:

map.setFog({
    color: "#d8e8ff",
    "horizon-blend": 0.1
});

Диапазон значений

Обычно используются значения:

0.0 – 1.0

Низкие значения

"horizon-blend": 0.05

Результат:

чёткий горизонт;
минимальная дымка;
высокая контрастность.

Средние значения

"horizon-blend": 0.2

Результат:

плавный переход;
естественный внешний вид;
хорошая читаемость карты.

Высокие значения

"horizon-blend": 0.8

Результат:

сильное размытие горизонта;
выраженная атмосферная перспектива;
кинематографический эффект.

Свойство space-color

Назначение

Определяет цвет космического пространства за пределами атмосферы.

Пример:

map.setFog({
    "space-color": "#000000"
});

Пример космической сцены

map.setFog({
    color: "#d8e8ff",
    "high-color": "#245bde",
    "space-color": "#01030d"
});

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

Свойство star-intensity

Назначение

Регулирует яркость звёздного фона.

Пример:

map.setFog({
    "star-intensity": 0.5
});

Типичные значения

Отсутствие звёзд:

"star-intensity": 0

Слабая видимость:

"star-intensity": 0.2

Умеренная яркость:

"star-intensity": 0.5

Очень яркое небо:

"star-intensity": 1

Создание дневной атмосферы

Один из наиболее распространённых сценариев.

map.setFog({
    color: "#d8e8ff",
    "high-color": "#87b6ff",
    "horizon-blend": 0.15,
    "space-color": "#0b1020",
    "star-intensity": 0
});

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

светлая атмосфера;
естественный горизонт;
отсутствие звёзд;
хорошая читаемость карты.

Создание ночной атмосферы

map.setFog({
    color: "#1d3557",
    "high-color": "#0d1b2a",
    "horizon-blend": 0.3,
    "space-color": "#000000",
    "star-intensity": 0.8
});

Результат:

тёмное небо;
выраженный контраст;
заметный звёздный фон.

Эффект заката

map.setFog({
    color: "#ffcf99",
    "high-color": "#ff7f50",
    "horizon-blend": 0.4,
    "space-color": "#140b1a",
    "star-intensity": 0.2
});

Получается насыщенная тёплая атмосфера с характерным оранжевым горизонтом.

Динамическое изменение атмосферы

Параметры Fog можно изменять в процессе работы приложения.

Например, реализовать смену времени суток.

Дневной режим

function setDay() {
    map.setFog({
        color: "#d8e8ff",
        "high-color": "#87b6ff",
        "horizon-blend": 0.15,
        "space-color": "#0b1020",
        "star-intensity": 0
    });
}

Ночной режим

function setNight() {
    map.setFog({
        color: "#1d3557",
        "high-color": "#0d1b2a",
        "horizon-blend": 0.3,
        "space-color": "#000000",
        "star-intensity": 0.8
    });
}

Использование вместе с Terrain

Наиболее заметный эффект Fog проявляет себя при отображении рельефа.

Подключение рельефа:

map.addSource("terrain-source", {
    type: "raster-dem",
    url: "mapbox://mapbox.terrain-rgb"
});

map.setTerrain({
    source: "terrain-source",
    exaggeration: 1.5
});

После этого можно включить атмосферу:

map.setFog({
    color: "#d8e8ff",
    "horizon-blend": 0.2
});

Горные массивы на дальних расстояниях будут постепенно растворяться в дымке, как в реальном мире.

Использование вместе с Globe Projection

Для отображения планеты рекомендуется использовать глобус.

map.setProjection({
    name: "globe"
});

Далее подключается атмосферный эффект:

map.setFog({
    color: "#d8e8ff",
    "high-color": "#245bde",
    "space-color": "#000814"
});

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

Анимация параметров Fog

Возможно плавное изменение настроек через таймер.

Пример постепенного изменения цвета:

let value = 0;

setInterval(() => {
    value += 1;

    map.setFog({
        color: `rgb(${200 + value},220,255)`
    });

}, 100);

Подобным образом реализуются:

восход солнца;
закат;
погодные эффекты;
смена климатических зон;
переход между темами оформления.

Производительность

Fog реализован на уровне GPU-шейдеров и оказывает относительно небольшое влияние на производительность.

Однако нагрузка может увеличиваться при сочетании следующих технологий:

Terrain;
Globe Projection;
Fill Extrusion;
большое количество 3D-объектов;
сложные пользовательские слои WebGL.

Особенно заметна дополнительная нагрузка на мобильных устройствах.

Практические рекомендации

Для бизнес-карт

Подходят лёгкие значения:

map.setFog({
    color: "#eef5ff",
    "horizon-blend": 0.1
});

Для глобусов

Рекомендуется использовать полный набор настроек:

map.setFog({
    color: "#d8e8ff",
    "high-color": "#245bde",
    "space-color": "#000814",
    "star-intensity": 0.25,
    "horizon-blend": 0.15
});

Для трёхмерного рельефа

Полезно усиливать атмосферную перспективу:

map.setFog({
    color: "#cfe3ff",
    "horizon-blend": 0.35
});

Для ночных карт

Желательно использовать тёмные оттенки атмосферы:

map.setFog({
    color: "#10213b",
    "high-color": "#08111f",
    "space-color": "#000000",
    "star-intensity": 0.9
});

Типичные ошибки

Слишком яркий цвет атмосферы

color: "#ffffff"

При высоких значениях дымки карта может выглядеть пересвеченной.

Чрезмерный horizon-blend

"horizon-blend": 1

Способен ухудшить читаемость удалённых объектов.

Несогласованные цвета

Плохой пример:

map.setFog({
    color: "#00ff00",
    "high-color": "#ff0000"
});

Резкий контраст между слоями атмосферы создаёт неестественный результат.

Использование Fog без учёта стиля карты

Туман должен сочетаться с:

цветовой палитрой базового стиля;
освещением сцены;
цветом неба;
параметрами рельефа;
общей дизайнерской концепцией приложения.

При грамотной настройке Fog становится одним из наиболее эффективных инструментов визуального улучшения картографических сцен в MapLibre GL JS, позволяя создавать реалистичную атмосферу, подчёркивать глубину пространства и значительно повышать качество восприятия трёхмерных карт.