Dot материал

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

Dot материал используется для создания визуальных эффектов, где требуется дискретная структура вместо непрерывной заливки или сплошной линии. Он особенно востребован при стилизации маршрутов, трасс, границ зон и аналитических визуализаций, где важна читаемость и различимость направления при масштабировании.

Принцип работы Dot материала

Dot материал формирует повторяющийся шаблон, состоящий из двух компонентов:

  • точки (dot) — видимые сегменты материала
  • промежутки (gap) — прозрачные или фоновые участки

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

Такая модель позволяет:

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

Архитектура материала

Dot материал в Cesium реализован через систему Material и MaterialProperty.

Он поддерживает два основных способа использования:

  • Material (низкоуровневый) — применяется напрямую к примитивам
  • MaterialProperty (высокоуровневый) — используется в Entity API

Внутренне материал описывается GLSL-шаблоном, который интерпретирует UV-координаты поверхности и раскладывает их на повторяющиеся сегменты.

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

Dot материал в CesiumJS обычно включает следующие uniforms:

  • color — цвет точек
  • gapColor — цвет промежутков между точками
  • repeat — коэффициент повторения узора (обычно Cartesian2)
  • patternScale — масштаб плотности точек (в зависимости от реализации)

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

Базовое применение через Material

Dot материал может быть применён к примитивам через Appearance:

const material = new Cesium.Material({
    fabric: {
        type: 'Dot',
        uniforms: {
            color: Cesium.Color.YELLOW,
            gapColor: Cesium.Color.TRANSPARENT,
            repeat: new Cesium.Cartesian2(20.0, 10.0)
        }
    }
});

const appearance = new Cesium.PolylineMaterialAppearance({
    material: material
});

В данном случае материал применяется к полилинии, формируя последовательность точек вдоль её геометрии.

Использование через Entity API

Более распространённый способ — применение через MaterialProperty:

viewer.entities.add({
    polyline: {
        positions: Cesium.Cartesian3.fromDegreesArray([
            30, 50,
            35, 55,
            40, 50
        ]),
        width: 6,
        material: new Cesium.PolylineDotMaterialProperty({
            color: Cesium.Color.CYAN,
            gapColor: Cesium.Color.TRANSPARENT,
            repeat: new Cesium.Cartesian2(25.0, 1.0)
        })
    }
});

Entity API обеспечивает автоматическое обновление материала при изменении свойств и синхронизацию с системой времени сцены.

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

Одной из ключевых особенностей Dot материала является его поведение при изменении масштаба камеры:

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

Это достигается за счёт работы в пространстве координат примитива, а не в экранных координатах.

Применение в полилиниях

Dot материал чаще всего используется в Polyline-геометрии. Он позволяет визуально разделять:

  • активные и неактивные маршруты
  • альтернативные пути
  • зоны движения объектов
  • линии аналитики (например, прогнозные траектории)

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

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

Cesium позволяет комбинировать Dot материал с другими материалами через композицию или замену appearance:

  • Dot + Color — базовая точечная линия
  • Dot + Animation (через time-varying uniforms) — движущиеся точки
  • Dot + Translucency — полупрозрачные маршруты

В некоторых архитектурах Dot материал используется как слой поверх базового цвета, создавая эффект «пульсации» или «индикаторного пути».

Производительность

Dot материал относится к GPU-дешёвым процедурам:

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

При этом основная нагрузка возникает при большом количестве одновременно активных полилиний, где каждый фрагмент выполняет вычисление паттерна.

Ограничения реализации

Несмотря на эффективность, Dot материал имеет ряд ограничений:

  • невозможность сложных текстурных узоров без модификации шейдера
  • ограниченная вариативность формы точек (обычно круг/квадрат в базовой реализации)
  • зависимость от UV-развёртки линии
  • отсутствие физически корректного освещения (материал не реагирует на свет)

Эти ограничения обусловлены процедурной природой материала и его ориентацией на 2D-паттерн в 3D-сцене.

Внутренняя реализация шейдера

На уровне GLSL логика Dot материала сводится к разбиению координаты вдоль линии:

  • вычисляется параметр положения вдоль полилинии
  • применяется операция fract() для получения повторяющегося шаблона
  • сравнивается с порогом, определяющим dot/gap

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

  • t = fract(v_st.x * repeat.x)
  • если t < threshold → dot color
  • иначе → gap color

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

Практика стилизации сцен

Dot материал часто используется как элемент визуального языка в геоинформационных сценах:

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

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

Взаимодействие с временем сцены

В расширенных реализациях Dot материала возможно добавление временной компоненты:

  • смещение фаз точек
  • циклическая анимация
  • эффект «движущегося потока»

Это достигается через uniform, связанный с Scene.time, который влияет на смещение UV-координат внутри шейдера, создавая иллюзию движения вдоль линии.

Оглавление