Billboard и точечные объекты

В CesiumJS отображение точечных объектов в сцене строится вокруг двух основных подходов: Billboard (растровые спрайты, всегда обращённые к камере) и Point Primitives (процедурные пиксельные точки, рендерящиеся на GPU). Оба механизма решают задачу визуализации дискретных географических сущностей, но различаются по производительности, гибкости и способу отрисовки.

Billboard представляет собой плоское изображение, закреплённое в 3D-пространстве и автоматически ориентированное к камере. Внутренне используется оптимизированная коллекция BillboardCollection, которая минимизирует количество draw call и позволяет эффективно отрисовывать тысячи объектов.

Основной способ работы через Entity API:

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

viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(37.6173, 55.7558),
    billboard: {
        image: "marker.png",
        width: 32,
        height: 32
    }
});

В этом случае система автоматически создаёт Billboard внутри BillboardCollection, управляемого сценой.

Геометрическая привязка

Billboard привязывается к позиции в мировых координатах Cartesian3. Чаще всего используется преобразование из географических координат:

Cesium.Cartesian3.fromDegrees(longitude, latitude, height)

Высота может быть нулевой, но при включённой модели рельефа или 3D Tiles Billboard корректно проецируется на поверхность.

Ориентация и смещение

Ключевое свойство Billboard — постоянное обращение к камере. Это исключает необходимость ручного пересчёта ориентации.

Дополнительные параметры позиционирования:

  • pixelOffset — смещение в пикселях относительно якорной точки
  • eyeOffset — смещение в координатах камеры
  • horizontalOrigin и verticalOrigin — управление точкой привязки спрайта
  • alignedAxis — фиксация оси ориентации

Пример тонкой настройки:

billboard: {
    image: "marker.png",
    pixelOffset: new Cesium.Cartesian2(0, -20),
    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    horizontalOrigin: Cesium.HorizontalOrigin.CENTER
}

Масштабирование в зависимости от расстояния

Для оптимизации восприятия сцены применяется динамическое изменение масштаба:

  • scaleByDistance — изменение размера при удалении
  • translucencyByDistance — изменение прозрачности
  • distanceDisplayCondition — полное скрытие за пределами диапазона
billboard: {
    image: "marker.png",
    scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 500000, 0.2)
}

Такой подход уменьшает визуальную перегрузку при масштабировании глобуса.

Работа с текстурами

Billboard использует изображения как текстуры. Для повышения производительности часто применяется атлас спрайтов — один большой image, содержащий множество иконок. Это снижает количество переключений текстур в GPU.

Entity Billboard vs BillboardCollection

Entity API предоставляет удобную абстракцию, но внутри создаёт объекты более высокого уровня. Низкоуровневый BillboardCollection используется для максимальной производительности при массовом рендеринге.

Пример низкоуровневого подхода:

const billboards = viewer.scene.primitives.add(
    new Cesium.BillboardCollection()
);

billboards.add({
    position: Cesium.Cartesian3.fromDegrees(10, 10),
    image: "marker.png"
});

Этот способ предпочтителен при тысячах объектов, поскольку уменьшает накладные расходы Entity-системы.

Point Primitives: процедурные точечные объекты

Point Primitive — это пиксельная точка, вычисляемая напрямую на GPU без использования текстур. Это делает их значительно легче по памяти и быстрее в массовом рендеринге.

Создание через Entity:

viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(30, 50),
    point: {
        pixelSize: 10,
        color: Cesium.Color.RED
    }
});

Низкоуровневый вариант:

const points = viewer.scene.primitives.add(
    new Cesium.PointPrimitiveCollection()
);

points.add({
    position: Cesium.Cartesian3.fromDegrees(30, 50),
    pixelSize: 8,
    color: Cesium.Color.YELLOW
});

Основные свойства Point Primitive

  • pixelSize — размер точки в пикселях экрана
  • color — цвет точки
  • outlineColor — цвет обводки
  • outlineWidth — толщина обводки
  • disableDepthTestDistance — игнорирование глубины на заданной дистанции

Пример визуально читаемой точки:

point: {
    pixelSize: 12,
    color: Cesium.Color.BLUE,
    outlineColor: Cesium.Color.WHITE,
    outlineWidth: 2
}

Поведение в пространстве

Point Primitive не использует текстуры, поэтому его визуализация остаётся стабильной при масштабировании камеры. В отличие от Billboard, точка не изменяет форму и не требует ориентации к камере.

Сравнение Billboard и Point Primitive в рендеринге

Billboard ориентирован на визуально сложные элементы: иконки, маркеры, изображения с семантикой. Point Primitive — на абстрактные геометрические точки, где важна производительность.

Billboard:

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

Point Primitive:

  • не использует текстуры
  • быстрее при больших объёмах
  • минималистичная визуализация
  • лучше масштабируется на десятки тысяч объектов

Глубина, перекрытия и взаимодействие с поверхностью

Оба типа объектов участвуют в глубинном тестировании сцены. При включённой 3D-глобальной модели возможны эффекты перекрытия рельефом. Для управления этим используется:

  • disableDepthTestDistance
  • настройка порядка отрисовки
  • работа с heightReference в Entity API
billboard: {
    image: "marker.png",
    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
}

Это позволяет «прижать» объект к поверхности, учитывая terrain и 3D Tiles.

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

При большом количестве точек критически важны:

  • минимизация Entity API при массовых данных
  • использование Primitive коллекций
  • атласизация текстур для Billboard
  • использование Point Primitive вместо сложных спрайтов

В сценах с десятками тысяч объектов Point Primitive обеспечивает более стабильный FPS, тогда как Billboard остаётся предпочтительным при необходимости визуальной идентификации объектов.

Применение в реальных сценах

Billboard чаще используется для:

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

Point Primitive применяется для:

  • тепловых карт
  • облаков точек
  • аналитических данных
  • GPS-треков и сенсорных данных

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

Оглавление