Управление сценой

Сцена (Scene) является центральным объектом визуализации в CesiumJS. Она отвечает за отображение глобуса, трехмерных объектов, примитивов, источников данных, освещения, камер и всех визуальных компонентов приложения.

При создании экземпляра Cesium.Viewer объект сцены создаётся автоматически и доступен через свойство:

const viewer = new Cesium.Viewer("cesiumContainer");

const scene = viewer.scene;

Практически все операции по настройке визуализации выполняются через объект Scene.

Архитектура сцены

Сцена объединяет несколько ключевых подсистем:

  • камеру (Camera);
  • глобус (Globe);
  • коллекции примитивов (PrimitiveCollection);
  • коллекции сущностей (EntityCollection);
  • систему освещения;
  • атмосферу;
  • небо и звезды;
  • систему постобработки;
  • механизм рендеринга.

Схематически взаимодействие выглядит следующим образом:

Scene
 ├── Camera
 ├── Globe
 ├── Primitives
 ├── Imagery Layers
 ├── Terrain
 ├── PostProcessStages
 ├── SkyBox
 └── Lighting

Каждый кадр Cesium обновляет состояние этих компонентов и формирует итоговое изображение.

Получение доступа к сцене

Во многих случаях требуется непосредственное управление сценой.

const scene = viewer.scene;

После этого становятся доступны настройки визуализации:

scene.fog.enabled = false;
scene.globe.enableLighting = true;
scene.skyAtmosphere.show = true;

Режимы отображения сцены

Cesium поддерживает несколько режимов отображения Земли.

Трехмерный режим

Стандартный режим визуализации.

viewer.scene.mode === Cesium.SceneMode.SCENE3D;

Переключение:

viewer.scene.morphTo3D(2);

Параметр указывает длительность анимации в секундах.

Двумерный режим

Представляет поверхность как плоскую карту.

viewer.scene.morphTo2D(2);

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

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

Columbus View

Промежуточный режим между 2D и 3D.

viewer.scene.morphToColumbusView(2);

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

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

Управление фоновым цветом

Если часть сцены не заполнена объектами или изображениями, отображается цвет фона.

По умолчанию используется черный цвет.

Изменение:

viewer.scene.backgroundColor = Cesium.Color.DARKBLUE;

Создание собственного цвета:

viewer.scene.backgroundColor =
    new Cesium.Color(0.1, 0.2, 0.3, 1.0);

Компоненты задаются в диапазоне от 0 до 1:

R, G, B, Alpha

Управление глобусом

Глобус является частью сцены.

Получение объекта:

const globe = viewer.scene.globe;

Включение и отключение глобуса

Иногда требуется отображать только объекты без Земли.

viewer.scene.globe.show = false;

Возврат:

viewer.scene.globe.show = true;

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

Настройка прозрачности глобуса

viewer.scene.globe.translucency.enabled = true;

viewer.scene.globe.translucency.frontFaceAlpha = 0.5;

Результат:

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

Управление атмосферой

Cesium имитирует атмосферное рассеяние света.

Получение объекта атмосферы:

const atmosphere = viewer.scene.skyAtmosphere;

Отображение атмосферы

viewer.scene.skyAtmosphere.show = true;

Отключение:

viewer.scene.skyAtmosphere.show = false;

Настройка яркости атмосферы

viewer.scene.skyAtmosphere.brightnessShift = 0.2;

Уменьшение яркости:

viewer.scene.skyAtmosphere.brightnessShift = -0.3;

Параметр влияет на общее восприятие освещённости планеты.

Управление туманом

Туман используется для повышения реалистичности и оптимизации производительности.

Получение объекта:

const fog = viewer.scene.fog;

Включение тумана

fog.enabled = true;

Отключение:

fog.enabled = false;

Настройка плотности

fog.density = 0.00015;

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

Максимальная высота действия

fog.maxHeight = 800000;

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

Освещение сцены

Освещение играет важную роль при работе с рельефом и 3D-моделями.

Освещение глобуса Солнцем

viewer.scene.globe.enableLighting = true;

После включения становятся заметны:

  • смена дня и ночи;
  • движение терминатора;
  • затенение рельефа.

Освещение моделей

viewer.scene.globe.enableLighting = true;

Для корректного отображения необходимо также настроить время симуляции.

Управление тенями

Тени повышают реализм визуализации.

Включение:

viewer.shadows = true;

Проверка:

console.log(viewer.shadows);

Настройка режима теней

Для объектов:

entity.model.shadows = Cesium.ShadowMode.ENABLED;

Доступные варианты:

Cesium.ShadowMode.DISABLED
Cesium.ShadowMode.ENABLED
Cesium.ShadowMode.CAST_ONLY
Cesium.ShadowMode.RECEIVE_ONLY

Небо и звёзды

Cesium содержит встроенную визуализацию космоса.

Отображение звезд

