Освещение 3D объектов

Освещение в MapLibre GL JS является частью стилевой спецификации карты и влияет на визуальное восприятие трёхмерных объектов, прежде всего слоёв типа fill-extrusion, а также компонентов, реагирующих на направление света. В отличие от традиционных 2D-карт, где визуализация ограничена плоской геометрией, здесь появляется возможность формировать глубину, объём и контраст за счёт управления параметрами источников света.

Система освещения описывается через объект light в стиле карты и поддерживает два основных типа источников: ambient и directional.

Структура световой модели в стиле карты

В спецификации стиля MapLibre GL JS освещение задаётся на верхнем уровне:

{
  "light": {
    "anchor": "viewport",
    "color": "#ffffff",
    "intensity": 0.5
  }
}

Дополнительно, при необходимости имитации направленного света:

{
  "light": {
    "anchor": "map",
    "color": "#ffffff",
    "intensity": 0.8,
    "position": [1.15, 210, 30]
  }
}

Ключевые параметры:

  • anchor — система координат источника света (map или viewport)
  • color — цвет освещения в формате HEX
  • intensity — интенсивность воздействия света
  • position — положение направленного источника света в сферических координатах

Типы освещения

Ambient-освещение

Ambient-свет представляет собой равномерное фоновое освещение, которое не имеет направления и воздействует одинаково на все поверхности. Его основная задача — предотвращение полной потери деталей в тенях.

Характерные особенности:

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

Пример конфигурации:

{
  "light": {
    "color": "#d0d0d0",
    "intensity": 0.3
  }
}

Directional-освещение

Directional-свет имитирует удалённый источник (например, солнце). Его ключевая особенность — параллельные лучи и выраженная зависимость освещённости от ориентации поверхностей.

Параметр position задаётся в виде массива:

"position": [azimuth, polar_angle, altitude]
  • азимут определяет направление по горизонту
  • полярный угол задаёт наклон
  • высота влияет на “высоту солнца” над горизонтом

Пример:

{
  "light": {
    "anchor": "map",
    "intensity": 0.9,
    "position": [1.2, 200, 45]
  }
}

Влияние освещения на 3D-экструзии

Наиболее заметное влияние освещения проявляется в слоях fill-extrusion, используемых для отображения зданий и других объёмных объектов.

map.addLayer({
  id: "buildings",
  type: "fill-extrusion",
  source: "composite",
  "source-layer": "building",
  paint: {
    "fill-extrusion-height": ["get", "height"],
    "fill-extrusion-base": ["get", "min_height"],
    "fill-extrusion-color": "#aaa",
    "fill-extrusion-opacity": 0.9
  }
});

Освещение влияет на:

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

При изменении угла направленного света одна и та же геометрия может визуально «поворачиваться» в пространстве за счёт перераспределения теней.

Координатные системы освещения

Anchor: map

При использовании:

"anchor": "map"

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

Это приводит к эффекту:

  • стабильных теней при вращении карты
  • реалистичного поведения солнца относительно местности

Anchor: viewport

При использовании:

"anchor": "viewport"

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

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

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

Динамическое управление освещением

MapLibre GL JS позволяет изменять параметры освещения в реальном времени через setLight.

map.setLight({
  anchor: "map",
  intensity: 0.7,
  position: [1.5, 180, 60]
});

Применения:

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

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

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

  • низкий угол → длинные тени (утро/вечер)
  • высокий угол → короткие тени (полдень)
  • отрицательные значения высоты → ночные сцены с мягким освещением

Типичный сценарий анимации:

  • постепенное изменение азимута от 0 до 360
  • плавное изменение полярного угла
  • корректировка интенсивности

Влияние интенсивности и цвета

Интенсивность

Параметр intensity регулирует силу освещения:

  • 0.0 — полное отсутствие направленного света
  • 1.0 — стандартный уровень

  • 1.0 — усиленный контраст и резкость

Чрезмерные значения приводят к:

  • потере детализации
  • пересвету поверхностей
  • визуальному «пережатию» сцены

Цвет освещения

Цвет влияет на общую атмосферу сцены:

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

Пример:

{
  "light": {
    "color": "#ffe0b2",
    "intensity": 0.6,
    "position": [1.3, 210, 50]
  }
}

Ограничения модели освещения

Система освещения MapLibre GL JS имеет ряд архитектурных ограничений:

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

Освещение применяется на этапе рендеринга как параметр шейдинга, а не как полноценная 3D-сцена с трассировкой лучей.

Совместимость с другими слоями

Освещение влияет не на все типы слоёв:

  • активно влияет: fill-extrusion
  • частично влияет: background, sky
  • не влияет: line, symbol, circle

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

Практика визуального контраста в городской геометрии

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

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

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

Синхронизация освещения с камерой

При динамическом наклоне и вращении камеры освещение может:

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

Комбинация параметров камеры (pitch, bearing) и light.anchor формирует итоговую визуальную модель сцены, где свет либо подчёркивает рельеф, либо стабилизирует композицию независимо от навигации.

Оглавление