Stripe материал

Stripe material представляет собой процедурный материал в CesiumJS, создающий чередующиеся полосы (stripe pattern) на поверхностях сущностей и примитивов. Он относится к классу динамических материалов и широко используется для визуального выделения геометрии, создания эффектов разметки, визуального кодирования зон и направления.

В основе лежит генерация повторяющегося рисунка из двух цветов с управляемым смещением, ориентацией и частотой повторения. Материал работает как на уровне Entity API, так и в Primitive/MaterialAppearance контексте.

Архитектура Stripe Material

Stripe material реализуется через систему материалов CesiumJS и подключается как один из стандартных типов:

  • Cesium.StripeMaterialProperty — для Entity API
  • Cesium.Material.StripeType — для низкоуровневых материалов
  • интеграция через Material и Appearance в примитивах

Процедурная природа означает, что полосы не загружаются как текстура, а вычисляются шейдером на GPU.

Базовая конфигурация

Stripe material задаётся набором параметров, определяющих внешний вид полос и их поведение.

Основные свойства:

  • evenColor — цвет чётных полос
  • oddColor — цвет нечётных полос
  • repeat — количество повторений полос
  • offset — сдвиг рисунка
  • orientation — ориентация (горизонтальная или вертикальная)

Пример использования через Entity API:

const entity = viewer.entities.add({
  rectangle: {
    coordinates: Cesium.Rectangle.fromDegrees(-100.0, 30.0, -90.0, 40.0),
    material: new Cesium.StripeMaterialProperty({
      evenColor: Cesium.Color.WHITE.withAlpha(0.7),
      oddColor: Cesium.Color.BLUE.withAlpha(0.7),
      repeat: 8,
      offset: 0,
      orientation: Cesium.StripeOrientation.HORIZONTAL
    })
  }
});

StripeOrientation и направление полос

Параметр ориентации определяет, как полосы накладываются на поверхность:

  • Cesium.StripeOrientation.HORIZONTAL — полосы вдоль широты
  • Cesium.StripeOrientation.VERTICAL — полосы вдоль долготы

Ориентация влияет не только на визуальный результат, но и на восприятие геометрии: вертикальные полосы усиливают эффект «меридианной» структуры, горизонтальные — широтной.

Поведение параметра repeat

repeat управляет плотностью полос. Это числовой коэффициент, который определяет количество чередующихся сегментов на единицу UV-пространства.

При увеличении значения:

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

При уменьшении:

  • полосы становятся широкими
  • паттерн воспринимается как крупные зоны

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

Stripe material активно использует альфа-канал, что позволяет интегрировать его в сложные сцены.

Типичные приёмы:

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

Пример:

evenColor: Cesium.Color.RED.withAlpha(0.4),
oddColor: Cesium.Color.YELLOW.withAlpha(0.4)

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

Stripe material наиболее часто применяется к поверхностям:

  • PolygonGraphics
  • RectangleGraphics
  • EllipseGraphics

Пример полигона:

const polygon = viewer.entities.add({
  polygon: {
    hierarchy: Cesium.Cartesian3.fromDegreesArray([
      -100.0, 30.0,
      -90.0, 30.0,
      -90.0, 40.0,
      -100.0, 40.0
    ]),
    material: new Cesium.StripeMaterialProperty({
      evenColor: Cesium.Color.GREEN.withAlpha(0.5),
      oddColor: Cesium.Color.BLACK.withAlpha(0.5),
      repeat: 6
    })
  }
});

Полигональная геометрия получает UV-развёртку, на которую проецируется stripe-паттерн.

Применение в Polyline

Stripe material может использоваться для линий через PolylineGraphics, хотя чаще применяются другие материалы (например, dashed). Тем не менее stripe даёт интересный эффект сегментированной трассы.

polyline: {
  positions: Cesium.Cartesian3.fromDegreesArray([
    -120.0, 35.0,
    -110.0, 40.0
  ]),
  width: 6,
  material: new Cesium.StripeMaterialProperty({
    evenColor: Cesium.Color.WHITE,
    oddColor: Cesium.Color.RED,
    repeat: 20
  })
}

