CesiumJS опирается на систему визуализации, в которой материалы и текстуры определяют внешний вид практически всех геометрических примитивов — от простых точек до сложных поверхностей и объемных моделей. Внутренняя модель материалов построена вокруг концепции процедурных и параметрических описаний, позволяющих динамически менять внешний вид объектов без пересоздания геометрии.
Материалы в CesiumJS представляют собой абстракцию над шейдерными программами WebGL. Каждый материал описывается через набор свойств (fabric), которые транслируются в GLSL-код во время исполнения. Такая архитектура обеспечивает гибкость и позволяет комбинировать визуальные эффекты без ручного написания шейдеров.
Базовая структура материала включает:
Материалы применяются к различным сущностям сцены: полигонам, полилиниям, моделям и экранным примитивам.
Основной способ определения материала — объект fabric. Он описывает визуальную логику в декларативной форме.
Ключевые элементы fabric:
Пример концептуального описания:
Fabric позволяет создавать динамические эффекты, такие как бегущие полосы, градиенты и анимации на основе времени сцены.
Библиотека включает набор встроенных материалов, оптимизированных под геопространственную визуализацию.
Используется для заливки геометрии однотонным цветом. Поддерживает альфа-канал и может комбинироваться с другими материалами.
Особенности:
Позволяет накладывать изображение на поверхность.
Основные свойства:
Применяется для:
Генерирует шахматный узор процедурно.
Характеристики:
Используется для:
Создает полосатые узоры с контролем направления и частоты.
Особенности:
Полилинии в CesiumJS используют специализированные материалы, оптимизированные под линии в экранном пространстве.
Базовый цвет линии без текстурирования.
Добавляет эффект свечения вокруг линии.
Ключевые параметры:
Комбинирует основной цвет и обводку.
Используется для:
Создает пунктирную линию.
Контролируемые параметры:
Текстуры в CesiumJS представляют собой GPU-ресурсы, связанные с sampler2D в шейдерах. Они используются для наложения изображений и генерации сложных визуальных эффектов.
Основные источники текстур:
CesiumJS поддерживает автоматическую загрузку текстур через imagery provider:
Каждый провайдер формирует набор тайлов, которые затем используются как текстуры в материальных слоях.
В контексте сущностей Entity API используется MaterialProperty, позволяющий динамически изменять материал во времени.
Особенности:
Примеры поведения:
MaterialProperty используется для привязки визуального состояния к данным, а не к статической геометрии.
CesiumJS позволяет определять пользовательские материалы через fabric и GLSL.
Структура кастомного материала включает:
Типичные эффекты:
Кастомные материалы интегрируются в систему рендеринга без изменения ядра движка.
Любая текстура требует корректного сопоставления с геометрией через UV-координаты.
В CesiumJS:
Искажения текстур возникают при:
Для минимизации артефактов применяются:
Прозрачность в материалах управляется через alpha-канал и blending modes WebGL.
Основные режимы:
При работе с прозрачными материалами важен порядок отрисовки, особенно для слоёв с перекрывающейся геометрией.
Материалы напрямую влияют на нагрузку GPU.
Критические факторы:
Оптимизационные подходы:
В системах 3D Tiles материалы могут переопределяться на уровне плиток.
Особенности:
Это позволяет динамически менять внешний вид городских моделей, инфраструктуры и объектов без пересборки данных.
Материалы активно используют процедурные функции:
Процедурный подход уменьшает зависимость от текстур и повышает адаптивность визуализации к масштабу сцены.
Материалы транслируются в WebGL pipeline следующим образом:
Результатом является пиксельный цвет, вычисляемый для каждой фрагментной точки сцены.
Такой подход позволяет унифицировать визуализацию различных типов объектов в единой графической системе.