Атмосфера и небо

В Mapbox GL JS визуальная «атмосфера» карты формируется несколькими слоями и параметрами стиля, которые отвечают за небо, туман, освещение и взаимодействие с 3D-геометрией. Эти компоненты работают поверх базовой карты и позволяют переходить от плоского представления к сценоподобной визуализации.

Ключевые элементы системы:

  • слой неба (sky layer)
  • глобальный туман (fog)
  • освещение сцены (light)
  • взаимодействие с рельефом (terrain)

Слой неба (Sky Layer)

Слой неба добавляется как отдельный слой типа sky и располагается в самом нижнем визуальном слое сцены, формируя фон для всех остальных объектов.

map.addLayer({
  id: 'sky',
  type: 'sky',
  paint: {
    'sky-type': 'atmosphere'
  }
});

Типы неба

sky-type определяет визуальную модель:

  • gradient — простой градиент, подходит для минималистичных сцен
  • atmosphere — физически более правдоподобная модель с имитацией рассеивания света
paint: {
  'sky-type': 'gradient'
}

или

paint: {
  'sky-type': 'atmosphere'
}

Атмосферная модель неба

Режим atmosphere использует упрощённую модель рассеивания света в атмосфере. Он реагирует на положение источника света и создаёт эффект:

  • светлого горизонта
  • затемнения в зените
  • мягких переходов цветовой температуры

Основные параметры

sky-atmosphere-sun задаёт положение солнца в виде вектора:

'sky-atmosphere-sun': [0.0, 1.0]

Вектор определяет направление света, влияющее на градиент неба.

sky-atmosphere-sun-intensity управляет яркостью солнечного влияния:

'sky-atmosphere-sun-intensity': 15

Большие значения усиливают засветку и контраст между горизонтом и верхней частью неба.

sky-atmosphere-color определяет общий тон атмосферы:

'sky-atmosphere-color': 'rgba(200, 210, 255, 1.0)'

Этот параметр влияет на общий оттенок рассеянного света.

Градиентное небо

Режим gradient используется для более простых сцен, где физическая точность не требуется.

paint: {
  'sky-type': 'gradient',
  'sky-gradient': [
    'interpolate',
    ['linear'],
    ['zoom'],
    0, 'rgba(0,0,0,1)',
    5, 'rgba(100,150,255,1)'
  ]
}

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

Туман (Fog)

Туман — это глобальный эффект, влияющий на восприятие дальности объектов и глубины сцены. Он применяется ко всем слоям, включая terrain и 3D модели.

map.setFog({
  color: 'rgba(186, 210, 235, 1)',
  'horizon-blend': 0.5,
  'range': [1, 10]
});

Основные параметры fog

color Определяет общий цвет атмосферы.

range Контролирует диапазон действия тумана:

  • ближняя граница — начало эффекта
  • дальняя граница — максимальная плотность
'range': [0.5, 8]

horizon-blend Управляет плавностью перехода к горизонту:

'horizon-blend': 0.3

Меньшие значения делают переход резче, большие — более мягким.

Освещение сцены (Light)

Освещение влияет на 3D-слои, включая здания, terrain и custom meshes.

map.setLight({
  anchor: 'map',
  color: 'white',
  intensity: 0.8,
  position: [1.5, 90, 80]
});

Anchor

  • map — свет фиксирован относительно карты
  • viewport — свет фиксирован относительно камеры

Position

Параметр position задаёт направление света:

[position: azimuth, polar, magnitude]
  • азимут — направление по горизонту
  • полярный угол — высота источника
  • интенсивность — сила света

Intensity и color

  • intensity регулирует яркость сцены
  • color задаёт оттенок освещения

Комбинация этих параметров позволяет моделировать:

  • утренний холодный свет
  • тёплое вечернее освещение
  • нейтральный дневной свет

Взаимодействие с рельефом (Terrain)

Атмосферные эффекты тесно связаны с terrain, так как именно рельеф создаёт глубину сцены.

map.setTerrain({
  source: 'mapbox-dem',
  exaggeration: 1.5
});

При включённом terrain:

  • туман корректно перекрывает удалённые вершины
  • небо визуально «обрамляет» сцену
  • свет влияет на высоту и тени

Комплексная конфигурация сцены

Совмещение sky, fog и light создаёт полноценную атмосферную модель.

map.addLayer({
  id: 'sky',
  type: 'sky',
  paint: {
    'sky-type': 'atmosphere',
    'sky-atmosphere-sun': [0.0, 1.0],
    'sky-atmosphere-sun-intensity': 10,
    'sky-atmosphere-color': 'rgba(180, 200, 255, 1)'
  }
});

map.setFog({
  color: 'rgba(200, 220, 240, 1)',
  'horizon-blend': 0.4,
  'range': [1, 12]
});

map.setLight({
  anchor: 'viewport',
  intensity: 0.7,
  position: [1.2, 80, 60]
});

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

Атмосфера может изменяться во времени, имитируя суточный цикл.

Пример изменения положения солнца:

function updateSun(angle) {
  map.setPaintProperty('sky', 'sky-atmosphere-sun', [
    Math.cos(angle),
    Math.sin(angle)
  ]);
}

Постепенное изменение параметров позволяет имитировать:

  • рассвет
  • полдень
  • закат
  • ночное небо

Влияние масштаба и камеры

Параметры атмосферы часто зависят от:

  • zoom уровня
  • наклона камеры (pitch)
  • вращения (bearing)

При наклоне камеры sky начинает играть роль полноценного купола, а не просто фона.

map.easeTo({
  pitch: 60,
  bearing: 120,
  zoom: 12
});

Оптические эффекты и глубина

Система атмосферы влияет на восприятие глубины сцены:

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

Эти эффекты создают визуальную иерархию пространства без дополнительных слоёв.

Сочетание с 3D-объектами

При использовании extrusions и 3D моделей атмосфера усиливает читаемость сцены:

  • здания «встраиваются» в воздух
  • рельеф отделяется от неба
  • границы объектов становятся менее резкими на расстоянии

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

Атмосферные эффекты рассчитываются на GPU и зависят от:

  • сложности sky модели
  • включённого terrain
  • количества 3D слоёв

Режим gradient менее затратен, чем atmosphere, и используется в мобильных сценариях или при ограниченных ресурсах.

Поведение при отсутствии sky layer

Если слой sky не добавлен:

  • используется дефолтный фон
  • отсутствует физическая модель неба
  • туман и свет работают ограниченно визуально

Добавление sky layer является обязательным для полноценной сцены с атмосферой.

Оглавление