Динамическое обновление материала

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

const stripe = new Cesium.StripeMaterialProperty({
  evenColor: Cesium.Color.BLUE,
  oddColor: Cesium.Color.WHITE,
  repeat: 4
});

entity.rectangle.material = stripe;

// динамическое изменение
stripe.repeat = 12;
stripe.offset = 0.3;

Это позволяет использовать материал в анимациях и временных визуализациях.

Offset и анимация движения

Параметр offset смещает рисунок вдоль направления UV-развёртки. Это ключевой механизм для создания эффекта движения.

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

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

Пример анимации:

let offset = 0.0;

viewer.clock.onTick.addEventListener(() => {
  offset += 0.01;
  stripe.offset = offset;
});

Внутреннее устройство шейдера

Stripe material реализован как фрагментный шейдер, который:

  1. вычисляет UV координаты поверхности
  2. применяет масштабирование через repeat
  3. добавляет offset
  4. определяет индекс полосы через modulo-операции
  5. выбирает между evenColor и oddColor

Упрощённая логика:

stripeIndex = floor((uv + offset) * repeat)
isEven = mod(stripeIndex, 2) == 0
color = isEven ? evenColor : oddColor

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

Stripe material относится к дешёвым по вычислениям материалам, но имеет особенности:

  • не требует текстурных ресурсов
  • полностью GPU-based
  • масштабируется по сложности сцены

Ограничения:

  • зависит от качества UV-развёртки
  • возможны искажения на сложной геометрии
  • не подходит для точных картографических текстур

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

Stripe material может комбинироваться с другими эффектами через MaterialProperty цепочки или смешивание цветов:

  • прозрачность + stripe
  • градиенты + stripe (через кастомный shader)
  • glow-эффекты поверх stripe в post-processing

Пример комбинирования прозрачности:

evenColor: Cesium.Color.CYAN.withAlpha(0.2),
oddColor: Cesium.Color.TRANSPARENT

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

Stripe material используется в задачах визуального кодирования:

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

Поведение при масштабировании сцены

При изменении масштаба камеры:

  • полосы сохраняют экранную плотность в зависимости от UV
  • могут визуально «сжиматься» на больших высотах
  • при экстремальном зуме возникает aliasing

Для сглаживания часто используются:

  • уменьшение repeat
  • повышение alpha blending
  • комбинирование с fog и depth testing

Использование через низкоуровневый Material API

Cesium.Material._materialCache.addMaterial(Cesium.Material.StripeType, {
  fabric: {
    type: "Stripe",
    uniforms: {
      evenColor: Cesium.Color.WHITE,
      oddColor: Cesium.Color.BLUE,
      repeat: 10
    },
    components: {
      diffuse: "stripeColor.rgb",
      alpha: "stripeColor.a"
    }
  }
});

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

Особенности поведения на эллипсоидальной поверхности

На глобусе CesiumJS stripe pattern может:

  • искажаться ближе к полюсам
  • менять плотность из-за UV-проекции
  • демонстрировать меридиональные растяжения

Это связано с тем, что материал накладывается на сферическую модель через географические координаты.

Частые ошибки использования

  • слишком высокое значение repeat, приводящее к aliasing
  • одинаковые evenColor и oddColor, из-за чего полосы визуально исчезают
  • отсутствие alpha blending при наложении на сложные сцены
  • применение к геометрии без корректной UV-развёртки

Поведение в многослойных сценах

Stripe material корректно работает в сценах с несколькими слоями:

  • terrain
  • imagery layers
  • 3D Tiles
  • entity overlays

При этом порядок отрисовки определяется depth testing и translucency.

Итоговые свойства модели визуализации

Stripe material в CesiumJS представляет собой компактный процедурный механизм генерации повторяющихся полос, основанный на UV-преобразованиях и шейдерной логике. Он используется для визуального кодирования пространственных данных, поддерживает динамическое обновление и эффективно работает на GPU без текстурных ресурсов.

Оглавление