В CesiumJS туман (fog) является частью графического конвейера сцены и
управляется через объект scene.fog. Он отвечает за имитацию
атмосферного затухания объектов с увеличением расстояния до камеры,
создавая эффект глубины и естественного исчезновения удалённых
элементов.
Fog применяется ко всем визуализируемым примитивам сцены, включая тайлы террейна, 3D Tiles и геометрию. Основная цель — снижение визуальной перегруженности дальних объектов и улучшение восприятия масштаба глобальной сцены.
Доступ к настройкам осуществляется через:
const viewer = new Cesium.Viewer("cesiumContainer");
const fog = viewer.scene.fog;
Базовая настройка управления эффектом осуществляется через флаг
enabled.
viewer.scene.fog.enabled = true;
При отключении тумана сцена визуализируется без атмосферного затухания, и дальние объекты сохраняют полную контрастность независимо от расстояния.
viewer.scene.fog.enabled = false;
Флаг enabled часто используется в комбинации с
переключением режимов визуализации, например при отладке или сравнении
качества рендера.
Ключевым параметром является density, определяющий
интенсивность затухания.
viewer.scene.fog.density = 0.0002;
Чем выше значение плотности, тем быстрее объекты теряют видимость при удалении от камеры. Низкие значения создают мягкий атмосферный переход, характерный для глобальных карт и высокодетализированных сцен.
Поведение можно описать как экспоненциальное затухание: каждый дополнительный метр расстояния уменьшает видимую яркость объектов по нелинейной кривой.
Практическая интерпретация:
~0.00005) — почти незаметный
эффект~0.0002 – 0.0005) — стандартная глобальная
сцена>0.001) — выраженный «дымчатый» эффект с
быстрым исчезновением дальних объектовFog в CesiumJS играет не только декоративную роль, но и решает задачу визуальной иерархии:
Особенно заметно это при работе с 3D Tiles, где плотные городские модели могут перегружать дальний план без атмосферного затухания.
Внутренняя работа тумана связана с уровнем детализации тайлов через
параметр screenSpaceErrorFactor.
viewer.scene.fog.screenSpaceErrorFactor = 2.0;
Этот параметр влияет на то, как агрессивно Cesium будет упрощать геометрию при увеличении расстояния и как быстро fog начнёт маскировать низкодетализированные области.
Увеличение значения приводит к:
Fog тесно связан с положением камеры. При изменении высоты наблюдателя меняется и визуальная плотность эффекта.
При низкой высоте камеры:
При высокой орбите:
Это поведение особенно важно при переходе между режимами:
Параметр density может изменяться в зависимости от
масштаба сцены или высоты камеры.
const scene = viewer.scene;
viewer.camera.changed.addEventListener(() => {
const height = Cesium.Cartographic.fromCartesian(
viewer.camera.position
).height;
if (height < 1000) {
scene.fog.density = 0.0001;
} else if (height < 100000) {
scene.fog.density = 0.0002;
} else {
scene.fog.density = 0.0005;
}
});
Такой подход позволяет поддерживать визуальную консистентность между разными уровнями приближения, избегая резких переходов видимости объектов.
Fog в CesiumJS имеет несколько характерных особенностей, связанных с WebGL-рендерингом:
Также fog не заменяет атмосферное рассеяние
(SkyAtmosphere), а работает совместно с ним, формируя более
сложную модель визуальной среды.
Хотя основной параметр fog — это плотность, его визуальный результат тесно связан с цветом сцены и атмосферными эффектами. В CesiumJS туман обычно визуально сливается с цветом неба и горизонта, создавая непрерывный переход между землёй и атмосферой.
При изменении времени суток (если включены соответствующие эффекты освещения) восприятие fog также меняется:
Несмотря на то что fog в первую очередь визуальный эффект, он косвенно влияет на производительность:
При больших сценах с 3D Tiles корректно настроенный fog помогает добиться более стабильного ощущения плавности без перегрузки GPU.
В реальных конфигурациях CesiumJS fog часто настраивается по сценарию использования:
Глобальная карта
viewer.scene.fog.density = 0.0002;
viewer.scene.fog.enabled = true;
Архитектурная визуализация города
viewer.scene.fog.density = 0.0004;
viewer.scene.fog.screenSpaceErrorFactor = 1.5;
Отладочный режим
viewer.scene.fog.enabled = false;