Kepler.gl построен как высокоуровневый аналитический слой поверх deck.gl, который отвечает за низкоуровневую GPU-визуализацию больших пространственных наборов данных. Взаимосвязь между ними не является внешней интеграцией — Kepler.gl использует deck.gl как фундаментальную графическую и вычислительную основу, расширяя его через собственную архитектуру состояния, набор специализированных слоёв и систему конфигурации визуализаций.
deck.gl выполняет в Kepler.gl три ключевые функции:
Kepler.gl не реализует собственный рендеринг. Вместо этого он формирует декларативное описание визуализации, которое затем транслируется в объекты deck.gl.
Каждый слой Kepler.gl в конечном итоге становится экземпляром слоя deck.gl, например:
Kepler.gl использует декларативный подход: визуализация описывается
как JSON-структура состояния (visState), где задаются:
Эта структура не привязана к WebGL напрямую. Она преобразуется в конфигурацию deck.gl через слой адаптации.
Процесс можно описать цепочкой:
данные → visState Kepler.gl → фабрика слоёв → экземпляры deck.gl → WebGL сцена
Ключевой момент: Kepler.gl не «рисует», он описывает, что должно быть нарисовано, а deck.gl выполняет рендеринг.
Каждый слой Kepler.gl является обёрткой над одним или несколькими слоями deck.gl.
Точечный слой Kepler.gl → ScatterplotLayer
deck.gl
Линейный слой → LineLayer или
PathLayer
Геошестиугольники → HexagonLayer
Кластеры → ScreenGridLayer или кастомная агрегация
поверх deck.gl
3D полигоны → PolygonLayer с extruded
rendering
Kepler.gl добавляет надстройки:
deck.gl при этом остаётся ответственным только за отрисовку.
Kepler.gl вводит собственную архитектуру состояния, построенную вокруг Redux-подобной модели.
Основные блоки состояния:
datasets — загруженные данныеlayers — конфигурации слоёвfilters — фильтрация данныхinteractionConfig — интерактивностьmapState — положение картыdeck.gl не управляет состоянием приложения. Он получает уже подготовленные props от Kepler.gl и пересоздаёт или обновляет слои.
Таким образом:
Изменения в Kepler.gl проходят следующий путь:
visStateЭта архитектура позволяет избежать полного перерендеринга сцены, что критично при работе с миллионами точек.
Kepler.gl предоставляет React-компонентную обёртку, которая инкапсулирует deck.gl canvas.
Внутри используется следующий принцип:
deck.gl при этом остаётся независимым от React, что позволяет:
Kepler.gl лишь связывает React-экосистему с WebGL-слоем deck.gl.
Kepler.gl расширяет deck.gl, добавляя собственные слои, которые наследуются от базовых классов deck.gl.
Такие слои:
Пример архитектуры кастомного слоя:
LayerCustomKeplerLayerЭто позволяет Kepler.gl не ограничиваться стандартным набором deck.gl и расширять функциональность под аналитические задачи.
deck.gl обеспечивает аппаратное ускорение через WebGL, а Kepler.gl использует это следующим образом:
Kepler.gl делегирует вычислительно тяжёлые операции туда, где deck.gl может использовать GPU параллелизм.
Общая схема взаимодействия:
Важно, что deck.gl не знает о формате исходных данных — он получает уже подготовленные массивы координат и атрибутов.
deck.gl предоставляет механизмы управления камерой (view state), которые Kepler.gl использует для:
Kepler.gl синхронизирует mapState с deck.gl
viewState.
Любое изменение камеры проходит обратный цикл:
Kepler.gl сохраняет возможность прямого использования API deck.gl:
Это делает Kepler.gl не заменой deck.gl, а надстройкой, которая сохраняет доступ к низкоуровневым возможностям.
deck.gl использует GLSL-шейдеры для рендеринга данных. Kepler.gl влияет на них косвенно:
Shader layer остаётся неизменным, но входные данные формируются Kepler.gl.
Это обеспечивает баланс между гибкостью и производительностью.
Архитектурное разделение можно сформулировать следующим образом:
Kepler.gl отвечает за:
deck.gl отвечает за:
Такое разделение позволяет масштабировать систему от аналитических дашбордов до интерактивных карт с миллионами объектов без потери производительности.