Ambient освещение

Освещение играет ключевую роль в визуализации трёхмерных сцен. Даже при наличии качественных данных и правильно настроенной камеры сцена может выглядеть плоской, слишком тёмной или лишённой глубины. В Deck.gl базовым механизмом равномерного освещения выступает AmbientLight — источник окружающего света, который воздействует на все объекты сцены одинаково независимо от их положения, ориентации и расстояния до камеры.

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

Без AmbientLight части объектов, не освещённые направленными или точечными источниками света, могут становиться полностью чёрными. Добавление окружающего освещения позволяет сохранить читаемость сцены и улучшить восприятие формы объектов.

Принцип работы AmbientLight

В отличие от других источников света, AmbientLight:

не имеет координат;
не имеет направления;
воздействует на все объекты одинаково;
не создаёт теней;
не формирует блики;
не зависит от нормалей поверхности.

Математически такой свет представляет собой постоянную добавку к итоговому цвету фрагмента.

Упрощённо итоговое освещение можно представить следующим образом:

[ FinalColor = Ambient + Diffuse + Specular]

где:

Ambient — окружающий свет;
Diffuse — рассеянное освещение от направленных источников;
Specular — зеркальные отражения.

Если используется только AmbientLight, все стороны объекта будут иметь одинаковую яркость.

Класс AmbientLight

Для создания окружающего освещения используется класс AmbientLight.

Импорт:

import {AmbientLight} from '@deck.gl/core';

Создание объекта освещения:

const ambientLight = new AmbientLight({
  color: [255, 255, 255],
  intensity: 1.0
});

Параметры конструктора определяют характеристики источника света.

Параметр color

Свойство color задаёт цвет окружающего освещения.

Пример белого света:

color: [255, 255, 255]

Тёплый оттенок:

color: [255, 244, 214]

Холодный оттенок:

color: [200, 220, 255]

Красноватая подсветка:

color: [255, 180, 180]

Цвет применяется ко всей сцене и влияет на итоговую цветовую гамму визуализации.

Пример:

const ambientLight = new AmbientLight({
  color: [255, 220, 180],
  intensity: 0.8
});

Такой свет создаёт эффект закатного освещения.

Параметр intensity

Свойство intensity определяет силу окружающего света.

Пример:

const ambientLight = new AmbientLight({
  intensity: 1.0
});

Типичные значения:

Значение	Эффект
0	Свет отсутствует
0.2	Очень слабое освещение
0.5	Мягкая подсветка
1.0	Стандартное освещение
2.0	Яркое освещение
5.0+	Сильная засветка сцены

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

Большие значения делают сцену равномерно освещённой и уменьшают влияние теней.

Использование вместе с LightingEffect

Сам по себе объект AmbientLight не влияет на визуализацию. Источник необходимо подключить через систему эффектов.

Создание эффекта:

import {
  AmbientLight,
  LightingEffect
} from '@deck.gl/core';

const ambientLight = new AmbientLight({
  intensity: 1.0
});

const lightingEffect = new LightingEffect({
  ambientLight
});

Передача эффекта в Deck:

const deck = new Deck({
  views: [...],
  layers: [...],
  effects: [lightingEffect]
});

После подключения все поддерживающие освещение слои начнут учитывать окружающий свет.

Минимальный пример

Полная настройка:

import {
  Deck,
  AmbientLight,
  LightingEffect
} from '@deck.gl/core';

const ambientLight = new AmbientLight({
  color: [255, 255, 255],
  intensity: 1.0
});

const lightingEffect = new LightingEffect({
  ambientLight
});

new Deck({
  parent: document.body,
  effects: [lightingEffect],
  layers: []
});

В данном примере создаётся белое окружающее освещение средней интенсивности.

Влияние на 3D-объекты

AmbientLight особенно заметен на объёмных слоях:

ColumnLayer;
SolidPolygonLayer;
ScenegraphLayer;
SimpleMeshLayer;
Tile3DLayer.

Пример с ColumnLayer:

new ColumnLayer({
  id: 'columns',
  data,
  diskResolution: 20,
  extruded: true,
  getPosition: d => d.position,
  getElevation: d => d.height
});

Если интенсивность окружающего света слишком мала:

intensity: 0.1

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

Если увеличить значение:

