Silhouette подсветка

Silhouette-подсветка в CesiumJS реализуется как постобработка изображения сцены, при которой выбранные объекты получают контурное выделение поверх уже отрендеренной 3D-геометрии. Механизм основан на извлечении границ объектов в буфере глубины и формировании маски, которая затем используется для отрисовки цветного ореола вокруг модели.

Силуэт в CesiumJS не является свойством геометрии. Он формируется на этапе постобработки, когда сцена уже отрисована. Основная идея заключается в сравнении глубины и нормалей пикселей:

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

Такой подход позволяет выделять объекты независимо от их типа: 3D Tiles, primitives, entities или модели glTF.

PostProcessStage и SilhouetteStage

В CesiumJS постобработка реализуется через систему стадий:

  • Scene.postProcessStages — контейнер всех эффектов постобработки;
  • PostProcessStage — базовый слой обработки изображения;
  • специализированные стадии, включая силуэтные эффекты.

Силуэтная подсветка чаще всего реализуется через готовую конфигурацию:

  • создание стадии силуэта;
  • привязка к выбранным объектам сцены;
  • настройка цвета и ширины контура.

Пример логики создания стадии:

const silhouetteStage = Cesium.PostProcessStageLibrary.createSilhouetteStage();
scene.postProcessStages.add(silhouetteStage);

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

Привязка силуэта к объектам сцены

Силуэт не применяется глобально ко всей сцене — он работает выборочно. Объекты добавляются в список выделения:

  • Entity (через viewer.entities);
  • 3D Tiles features;
  • модели и primitives.

Механизм выделения основан на коллекциях типа ColorGeometryInstanceAttribute или внутренних feature ID.

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

  • пользователь выбирает объект;
  • объект добавляется в «highlight set»;
  • постпроцессинг формирует маску только для этих объектов.

Цвет и интенсивность контура

Основные параметры силуэта:

  • цвет (color) — определяет визуальный акцент;
  • толщина (length / width) — влияет на ширину ореола;
  • альфа-канал — регулирует прозрачность свечения;
  • режим смешивания — задаёт поведение наложения на фон.

Контур может быть:

  • монохромным (например, белый или жёлтый);
  • цветовым по типу объекта;
  • динамическим (меняющим цвет во времени).

Внутренняя работа буферов

Силуэтная подсветка использует несколько промежуточных буферов:

  1. Color buffer — исходное изображение сцены;
  2. Depth buffer — информация о глубине пикселей;
  3. Stencil buffer — маска выбранных объектов;
  4. Silhouette mask — расширенный контур.

Алгоритм обработки:

  • из depth buffer извлекаются границы объекта;
  • stencil buffer отмечает принадлежность пикселей;
  • применяется dilation (расширение области);
  • финальный слой накладывается поверх сцены.

Работа с 3D Tiles и feature selection

При работе с 3D Tiles силуэт применяется к отдельным feature-элементам тайла. Это важно, поскольку:

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

Принцип:

  • идентификация feature через Cesium3DTileFeature;
  • добавление в список подсветки;
  • обновление post-process stage.

Комбинирование с другими эффектами

Силуэтная подсветка часто используется совместно с другими постэффектами:

  • bloom (свечение);
  • ambient occlusion;
  • depth of field;
  • color grading.

Особенности комбинирования:

  • силуэт должен применяться после основных освещающих эффектов;
  • порядок стадий влияет на визуальный результат;
  • чрезмерное количество эффектов снижает производительность.

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

Силуэт — это GPU-операция, и её стоимость зависит от:

  • разрешения экрана;
  • количества выделенных объектов;
  • сложности сцены;
  • числа активных post-process stages.

Оптимизационные практики:

  • ограничение количества одновременно выделенных объектов;
  • использование упрощённых моделей для дальних объектов;
  • отключение силуэта при низком FPS;
  • применение batch selection для 3D Tiles.

Типовые режимы подсветки

Силуэт может работать в нескольких режимах:

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

Эти режимы реализуются через модификацию параметров постобработки и динамическое обновление stage.

Интеграция с пользовательским вводом

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

  • click / pick;
  • mouse move hover;
  • selection box;
  • spatial queries.

Алгоритм взаимодействия:

  • ray casting определяет объект под курсором;
  • объект добавляется в коллекцию подсветки;
  • post-process stage обновляется в следующем кадре;
  • предыдущая подсветка очищается или сохраняется.

Ограничения механизма

Силуэтная подсветка имеет архитектурные ограничения:

  • не учитывает внутреннюю структуру геометрии;
  • зависит от качества depth buffer;
  • может давать артефакты на пересекающихся поверхностях;
  • ограничена GPU-возможностями устройства.

Особенно заметны артефакты:

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

Особенности рендеринга в реальном времени

Силуэт формируется каждый кадр, что означает:

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

Изменение положения камеры автоматически перестраивает контуры, поскольку silhouette зависит от проекции и глубины сцены.

Использование в аналитических сценах

Силуэтная подсветка применяется в аналитических приложениях:

  • выделение зданий в городских моделях;
  • подсветка объектов инфраструктуры;
  • навигационные системы;
  • мониторинг 3D-данных.

Главная особенность — независимость от семантики объекта: любой элемент сцены может быть выделен одинаковым способом.

Взаимодействие с pick-проекцией

Pick-система CesiumJS работает совместно с силуэтом:

  • pick определяет объект;
  • силуэт визуализирует его состояние;
  • изменение состояния отражается в постобработке.

Таким образом, picking отвечает за логику выбора, а silhouette — за визуальное представление.

Архитектурная роль постобработки

Silhouette является частью общей архитектуры post-processing pipeline:

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

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

Оглавление