View классы

View в deck.gl определяют способ отображения сцены, задавая правила проекции координат, тип камеры, систему координат и соответствие между состоянием представления и визуальными параметрами WebGL-контекста. Каждый View инкапсулирует логику построения viewport и преобразования данных слоя в пиксельное пространство, формируя независимый «канал рендеринга» внутри одной сцены.

View в deck.gl — это абстракция уровня камеры и проекции. Она связывает три ключевых компонента:

  • viewState — состояние камеры (позиция, масштаб, поворот)
  • viewport — вычисленный объект проекции
  • layers — набор слоёв, отфильтрованных по принадлежности к View

Каждый View отвечает за преобразование географических или мировых координат в экранные. В отличие от классического WebGL-пайплайна, где камера одна, deck.gl позволяет использовать несколько View одновременно.

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

ViewState и связь с камерой

ViewState описывает параметры камеры в терминах конкретного типа представления. Он не является универсальным: разные View интерпретируют его по-разному.

Типичный набор параметров:

  • longitude / latitude — центр (для географических View)
  • zoom — уровень масштабирования
  • bearing — поворот карты
  • pitch — наклон камеры
  • target — точка фокуса (в 3D View)

View не хранит состояние напрямую, он лишь интерпретирует переданный viewState и преобразует его в viewport.

Viewport как результат трансформации

Viewport — вычисляемая сущность, которая создаётся на основе View и viewState. Он содержит:

  • матрицы проекции и вида
  • параметры фрустума
  • методы преобразования координат (world → screen и обратно)

Каждый кадр deck.gl пересчитывает viewport для каждого активного View, обеспечивая независимую систему координат.

MapView и географическая проекция

MapView используется для работы с географическими данными в стиле картографических приложений. Он опирается на Web Mercator проекцию и тесно интегрирован с tile-системами.

Основные особенности:

  • поддержка longitude/latitude
  • zoom-based масштабирование
  • совместимость с tile-слоями
  • поддержка pitch и bearing

Пример использования:

import {Deck} from '@deck.gl/core';
import {MapView} from '@deck.gl/core';

const deck = new Deck({
  views: new MapView({repeat: true}),
  viewState: {
    longitude: 37.6173,
    latitude: 55.7558,
    zoom: 10,
    pitch: 30,
    bearing: 0
  },
  layers: []
});

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

OrthographicView и ортографическая проекция

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

Применяется для:

  • технических схем
  • архитектурных визуализаций
  • UI-представлений данных
  • 2D/3D hybrid сцен

Особенность заключается в том, что глубина (z) не влияет на размер объектов.

Пример:

import {OrthographicView} from '@deck.gl/core';

const view = new OrthographicView({
  id: 'ortho',
  controller: true
});

ViewState в этом случае обычно содержит:

  • target: [x, y, z]
  • zoom
  • rotation

FirstPersonView и перспективная камера

FirstPersonView имитирует камеру от первого лица, аналогичную игровым движкам. Камера перемещается в пространстве без привязки к поверхности карты.

Характеристики:

  • свободное перемещение по XYZ
  • yaw / pitch управление
  • отсутствие фиксированного центра
  • перспективная проекция

Используется в:

  • симуляциях
  • 3D навигации
  • визуализации облаков точек

Пример:

import {FirstPersonView} from '@deck.gl/core';

const view = new FirstPersonView({
  id: 'first-person',
  controller: true
});

ViewState обычно включает:

  • position: [x, y, z]
  • bearing / pitch
  • up vector (в некоторых конфигурациях)

OrbitView и вращающаяся сцена

OrbitView обеспечивает вращение камеры вокруг фиксированного объекта или центра сцены. Это промежуточный вариант между ортографической и перспективной моделью.

Применяется для:

  • 3D моделей
  • продуктовых визуализаций
  • аналитических дашбордов

Особенности:

  • вращение вокруг target
  • поддержка zoom/distance
  • стабильный up-vector

GlobeView и сферическая модель Земли

GlobeView отображает данные на 3D-сфере, используя географические координаты без проекции Web Mercator.

Характеристики:

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

ViewState:

  • longitude / latitude
  • zoom
  • altitude

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

Множественные View в одной сцене

Deck.gl поддерживает композицию нескольких View одновременно. Это позволяет строить интерфейсы с несколькими синхронизированными камерами.

Типичные сценарии:

  • карта + 3D вставка
  • глобус + локальная детализация
  • синхронизированные панели аналитики

Пример:

import {Deck} from '@deck.gl/core';
import {MapView, OrthographicView} from '@deck.gl/core';

const deck = new Deck({
  views: [
    new MapView({id: 'map'}),
    new OrthographicView({id: 'overlay'})
  ],
  viewState: {
    map: {
      longitude: 0,
      latitude: 0,
      zoom: 2
    },
    overlay: {
      target: [0, 0, 0],
      zoom: 1
    }
  },
  layers: []
});

Каждый View получает свой namespace в viewState.

Привязка слоёв к View

Слои могут быть ограничены конкретными View через параметр viewIds. Это позволяет контролировать, где именно будет отображаться слой.

import {ScatterplotLayer} from '@deck.gl/layers';

const layer = new ScatterplotLayer({
  id: 'points',
  data: [],
  viewIds: ['map']
});

Если viewIds не указан, слой рендерится во всех активных View.

Система координат и трансформации

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

  • MapView → Web Mercator (EPSG:3857)
  • GlobeView → сферическая геодезическая модель
  • OrthographicView → декартова система
  • FirstPersonView → локальная 3D система камеры

Это влияет на:

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

Контроллеры и интерактивность

View может включать controller, который обрабатывает пользовательский ввод:

  • zoom
  • pan
  • rotate
  • tilt

Контроллер преобразует события мыши и клавиатуры в изменения viewState.

new MapView({
  controller: true
});

Контроллеры различаются по типу View и используют разные модели управления камерой.

Производительность при множественных View

При использовании нескольких View важно учитывать:

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

Оптимизации:

  • ограничение viewIds для слоёв
  • использование shared state
  • минимизация пересчёта viewState
  • кеширование геометрии в слоях

Кастомные View

View можно расширять для создания специализированных проекций. Для этого переопределяются методы:

  • getViewport
  • project
  • unproject

Применение:

  • нестандартные картографические проекции
  • CAD-системы
  • научная визуализация

Пример структуры:

import {View} from '@deck.gl/core';

class CustomView extends View {
  getViewport({width, height, viewState}) {
    return super.getViewport({
      width,
      height,
      viewState
    });
  }
}

Кастомные View требуют точного понимания матричной алгебры и pipeline deck.gl.

Взаимодействие View и Layer lifecycle

View влияет на жизненный цикл слоя через:

  • обновление uniforms при смене viewport
  • пересчёт координатных преобразований
  • фильтрацию по viewIds
  • синхронизацию с React/Redux state (в интеграциях)

Каждое изменение viewState инициирует перерасчёт всех активных viewport, что напрямую влияет на render loop.

Оглавление