Визуальные атрибуты

Работа с визуальными атрибутами в CesiumJS строится вокруг системы свойств (properties), материалов (materials) и стилей отображения, которые определяют внешний вид геометрии, сущностей и 3D-тайлов. Визуальные атрибуты охватывают весь спектр графического представления: цвет, прозрачность, текстуры, линии, заливки, высотные привязки, условия видимости и динамическое изменение внешнего вида во времени.

Базовая модель визуального представления

В CesiumJS визуальные атрибуты разделяются на три основных уровня:

1. Entity API (высокоуровневый слой) Работа через Entity и его свойства:

color
material
outline
heightReference
billboard, label, point
polyline, polygon, ellipse, rectangle

2. Primitive API (низкоуровневый слой) Используется для максимальной производительности:

Appearance (MaterialAppearance, PolylineMaterialAppearance)
GeometryInstance.attributes
PerInstanceColor
Material

3. Cesium3DTiles styling (стилизация тайлов)

CSS-подобные выражения
фильтрация по свойствам
условные цвета и скрытие объектов

Цвет как основной визуальный атрибут

Цвет в CesiumJS представлен объектом Cesium.Color и используется во всех слоях визуализации.

Основные способы задания цвета:

фиксированный цвет
RGBA-компоненты
HEX-эквиваленты (через утилиты)
динамический цвет через CallbackProperty

Пример логики применения:

геометрия может иметь базовый цвет
цвет может изменяться во времени
цвет может зависеть от свойств объекта

Прозрачность и альфа-канал

Прозрачность управляется через:

alpha у Cesium.Color
material.translucent
appearance.translucent

Ключевая особенность: в CesiumJS прозрачность влияет на порядок отрисовки и может требовать сортировки объектов

Материалы (Materials) как основа визуальных атрибутов

Материалы определяют поверхность геометрии и её визуальное поведение.

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

ColorMaterialProperty
ImageMaterialProperty
CheckerboardMaterialProperty
StripeMaterialProperty
GridMaterialProperty
PolylineDashMaterialProperty
PolylineArrowMaterialProperty

Материалы могут:

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

Цветовые материалы и динамическая заливка

ColorMaterialProperty используется для базовой заливки геометрий.

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

поддерживает динамическое обновление цвета
работает с прозрачностью
может комбинироваться с outline

Векторные объекты (полигоны, эллипсы, прямоугольники) часто используют именно цветовые материалы как базовый слой визуализации.

Текстурные материалы

ImageMaterialProperty

Используется для наложения изображений на поверхности:

полигоны (карты регионов)
поверхности земли (декали)
декоративные объекты

Поддерживаемые параметры:

повторение текстуры (repeat)
прозрачность
цветовое умножение

StripeMaterialProperty

Полосатые визуальные эффекты:

чередующиеся цвета
направление полос
масштабирование

Применение:

выделение зон
визуализация маршрутов
технические карты

CheckerboardMaterialProperty

Шахматные узоры:

контрольные области
debug-режимы
визуальное разделение регионов

Линии и полилинии

Polyline в CesiumJS имеет отдельную систему визуальных атрибутов, отличную от полигонов.

Основные параметры:

width
material
clampToGround
depthFailMaterial
arcType

Материалы полилиний:

PolylineGlowMaterialProperty
PolylineOutlineMaterialProperty
PolylineDashMaterialProperty
PolylineArrowMaterialProperty

Особенности визуализации линий:

ширина в пикселях (не в метрах)
влияние камеры на толщину
возможная деградация при дальнем расстоянии

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

Визуальные атрибуты тесно связаны с геометрической привязкой:

HeightReference

NONE — абсолютная высота
CLAMP_TO_GROUND — привязка к земле
RELATIVE_TO_GROUND — относительная высота

Влияние на визуализацию:

изменение перспективы
перекрытие объектов
взаимодействие с terrain

Outline и контурирование объектов

Контуры используются для:

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

Параметры:

outlineColor
outlineWidth
outline (boolean)

Контуры особенно важны при работе с:

полигонами
зданиями
классифицированными объектами

Billboard, Label и Point как визуальные атрибуты

Billboard

2D-иконки в 3D пространстве:

image
scale
rotation
alignedAxis

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

маркеров
POI
динамических объектов

Label

Текстовые визуальные атрибуты:

font
fillColor
outlineColor
pixelOffset
scale

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

текст всегда ориентирован к камере

Point

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

размер в пикселях
цвет
outline

Применяются для:

облаков точек
GPS-треков
упрощённой визуализации

Динамические визуальные атрибуты

CesiumJS поддерживает реактивные свойства:

CallbackProperty

Позволяет:

менять цвет во времени
изменять геометрию
анимировать прозрачность

TimeIntervalCollectionProperty

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

временных слоёв
исторических данных
сценарной визуализации

Условная видимость и дистанционные атрибуты

DistanceDisplayCondition

Определяет диапазон видимости:

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

Применяется к:

labels
billboards
polygons

Primitive Appearance и низкоуровневые атрибуты

В Primitive API визуальные атрибуты управляются через Appearance.

MaterialAppearance

поддержка материалов
освещение
прозрачность

PerInstanceColorAppearance

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

GeometryInstance.attributes

цвет
положение
нормали
дополнительные данные

Стилизация 3D Tiles

3D Tiles используют отдельный механизм визуальных атрибутов.

Features styling:

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

Пример логики:

скрыть объекты по высоте
изменить цвет по типу здания
выделить группы объектов

Поддерживаемые эффекты:

цветовая классификация
прозрачность
скрытие
динамическое выделение

Комбинирование визуальных атрибутов

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

материал + цвет
текстура + прозрачность
outline + заливка
distance condition + label

Особенность системы:

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

Оптимизация визуальных атрибутов

Ключевые принципы:

минимизация прозрачных объектов
использование batch-рендеринга
предпочтение Primitive API для больших наборов данных
снижение количества уникальных материалов
использование 3D Tiles вместо отдельных геометрий

Влияние камеры на визуальные атрибуты

Камера напрямую влияет на:

уровень детализации
толщину линий
видимость label/billboard
переключение LOD в 3D Tiles

Визуальная система адаптивна:

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

Цветовые пространства и освещение

CesiumJS использует физически корректную модель освещения:

дневное освещение
атмосферные эффекты
затенение terrain

Визуальные атрибуты могут:

реагировать на light intensity
сохранять независимость от освещения (unlit materials)
комбинироваться с fog и atmosphere

Сложные комбинации материалов

Примеры комбинированных подходов:

ImageMaterial + Color tint + Transparency
PolylineGlow + DistanceDisplayCondition
3D Tiles styling + dynamic color mapping
Label + Billboard + conditional visibility

Такие комбинации позволяют строить:

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

Итоговая архитектура визуальных атрибутов

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

геометрия задаёт форму
материал определяет поверхность
свойства управляют динамикой
appearance регулирует рендеринг
3D Tiles добавляют семантическую стилизацию

Эта архитектура обеспечивает гибкость при создании как простых картографических приложений, так и сложных 3D-аналитических систем.