Sky слой

Sky-слой (sky) предназначен для отображения неба в трёхмерной сцене. Он используется совместно с наклонённой камерой и 3D-объектами, создавая реалистичный фон за пределами карты. В отличие от обычных слоёв, которые рисуются на поверхности карты, слой неба визуализируется вокруг всей сцены и формирует окружение, воспринимаемое как атмосфера.

Sky-слой особенно важен при работе с:

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

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

Добавление Sky-слоя

Sky-слой добавляется через метод addLayer() аналогично другим слоям.

Простейший пример:

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

После добавления MapLibre автоматически создаёт небесную сферу вокруг сцены.

Чаще всего слой добавляется после полной загрузки стиля:

map.on('load', () => {

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

});

Визуальный принцип работы

Sky-слой не является обычным прямоугольным изображением.

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

Такой подход обеспечивает:

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

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

Для настройки используются специальные свойства через блок paint.

Структура:

map.addLayer({
    id: 'sky',
    type: 'sky',
    paint: {
        // настройки
    }
});

Наиболее важные параметры:

Свойство	Назначение
`sky-type`	Тип визуализации неба
`sky-atmosphere-color`	Цвет атмосферы
`sky-atmosphere-halo-color`	Цвет ореола вокруг солнца
`sky-atmosphere-sun`	Положение солнца
`sky-atmosphere-sun-intensity`	Интенсивность освещения
`sky-gradient`	Цветовой градиент
`sky-gradient-center`	Центр градиента
`sky-gradient-radius`	Радиус градиента
`sky-opacity`	Прозрачность

Типы неба

Свойство sky-type определяет алгоритм отрисовки.

Поддерживаются два режима:

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

или

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

Gradient

Использует обычный цветовой градиент.

Преимущества:

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

Недостатки:

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

Atmosphere

Использует модель атмосферного рассеивания света.

Пример:

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

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

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

Для современных 3D-карт обычно используется именно этот режим.

Настройка атмосферного цвета

Основной цвет атмосферы задаётся через свойство:

paint: {
    'sky-type': 'atmosphere',
    'sky-atmosphere-color': '#87CEEB'
}

Пример полного слоя:

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

Значение может задаваться:

'#87CEEB'

или

'rgb(135,206,235)'

или

'rgba(135,206,235,1)'

Цвет ореола солнца

Для создания свечения используется параметр:

'sky-atmosphere-halo-color'

Пример:

paint: {
    'sky-type': 'atmosphere',
    'sky-atmosphere-halo-color': '#FFFFFF'
}

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

Положение солнца

Солнце задаётся через массив из двух чисел:

'sky-atmosphere-sun': [azimuth, polar]

где:

azimuth — направление по горизонту;
polar — высота солнца.

Пример:

paint: {
    'sky-type': 'atmosphere',
    'sky-atmosphere-sun': [0, 0]
}

Другой пример:

paint: {
    'sky-type': 'atmosphere',
    'sky-atmosphere-sun': [180, 45]
}

Значения интерпретируются в градусах.

Интенсивность солнца

Яркость атмосферного освещения регулируется параметром:

'sky-atmosphere-sun-intensity'

Пример:

paint: {
    'sky-type': 'atmosphere',
    'sky-atmosphere-sun-intensity': 15
}

Меньшие значения создают мягкое освещение:

'sky-atmosphere-sun-intensity': 3

Большие значения делают атмосферу более контрастной:

'sky-atmosphere-sun-intensity': 30

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

Для режима gradient используется свойство:

'sky-gradient'

Пример:

paint: {
    'sky-type': 'gradient',
    'sky-gradient': [
        'interpolate',
        ['linear'],
        ['sky-radial-progress'],
        0,
        '#87CEEB',
        1,
        '#1E3A5F'
    ]
}

Здесь применяется выражение MapLibre Style Specification.

Переменная:

['sky-radial-progress']

возвращает относительное положение пикселя внутри небесной сферы.

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

Направление градиента можно изменить.

Пример:

paint: {
    'sky-type': 'gradient',
    'sky-gradient-center': [0, 0]
}

Изменение центра позволяет имитировать:

направление солнца;
закат;
рассвет;
локальное освещение.

Радиус градиента

Свойство:

'sky-gradient-radius'

контролирует область распространения цвета.

Пример:

paint: {
    'sky-type': 'gradient',
    'sky-gradient-radius': 90
}

Малый радиус:

'sky-gradient-radius': 30

