Архитектура приложения

deck.gl строится как модульная система поверх WebGL, в которой ключевым принципом является декларативное описание визуализации через слои (layers). Архитектура разделяется на несколько уровней: управление сценой, управление слоями, вычисление атрибутов, рендеринг через GPU и интеграция с внешними фреймворками.

В основе лежит разделение ответственности между ядром, слоями и рендерером. Ядро управляет состоянием приложения и жизненным циклом слоёв, слои определяют логику визуализации, а рендерер отвечает за взаимодействие с WebGL-контекстом.

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


Базовые компоненты системы

Контейнер Deck

Центральным объектом выступает экземпляр Deck, который объединяет:

  • WebGL-контекст
  • список слоёв
  • состояние вида (view state)
  • систему управления событиями
  • цикл рендеринга

Экземпляр Deck функционирует как оркестратор, синхронизирующий данные и визуальное представление. Он не содержит бизнес-логики визуализации, а делегирует её слоям.


Слои как фундаментальная абстракция

Слой (Layer) — минимальная единица визуализации. Каждый слой описывает:

  • входные данные
  • правила преобразования данных в геометрию
  • атрибуты вершин
  • шейдеры (vertex/fragment)
  • параметры визуального отображения

Слои проектируются как чистые функции от входных свойств. При изменении свойств слой пересоздаёт только необходимые GPU-ресурсы, минимизируя перерасход вычислений.

Существует иерархия слоёв:

  • базовые примитивы (ScatterplotLayer, LineLayer)
  • составные слои (CompositeLayer)
  • специализированные слои агрегации (HexagonLayer, GridLayer)

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


Система жизненного цикла слоя

Каждый слой проходит строго определённые стадии:

  1. Инициализация — создание WebGL-ресурсов и буферов
  2. Обновление свойств — сравнение старых и новых props
  3. Вычисление атрибутов — подготовка данных для GPU
  4. Рендеринг — передача команд WebGL
  5. Очистка — освобождение ресурсов

Важный механизм — диффинг свойств. Система сравнивает предыдущие и новые параметры слоя, определяя, какие части требуют пересчёта.

Если изменяются только визуальные параметры (например, цвет), пересчёт геометрии не выполняется. Если меняются данные — пересчитываются атрибуты.


Управление данными и атрибутами

Внутри системы используется концепция attribute manager. Он отвечает за хранение и обновление буферов GPU.

Основные принципы:

  • данные хранятся в TypedArray
  • атрибуты синхронизируются с WebGL буферами
  • обновления происходят лениво (lazy evaluation)
  • поддерживается инкрементальная пересборка

Каждый слой описывает набор атрибутов, например:

  • position
  • color
  • size
  • normal vector

AttributeManager решает, когда пересоздавать буферы и когда можно переиспользовать существующие.


Рендеринговый pipeline

Рендеринг в deck.gl строится как последовательность стадий:

Подготовка сцены

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

Обновление состояния

  • обновление view state
  • пересчёт матриц камеры
  • обработка пользовательских событий

Подготовка GPU-данных

  • обновление атрибутов
  • загрузка текстур
  • синхронизация буферов

Отрисовка

  • биндинг шейдеров
  • передача uniform-параметров
  • выполнение draw calls

Система оптимизирована для минимизации количества draw calls, что критично для больших наборов данных.


Система представлений (Views)

Архитектура включает слой абстракции над камерой — View system.

Основные сущности:

  • View — описание типа представления
  • ViewState — текущее состояние камеры
  • Viewport — вычисленная проекция

Поддерживаются различные типы представлений:

  • MapView (2D карта)
  • OrbitView (3D вращение)
  • FirstPersonView
  • OrthographicView

Каждое представление влияет на матрицы трансформации и способ интерпретации координат.


Матричные преобразования и камера

Вся система координат строится вокруг цепочки трансформаций:

  1. модельные координаты
  2. мировые координаты
  3. координаты камеры
  4. clip space
  5. экранные координаты

Deck.gl автоматически управляет матрицами:

  • model matrix
  • view matrix
  • projection matrix

Обновление камеры приводит к пересчёту viewport и всех зависимых слоёв, но не обязательно к пересборке данных.


Система инвалидации и обновлений

Одним из ключевых механизмов является система флагов обновления. Каждый слой имеет набор состояний:

  • dataChanged
  • propsChanged
  • viewportChanged
  • geometryChanged

Эти флаги позволяют точно определить, какие части pipeline необходимо пересчитать.

Инвалидация распространяется по зависимостям: изменение одного слоя может повлиять на composite-слои, но не затрагивает независимые слои.


WebGL абстракция

Низкоуровневый доступ к WebGL скрыт за абстракциями:

  • ShaderModuleSystem
  • BufferManager
  • TextureManager
  • Model abstraction

Модель (Model) представляет собой связку:

  • шейдерной программы
  • геометрии
  • uniform-переменных
  • атрибутов

Shader modules позволяют переиспользовать GLSL-код между слоями, избегая дублирования логики освещения, проекций и трансформаций.


Композиция слоёв

CompositeLayer реализует механизм вложенности:

  • родительский слой управляет дочерними
  • данные могут трансформироваться на уровне композиции
  • дочерние слои получают вычисленные props

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

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

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

Интеграция с React-экосистемой

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

Основные механизмы:

  • декларативное описание слоёв через props
  • синхронизация жизненного цикла React и Deck
  • автоматическое обновление сцены при изменении state

React-компонент выступает как оболочка над экземпляром Deck, обеспечивая реактивную модель обновлений без ручного управления рендерингом.


Асинхронность и оптимизация

Архитектура учитывает асинхронную природу работы с большими данными:

  • lazy loading геометрии
  • отложенное создание буферов
  • батчинг обновлений
  • throttling рендеринга

Система стремится минимизировать блокировки main thread, делегируя тяжёлые операции Web Workers (в некоторых расширениях).


Управление состоянием сцены

Состояние сцены включает:

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

Состояние не хранится централизованно в едином сторе, а распределено между Deck, слоями и менеджерами ресурсов. Это снижает связность и повышает масштабируемость архитектуры.


Итеративное обновление сцены

Каждый цикл рендеринга представляет собой повторяющийся процесс:

  • обработка input-событий
  • обновление view state
  • диффинг слоёв
  • подготовка атрибутов
  • отрисовка

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


Масштабируемость архитектуры

Архитектура рассчитана на работу с:

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

Масштабирование достигается за счёт:

  • GPU-вычислений
  • минимизации CPU-bound операций
  • инкрементальных обновлений
  • переиспользования буферов

Система остаётся стабильной при росте объёма данных благодаря строгому разделению уровней ответственности и отсутствию глобальных мутаций состояния.