intensity: 2.0

разница между освещёнными и затенёнными поверхностями станет менее выраженной.

AmbientLight и DirectionalLight

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

Пример:

import {
  AmbientLight,
  DirectionalLight,
  LightingEffect
} from '@deck.gl/core';

Создание источников:

const ambientLight = new AmbientLight({
  intensity: 0.8
});

const directionalLight = new DirectionalLight({
  color: [255, 255, 255],
  intensity: 2.0,
  direction: [-1, -3, -1]
});

Объединение:

const lightingEffect = new LightingEffect({
  ambientLight,
  directionalLight
});

Результат:

DirectionalLight создаёт объём;
AmbientLight смягчает контраст;
сцена выглядит естественнее.

Создание дневного освещения

Типичная схема дневного освещения:

const ambientLight = new AmbientLight({
  color: [255, 255, 255],
  intensity: 1.0
});

const sunLight = new DirectionalLight({
  color: [255, 255, 240],
  intensity: 3.0,
  direction: [-2, -3, -1]
});

Такое сочетание напоминает солнечный свет с естественным рассеянным освещением атмосферы.

Создание ночной сцены

Для ночных карт обычно используется слабое окружающее освещение.

const ambientLight = new AmbientLight({
  color: [100, 120, 180],
  intensity: 0.2
});

Дополнительно можно использовать точечные источники света.

В результате:

сцена остаётся читаемой;
сохраняется ощущение темноты;
объекты не исчезают полностью.

Использование цветного AmbientLight

Окружающий свет способен менять атмосферу сцены.

Тёплая сцена:

const ambientLight = new AmbientLight({
  color: [255, 220, 170],
  intensity: 1.2
});

Холодная сцена:

const ambientLight = new AmbientLight({
  color: [180, 210, 255],
  intensity: 1.0
});

Фантастическое освещение:

const ambientLight = new AmbientLight({
  color: [180, 100, 255],
  intensity: 1.5
});

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

Баланс интенсивности

При работе с несколькими источниками света важно соблюдать баланс.

Слишком слабый AmbientLight:

intensity: 0.05

может привести к чрезмерно тёмным областям.

Слишком сильный:

intensity: 5.0

способен практически полностью скрыть эффект направленного освещения.

Обычно используются значения:

0.3 – 1.5

для большинства картографических сцен.

Влияние на производительность

AmbientLight относится к наиболее дешёвым типам освещения.

Причины:

отсутствуют расчёты теней;
отсутствуют координаты источника;
отсутствуют проверки расстояний;
не требуется вычисление направлений света.

Поэтому использование одного или нескольких объектов AmbientLight практически не влияет на производительность визуализации.

Даже при отображении миллионов объектов стоимость вычислений остаётся минимальной по сравнению с тенями, источниками направленного света и сложными шейдерными эффектами.

Комбинирование нескольких AmbientLight

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

Пример:

const warmAmbient = new AmbientLight({
  color: [255, 230, 200],
  intensity: 0.5
});

const coolAmbient = new AmbientLight({
  color: [180, 220, 255],
  intensity: 0.3
});

Однако подобный подход применяется редко.

Чаще используется один AmbientLight с нужным цветом и интенсивностью, поскольку несколько окружающих источников могут усложнить контроль над итоговой цветовой палитрой сцены.

Практические рекомендации

Городские 3D-карты

intensity: 0.8

Обеспечивает хорошую читаемость зданий и инфраструктуры.

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

intensity: 0.5

Позволяет подчеркнуть форму объектов направленным светом.

Научная визуализация

intensity: 1.2

Снижает риск потери деталей в затемнённых участках.

Ночные карты

intensity: 0.1

или

intensity: 0.3

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

Типичные ошибки

Отсутствие AmbientLight

Ошибка:

const directionalLight = new DirectionalLight(...);

без окружающего света.

Результат:

чрезмерно тёмные области;
потеря деталей;
резкий контраст.

Чрезмерная интенсивность

Ошибка:

const ambientLight = new AmbientLight({
  intensity: 10
});

Результат:

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

Неподходящий цвет

Ошибка:

color: [255, 0, 0]

без художественной необходимости.

Результат:

неестественный оттенок всей сцены;
искажение цветов объектов.

Игнорирование взаимодействия с другими источниками

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