Sky

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

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

Базовое добавление слоя sky

Слой добавляется через map.addLayer после инициализации карты:

map.on('load', () => {
  map.addLayer({
    id: 'sky-layer',
    type: 'sky',
    paint: {
      'sky-type': 'atmosphere'
    }
  });
});

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

Типы неба: sky-type

atmosphere

Режим atmosphere создаёт физически-ориентированное небо с имитацией рассеивания света. Он зависит от положения солнца и камеры.

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

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

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

gradient

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

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

Используется в случаях:

  • стилизованные карты
  • минималистичные визуализации
  • отсутствие зависимости от солнечного освещения

Основные свойства слоя sky

sky-opacity

Контролирует прозрачность слоя неба.

paint: {
  'sky-opacity': 0.8
}

Используется для:

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

sky-gradient

Определяет градиент неба при использовании sky-type: gradient.

paint: {
  'sky-type': 'gradient',
  'sky-gradient': [
    'interpolate',
    ['linear'],
    ['sky-radial-progress'],
    0, 'rgba(0,0,0,1)',
    1, 'rgba(135,206,235,1)'
  ]
}

Часто используется вместе с выражением interpolate, что позволяет динамически изменять цвета.

sky-gradient-center

Задаёт центр градиента относительно экрана.

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

Применение:

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

sky-gradient-radius

Определяет радиус влияния градиента.

'sky-gradient-radius': 90

Чем больше значение, тем более размыт переход между цветами.

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

Слой sky тесно связан с параметрами камеры:

  • pitch (наклон)
  • bearing (поворот)
  • zoom (масштаб)

При использовании atmosphere изменение pitch особенно заметно: небо «движется» относительно горизонта.

map.setPitch(60);
map.setBearing(120);

В результате создаётся эффект наблюдения сцены под углом, где небо становится частью 3D-пространства.

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

Sky слой может использоваться совместно с освещением карты через light:

map.setLight({
  anchor: 'map',
  color: 'white',
  intensity: 0.5
});

При этом:

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

Использование выражений (expressions)

Sky слой поддерживает выражения Mapbox GL JS, включая динамические параметры.

Пример зависимости от zoom

'sky-opacity': [
  'interpolate',
  ['linear'],
  ['zoom'],
  5, 0,
  10, 1
]

Это позволяет:

  • скрывать небо на низких масштабах
  • включать атмосферу при приближении

Анимация неба

Анимация достигается через setPaintProperty или requestAnimationFrame.

Пример изменения прозрачности

let opacity = 0;

function animate() {
  opacity += 0.01;
  if (opacity > 1) opacity = 0;

  map.setPaintProperty('sky-layer', 'sky-opacity', opacity);
  requestAnimationFrame(animate);
}

animate();

Применение:

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

Сочетание sky с 3D-слоями

Sky особенно важен при использовании fill-extrusion и 3D-террейна.

Типичная структура сцены:

  • terrain (рельеф)
  • fill-extrusion (здания)
  • symbols (метки)
  • sky (фон)

Sky всегда рендерится позади, но визуально завершает сцену, особенно при наклоненной камере.

Практические сценарии применения

Архитектурные визуализации

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

Навигационные 3D-карты

  • улучшение восприятия глубины
  • визуальное разделение слоёв
  • ориентация в пространстве

Стилизованные карты

  • градиентное небо как дизайнерский элемент
  • минималистичные интерфейсы
  • брендинг картографических приложений

Частые ошибки при работе со sky

Отсутствие порядка слоёв

Sky должен добавляться первым среди визуальных слоёв фона:

map.addLayer(skyLayer); // до 3D-объектов

Конфликт с fog и terrain

При использовании terrain и fog необходимо учитывать согласованность:

  • sky задаёт фон
  • fog влияет на дальность видимости
  • terrain формирует рельеф

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

Слишком высокая непрозрачность

Полностью непрозрачный sky может:

  • скрыть атмосферные эффекты
  • ухудшить восприятие глубины
  • сделать сцену «плоской»

Оптимизация рендеринга

Sky слой относительно лёгкий, но при сложных сценах важно учитывать:

  • минимизацию частых обновлений setPaintProperty
  • избегание лишних анимаций
  • использование выражений вместо JavaScript-циклов

Поведение при разных режимах камеры

Режим камеры Поведение sky
Top-down почти не виден
Tilted (45°) выраженная перспектива
Horizon view максимальный эффект атмосферы

Архитектурная роль слоя sky

Sky выступает как финальный слой визуальной композиции:

  • задаёт контекст сцены
  • формирует ощущение масштаба
  • завершает 3D-рендеринг

Он не содержит геометрии карты, но влияет на восприятие всей сцены сильнее многих географических слоёв.

Оглавление