deck.gl построен вокруг декларативного подхода к описанию визуализации. Центральный принцип заключается в том, что разработчик описывает что должно быть отображено, а не как именно это рисовать шаг за шагом. Сцена представляется как набор слоёв, каждый из которых отвечает за отдельный аспект визуализации: точки, линии, полигоны, текстуры, 3D-объекты, пользовательские примитивы.
Декларативность обеспечивает предсказуемость состояния: при изменении данных или параметров слой автоматически пересчитывает своё представление, не требуя ручного управления WebGL-конвейером.
Ключевой эффект архитектурного решения — устранение прямой зависимости от низкоуровневого API WebGL в пользовательском коде. Это позволяет рассматривать визуализацию как функцию от входных данных:
visualization = f(data, viewState, layers)Основной структурный элемент deck.gl — слой (Layer). Архитектура построена на композиции слоёв, где каждый слой инкапсулирует:
Слои образуют иерархию абстракций. Базовый слой определяет общие механизмы жизненного цикла и взаимодействия с GPU, тогда как специализированные слои реализуют конкретные типы визуализации (например, ScatterplotLayer, ArcLayer, PolygonLayer).
Такое разделение позволяет расширять систему без модификации ядра, соблюдая принцип открытости/закрытости.
Архитектура разделяет систему на два уровня:
1. Core (ядро):
2. Layers (слои):
Такое разделение снижает связанность компонентов и позволяет переиспользовать ядро для различных типов визуализации, включая 2D, 3D и геопространственные сцены.
Архитектура deck.gl ориентирована на работу с потоками данных. Каждый слой принимает массивы данных и параметры визуализации, после чего строит GPU-структуры.
Изменение входных данных автоматически триггерит перерасчёт только тех частей сцены, которые затронуты изменением. Это реализуется через диффинг свойств (props diffing) и контроль версий состояния слоя.
Основные механизмы:
Это позволяет масштабировать визуализацию до миллионов объектов без полного пересчёта сцены.
Ключевой принцип — максимальная разгрузка CPU за счёт переноса вычислений в GPU. Каждый слой оперирует WebGL-буферами напрямую:
Шейдеры (vertex и fragment) становятся основным местом вычислений визуального представления. CPU выполняет только подготовку данных и управление состоянием.
Архитектура стремится минимизировать:
Вместо этого используется инстансинг (instancing), позволяющий отрисовывать тысячи объектов одним вызовом рендера.
Каждый слой определяет набор атрибутов, которые описывают геометрию и визуальные свойства объектов. Атрибуты делятся на:
Атрибуты хранятся в GPU-буферах и обновляются только при изменении соответствующих данных.
Такой подход обеспечивает:
Каждый слой проходит строго определённые стадии:
Жизненный цикл контролируется ядром, что исключает необходимость ручного управления ресурсами в прикладном коде.
Особое значение имеет стадия обновления: слой не пересоздаётся полностью, а инкрементально модифицирует только изменённые части.
Система координат и управление камерой являются отдельным архитектурным уровнем. Камера определяет:
Слои не знают о глобальной сцене напрямую, они работают в локальных координатах, а преобразования применяются на уровне рендера.
Это создаёт слабую связность между визуальными элементами и глобальной сценой.
Слои могут накладываться друг на друга, образуя композицию визуальных эффектов. Порядок рендеринга определяется:
Композиционная модель позволяет строить сложные сцены из простых компонентов без модификации базовых слоёв.
Архитектура поддерживает создание пользовательских слоёв, которые наследуют базовый класс слоя. Кастомизация включает:
Это позволяет интегрировать нестандартные типы визуализации, сохраняя совместимость с системой управления сценой.
Архитектура deck.gl допускает интеграцию с React-подобными системами через концепцию реактивных props. Слой рассматривается как функция от состояния приложения.
Изменение состояния UI автоматически транслируется в изменение слоёв, что создаёт единый поток данных:
UI state → layers → GPU renderingЭто снижает сложность синхронизации визуализации и интерфейса.
Производительность не является внешним слоем, а встроена в архитектуру:
Особое внимание уделяется масштабированию: архитектура рассчитана на работу с большими наборами данных, где число объектов измеряется миллионами.
Одним из ключевых сценариев является работа с геоданными. Архитектура включает:
Слои могут оперировать как абстрактными координатами, так и привязанными к карте системами координат.
Архитектура включает систему событий:
События проходят через слой абстракции, который нормализует взаимодействие между WebGL и приложением.
Каждый слой изолирует своё состояние. Это исключает побочные эффекты между слоями и делает рендеринг детерминированным.
Состояние делится на:
Такая модель упрощает отладку и повышает стабильность системы при сложных сценах.
Архитектура построена на принципе модульности. Каждый слой является независимой единицей, которую можно:
Это позволяет строить библиотеку визуализаций как набор взаимозаменяемых компонентов.
Шейдеры являются полноценной частью архитектуры, а не вспомогательным элементом. Они:
Такой подход позволяет варьировать визуализацию без изменения JavaScript-логики слоя.
Одним из ключевых архитектурных решений является скрытие сложности WebGL. Вместо прямого управления контекстом:
Это позволяет сосредоточиться на описании визуальных моделей, а не на графическом API низкого уровня.