Sky layer

Назначение слоя Sky

sky — специальный тип слоя в Mapbox GL JS, предназначенный для отображения неба в трехмерной сцене. Он работает в связке с параметром fog и 3D-рендерингом камеры, создавая визуальную среду, которая заменяет плоский фон карты реалистичным небесным куполом.

Sky layer не является обычным тайловым слоем. Он не привязан к геометрии на поверхности земли и не использует источники данных. Его задача — формирование визуального окружения сцены за счет процедурной графики.

Ключевые особенности:

  • рендерится на фоне всей сцены
  • не зависит от координат карты
  • поддерживает атмосферные эффекты
  • интегрируется с освещением солнца и луны
  • работает только в 3D-проекции

Добавление sky layer

Sky слой добавляется через метод addLayer у объекта карты:

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

Минимальная конфигурация включает:

  • id — уникальный идентификатор слоя
  • type: 'sky' — тип слоя
  • paint — параметры визуализации

Порядок добавления важен: sky слой должен быть добавлен до или после 3D-слоев в зависимости от требуемого порядка отрисовки, но чаще всего его размещают в нижней части визуального стека сцены.

Параметр sky-type

Основная настройка слоя — sky-type. Он определяет способ генерации небесного фона.

atmosphere

Режим физически приближенного неба:

'sky-type': 'atmosphere'

В этом режиме:

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

Используется для реалистичных 3D-сцен.

gradient

Более простой режим:

'sky-type': 'gradient'

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

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

Атмосферные параметры sky-atmosphere

При использовании sky-type: atmosphere доступны дополнительные настройки, управляющие физикой неба.

sky-atmosphere-sun

Определяет направление солнца в сцене:

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

Используется нормализованный вектор направления света. Он влияет на:

  • яркость неба
  • положение бликов
  • интенсивность рассеяния

sky-atmosphere-sun-intensity

Интенсивность солнечного света:

'sky-atmosphere-sun-intensity': 10

Высокие значения создают более контрастное небо, низкие — приглушенное освещение.

sky-atmosphere-halo-color

Цвет ореола вокруг солнца:

'sky-atmosphere-halo-color': '#ffffff'

Используется для усиления визуального эффекта засветки в области солнца.

sky-atmosphere-color

Основной цвет атмосферы:

'sky-atmosphere-color': '#88c6ff'

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

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

При использовании sky-type: gradient управление осуществляется через набор цветовых параметров.

sky-gradient

Основной градиент неба:

'sky-gradient': [
  'interpolate',
  ['linear'],
  ['sky-radial-progress'],
  0.0,
  '#87ceeb',
  1.0,
  '#1e3c72'
]

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

sky-gradient-center

Центр градиента:

'sky-gradient-center': [0, 0]

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

sky-gradient-radius

Радиус влияния градиента:

'sky-gradient-radius': 90

Управляет тем, насколько широко распространяется эффект перехода цветов.

Горизонт и переходы

sky-horizon-blend

Определяет плавность перехода между небом и землей:

'sky-horizon-blend': 0.5
  • 0 — резкая граница
  • 1 — максимально плавный переход

Этот параметр критичен для создания реалистичной сцены, особенно при наличии 3D-террейна.

Связь с освещением сцены

Sky layer тесно связан с освещением карты, особенно с источником света:

  • солнце влияет на тени зданий
  • небо отражается в отражающих поверхностях
  • цвет атмосферы влияет на общую тональность сцены

При изменении положения камеры эффекты sky layer динамически обновляются, создавая ощущение времени суток.

Использование с камерой

Sky слой реагирует на параметры камеры:

  • bearing — поворот карты влияет на ориентацию неба
  • pitch — наклон камеры усиливает ощущение глубины
  • zoom — влияет на визуальное соотношение земли и неба

При сильном наклоне (pitch > 60°) sky layer становится доминирующим элементом сцены, формируя полноценный небесный купол.

Пример комплексной конфигурации

map.addLayer({
  id: 'sky',
  type: 'sky',
  paint: {
    'sky-type': 'atmosphere',
    'sky-atmosphere-sun': [0.0, 1.0],
    'sky-atmosphere-sun-intensity': 15,
    'sky-atmosphere-color': '#b3d9ff',
    'sky-atmosphere-halo-color': '#ffffff',
    'sky-horizon-blend': 0.3
  }
});

Такая конфигурация формирует дневную сцену с ярко выраженным солнечным освещением и мягким горизонтом.

Стилизация ночного неба

Для ночных сцен используется уменьшение интенсивности солнца и изменение цветовой палитры:

'sky-atmosphere-sun-intensity': 0.5,
'sky-atmosphere-color': '#0b1a3a',
'sky-atmosphere-halo-color': '#1b2b5a'

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

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

Sky layer рендерится на уровне шейдеров GPU и практически не зависит от количества данных. Однако его использование влияет на общую нагрузку сцены косвенно:

  • увеличивает сложность пиксельных шейдеров
  • добавляет вычисления атмосферного рассеяния
  • требует синхронизации с lighting system

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

Интеграция с terrain и 3D зданиями

При включенном terrain sky layer выполняет роль визуального фона, скрывающего границу между геометрией и небом.

Он особенно важен при:

  • использовании terrain: true
  • отображении extruded buildings
  • наличии наклонной камеры

В таких конфигурациях sky layer становится ключевым элементом композиции сцены, формируя ощущение масштаба и глубины.

Оглавление