создаёт концентрированное свечение.

Большой радиус:

'sky-gradient-radius': 180

даёт плавный переход по всему небосводу.

Прозрачность неба

Для управления видимостью используется свойство:

'sky-opacity'

Пример:

paint: {
    'sky-opacity': 0.7
}

Полностью непрозрачное небо:

'sky-opacity': 1

Полностью скрытое:

'sky-opacity': 0

Динамическое изменение параметров

Свойства можно менять после создания слоя.

Изменение цвета:

map.setPaintProperty(
    'sky',
    'sky-atmosphere-color',
    '#FFB347'
);

Изменение интенсивности солнца:

map.setPaintProperty(
    'sky',
    'sky-atmosphere-sun-intensity',
    20
);

Изменение прозрачности:

map.setPaintProperty(
    'sky',
    'sky-opacity',
    0.5
);

Имитация времени суток

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

Утро

paint: {
    'sky-type': 'atmosphere',
    'sky-atmosphere-color': '#FFDAB9',
    'sky-atmosphere-sun': [90, 15],
    'sky-atmosphere-sun-intensity': 5
}

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

тёплые оттенки;
низкое солнце;
мягкое освещение.

Полдень

paint: {
    'sky-type': 'atmosphere',
    'sky-atmosphere-color': '#87CEEB',
    'sky-atmosphere-sun': [180, 80],
    'sky-atmosphere-sun-intensity': 20
}

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

яркое голубое небо;
высокая освещённость;
минимальные тени.

Закат

paint: {
    'sky-type': 'atmosphere',
    'sky-atmosphere-color': '#FF8C69',
    'sky-atmosphere-sun': [270, 10],
    'sky-atmosphere-sun-intensity': 7
}

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

красно-оранжевая атмосфера;
длинные тени;
выраженный горизонт.

Ночь

paint: {
    'sky-type': 'gradient',
    'sky-gradient': [
        'interpolate',
        ['linear'],
        ['sky-radial-progress'],
        0,
        '#0A0A23',
        1,
        '#000000'
    ]
}

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

отсутствие солнечного света;
тёмные оттенки;
высокий контраст сцены.

Использование вместе с 3D-зданиями

Наиболее эффектно Sky-слой выглядит при наличии экструдированных зданий.

Пример:

map.addLayer({
    id: 'buildings',
    source: 'composite',
    'source-layer': 'building',
    type: 'fill-extrusion',
    paint: {
        'fill-extrusion-height': ['get', 'height'],
        'fill-extrusion-color': '#cccccc'
    }
});

Затем добавляется небо:

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

После наклона камеры:

map.easeTo({
    pitch: 70
});

город начинает восприниматься как полноценная трёхмерная сцена.

Использование с цифровой моделью рельефа

Sky-слой особенно полезен при работе с Terrain.

Пример:

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

При отображении горных ландшафтов атмосферное небо значительно улучшает восприятие глубины пространства.

Особенно заметен эффект при:

больших высотах;
дальних перспективах;
сильном наклоне камеры;
полётах над рельефом.

Анимация солнца

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

Пример:

let angle = 0;

function animateSun() {

    angle += 0.5;

    map.setPaintProperty(
        'sky',
        'sky-atmosphere-sun',
        [angle, 30]
    );

    requestAnimationFrame(animateSun);
}

animateSun();

Такая техника используется для:

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

Ограничения Sky-слоя

Sky-слой не предназначен для отображения:

облаков;
звёзд;
луны;
погодных эффектов;
пользовательских изображений неба.

Для подобных задач обычно используются:

пользовательские WebGL-слои;
кастомные шейдеры;
внешние 3D-движки;
интеграция с Three.js.

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

Sky-слой относится к числу наиболее лёгких графических элементов MapLibre GL JS.

Причины высокой производительности:

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

Даже на сложных трёхмерных сценах влияние Sky-слоя на производительность обычно минимально по сравнению с рендерингом зданий, рельефа или пользовательских WebGL-объектов.

Практический пример атмосферного неба

map.on('load', () => {

    map.addLayer({
        id: 'sky',
        type: 'sky',
        paint: {
            'sky-type': 'atmosphere',
            'sky-atmosphere-color': '#87CEEB',
            'sky-atmosphere-halo-color': '#FFFFFF',
            'sky-atmosphere-sun': [180, 45],
            'sky-atmosphere-sun-intensity': 15,
            'sky-opacity': 1
        }
    });

});

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