viewer.scene.skyBox.show = true;

Скрытие:

viewer.scene.skyBox.show = false;

Пользовательский SkyBox

viewer.scene.skyBox = new Cesium.SkyBox({
    sources: {
        positiveX: "px.jpg",
        negativeX: "nx.jpg",
        positiveY: "py.jpg",
        negativeY: "ny.jpg",
        positiveZ: "pz.jpg",
        negativeZ: "nz.jpg"
    }
});

SkyBox представляет собой кубическую текстуру, окружающую сцену.

Постобработка сцены

Cesium предоставляет набор эффектов постобработки.

Получение коллекции:

const stages = viewer.scene.postProcessStages;

Эффект размытия

const blur = Cesium.PostProcessStageLibrary.createBlurStage();

viewer.scene.postProcessStages.add(blur);

Черно-белый режим

const bw = Cesium.PostProcessStageLibrary.createBlackAndWhiteStage();

viewer.scene.postProcessStages.add(bw);

Эффект ночного видения

const nightVision =
    Cesium.PostProcessStageLibrary.createNightVisionStage();

viewer.scene.postProcessStages.add(nightVision);

Удаление эффекта

viewer.scene.postProcessStages.remove(nightVision);

Рендеринг по запросу

По умолчанию Cesium постоянно перерисовывает сцену.

Для экономии ресурсов можно перейти к режиму рендеринга по требованию.

viewer.scene.requestRenderMode = true;

Дополнительно:

viewer.scene.maximumRenderTimeChange = Infinity;

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

Принудительная перерисовка

viewer.scene.requestRender();

Полезно после изменения данных:

entity.position = newPosition;

viewer.scene.requestRender();

События сцены

Cesium предоставляет события жизненного цикла рендеринга.

Событие перед рендерингом

viewer.scene.preRender.addEventListener(
    function(scene, time) {
        console.log("Перед рендерингом");
    }
);

Вызывается непосредственно перед построением кадра.

Событие после рендеринга

viewer.scene.postRender.addEventListener(
    function(scene, time) {
        console.log("После рендеринга");
    }
);

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

  • сбора статистики;
  • синхронизации интерфейса;
  • пользовательской анимации.

Настройка качества рендеринга

Коэффициент масштабирования разрешения

viewer.resolutionScale = 1.5;

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

Для слабых устройств:

viewer.resolutionScale = 0.75;

Сглаживание

Проверка поддержки:

console.log(
    viewer.scene.postProcessStages.fxaa.enabled
);

Включение:

viewer.scene.postProcessStages.fxaa.enabled = true;

Отключение:

viewer.scene.postProcessStages.fxaa.enabled = false;

Отображение кадровой статистики

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

viewer.scene.debugShowFramesPerSecond = true;

На экране появятся:

  • FPS;
  • время кадра;
  • статистика рендеринга.

Отключение:

viewer.scene.debugShowFramesPerSecond = false;

Отладочные возможности сцены

Cesium содержит набор диагностических инструментов.

Отображение границ тайлов

viewer.scene.globe.showTileCoordinates = true;

Используется при анализе загрузки тайлов.

Каркасный режим

Для terrain:

viewer.scene.globe._surface.tileProvider.wireframe = true;

Режим позволяет увидеть структуру сетки рельефа.

Отображение команд рендеринга

viewer.scene.debugShowCommands = true;

Каждая команда будет отображаться отдельным цветом.

Отображение объёма фрустума

viewer.scene.debugShowFrustums = true;

Полезно при анализе работы камеры.

Управление глубиной сцены

Буфер глубины используется для корректного перекрытия объектов.

Проверка глубины относительно рельефа

viewer.scene.globe.depthTestAgainstTerrain = true;

После включения объекты скрываются за горами и возвышенностями.

Пример:

viewer.scene.globe.depthTestAgainstTerrain = false;

В этом случае маркеры всегда остаются видимыми.

Настройка прозрачности объектов

Сцена корректно поддерживает альфа-композицию.

Полупрозрачный примитив:

const color = Cesium.Color.RED.withAlpha(0.5);

Для сущности:

entity.polygon.material =
    Cesium.Color.BLUE.withAlpha(0.3);

Порядок рендеринга прозрачных объектов автоматически рассчитывается движком.

Работа с примитивами сцены

Коллекция примитивов располагается непосредственно внутри сцены.

Получение:

const primitives = viewer.scene.primitives;

Добавление:

primitives.add(myPrimitive);

Удаление:

primitives.remove(myPrimitive);

Очистка:

primitives.removeAll();

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

Уничтожение сцены и освобождение ресурсов

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

Проверка:

if (!viewer.isDestroyed()) {
    viewer.destroy();
}

После уничтожения:

  • освобождаются текстуры;
  • удаляются буферы;
  • закрываются WebGL-ресурсы;
  • прекращается рендеринг.

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

Оглавление