Wall построение

Базовая концепция WallGraphics

Wall в CesiumJS представляет собой вертикальную поверхность, построенную по набору географических координат. Геометрически это ломаная линия, между точками которой формируются «стены», вытянутые по вертикали от заданной нижней до верхней высоты.

Основной способ создания — использование Entity с графикой wall:

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

const wallEntity = viewer.entities.add({
  wall: {
    positions: Cesium.Cartesian3.fromDegreesArray([
      30.5, 50.5,
      30.6, 50.5,
      30.6, 50.6,
      30.5, 50.6
    ]),
    minimumHeights: [0, 0, 0, 0],
    maximumHeights: [500, 500, 500, 500],
    material: Cesium.Color.BLUE.withAlpha(0.5)
  }
});

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

  • positions — последовательность координат
  • minimumHeights — нижняя граница стены
  • maximumHeights — верхняя граница
  • material — материал поверхности

Геометрическая модель стены

Wall строится как набор четырёхугольников между соседними точками:

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

Внутренне Cesium преобразует геодезические координаты в Cartesian3 и строит сегменты в мировом пространстве, учитывая форму эллипсоида Земли.

Работа с высотами

Единая высота

Если высота одинакова для всех точек:

wall: {
  positions: Cesium.Cartesian3.fromDegreesArray([...]),
  maximumHeights: 1000,
  minimumHeights: 0
}

Cesium автоматически применяет скаляр ко всем вершинам.

Индивидуальные высоты

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

maximumHeights: [100, 200, 300, 400]
minimumHeights: [0, 0, 0, 0]

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

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

Материалы стены

Wall поддерживает любые материалы Cesium Material System.

Цвет и прозрачность

material: Cesium.Color.RED.withAlpha(0.4)

Текстуры

material: new Cesium.ImageMaterialProperty({
  image: "texture.png",
  repeat: new Cesium.Cartesian2(2, 1)
})

Анимированные материалы

material: new Cesium.StripeMaterialProperty({
  evenColor: Cesium.Color.WHITE,
  oddColor: Cesium.Color.BLUE,
  repeat: 10,
  offset: 0,
  orientation: Cesium.StripeOrientation.VERTICAL
})

Анимация достигается через изменение offset во времени.

Wall с геодезической точностью

Cesium строит стены на эллипсоиде WGS84, поэтому:

  • расстояния между точками интерпретируются по поверхности Земли
  • сегментация зависит от granularity
  • возможны искажения при больших расстояниях без достаточной детализации
wall: {
  positions: Cesium.Cartesian3.fromDegreesArray([...]),
  granularity: Cesium.Math.RADIANS_PER_DEGREE
}

Меньшее значение granularity увеличивает точность, но снижает производительность.

Использование perPositionHeight

Флаг perPositionHeight изменяет способ интерпретации высот:

wall: {
  positions: Cesium.Cartesian3.fromDegreesArray([...]),
  perPositionHeight: true
}

Поведение:

  • false — высоты применяются как уровни над эллипсоидом
  • true — каждая точка использует собственную 3D координату

Этот режим критичен при интеграции с DEM-данными и 3D-рельефом.

WallGeometry и низкоуровневый API

Помимо Entity API существует WallGeometry:

const wallGeometry = new Cesium.WallGeometry({
  positions: Cesium.Cartesian3.fromDegreesArray([...]),
  maximumHeights: [100, 100, 100, 100],
  minimumHeights: [0, 0, 0, 0]
});

const geometryInstance = new Cesium.GeometryInstance({
  geometry: wallGeometry,
  attributes: {
    color: Cesium.ColorGeometryInstanceAttribute.fromColor(
      Cesium.Color.YELLOW
    )
  }
});

const primitive = new Cesium.Primitive({
  geometryInstances: geometryInstance,
  appearance: new Cesium.PerInstanceColorAppearance()
});

viewer.scene.primitives.add(primitive);

Использование Primitive даёт:

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

Динамические стены

Wall может зависеть от изменяемых данных через CallbackProperty:

wall: {
  positions: new Cesium.CallbackProperty(() => {
    return Cesium.Cartesian3.fromDegreesArray([
      30.5, 50.5,
      30.6, 50.5,
      30.6, 50.6,
      30.5, 50.6
    ]);
  }, false),
  maximumHeights: 500,
  minimumHeights: 0
}

Такой подход используется при:

  • обновлении зоны интереса в реальном времени
  • анимации геометрии
  • реактивных UI-сценариях

Стилизация и классификация

Wall поддерживает классификацию объектов сцены через classificationType:

wall: {
  positions: Cesium.Cartesian3.fromDegreesArray([...]),
  classificationType: Cesium.ClassificationType.BOTH
}

Варианты:

  • TERRAIN — только рельеф
  • CESIUM_3D_TILE — только 3D Tiles
  • BOTH — оба слоя

Это позволяет использовать стены как:

  • ограничители зон на рельефе
  • визуальные маски для 3D-объектов

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

Ключевые факторы производительности:

  • количество сегментов (число точек)
  • granularity
  • сложность материала
  • наличие динамических свойств

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

  • уменьшение количества вершин через simplification
  • использование Primitive вместо Entity при массовых стенах
  • отключение per-position heights без необходимости
  • использование статических массивов вместо CallbackProperty

Типовые сценарии применения

Ограждения и границы зон

Wall используется для визуального выделения:

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

Аналитика и моделирование

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

Интерактивные карты

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

Особенности рендеринга

Wall не является объёмным объектом. Это:

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

При больших масштабах возможны артефакты z-fighting, устраняемые:

  • увеличением granularity
  • смещением высот
  • использованием depthBias в appearance (Primitive API)

Комбинирование с другими примитивами

Wall часто используется вместе с:

  • PolygonGraphics — для заполнения площади
  • PolylineGraphics — для контуров
  • CorridorGraphics — для протяжённых коридоров
  • EllipseGraphics — для радиальных зон

Комбинация позволяет формировать:

  • сложные геозоны
  • многослойные визуализации
  • аналитические карты ограничений

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

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

Несмотря на это, Wall остаётся базовым инструментом для пространственной сегментации сцены в CesiumJS.

Оглавление