OrthographicView

Принцип ортографической камеры

deck.gl предоставляет несколько моделей представления сцены, среди которых ортографическая проекция используется для отображения данных без перспективного искажения. В отличие от перспективной камеры, где удалённые объекты визуально уменьшаются, ортографическая модель сохраняет одинаковый масштаб объектов независимо от глубины.

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

Модель OrthographicView

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

Базовая структура использования:

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

const deckgl = new Deck({
  views: new OrthographicView({
    id: 'ortho'
  }),
  initialViewState: {
    target: [0, 0, 0],
    zoom: 0
  },
  controller: true,
  layers: []
});

views определяет тип камеры, а initialViewState задаёт положение наблюдателя и масштаб.

Пространственная модель координат

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

  • ось X отвечает за горизонтальное смещение
  • ось Y — за вертикальное смещение
  • ось Z используется как вспомогательная глубина, но не влияет на масштабирование

Параметр target определяет центр сцены:

initialViewState: {
  target: [100, 200, 0],
  zoom: 2
}

Изменение target приводит к панорамированию сцены без искажения масштаба.

Масштабирование и zoom

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

  • увеличение zoom приближает сцену равномерно
  • уменьшение zoom отдаляет сцену без изменения пропорций

Пример:

initialViewState: {
  target: [0, 0, 0],
  zoom: 3,
  minZoom: -5,
  maxZoom: 10
}

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

Панорамирование и управление сценой

При включённом контроллере (controller: true) взаимодействие с ортографической камерой включает:

  • перемещение сцены вдоль X и Y
  • масштабирование колесом мыши
  • программное изменение центра через target

Панорамирование изменяет только позицию наблюдения, не затрагивая геометрию объектов.

Отличие от OrbitView и MapView

В архитектуре deck.gl существуют несколько типов представлений, отличающихся моделью камеры:

  • OrthographicView — отсутствует перспектива, равномерный масштаб
  • OrbitView — перспектива присутствует, возможна орбита вокруг центра сцены
  • MapView — специализирован для географических координат и тайловой структуры

OrthographicView занимает промежуточное положение между двумерной визуализацией и 3D-сценой, обеспечивая точность без визуальных искажений глубины.

Использование с слоями

Ортографическая камера совместима со всеми стандартными слоями deck.gl:

  • ScatterplotLayer
  • PathLayer
  • PolygonLayer
  • TextLayer

Пример интеграции:

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

const layer = new ScatterplotLayer({
  id: 'points',
  data: [
    {position: [0, 0], size: 10},
    {position: [100, 50], size: 20}
  ],
  getPosition: d => d.position,
  getRadius: d => d.size,
  getFillColor: [255, 0, 0]
});

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

Обработка глубины и порядок отрисовки

Так как перспективное уменьшение отсутствует, порядок отрисовки становится критическим фактором. Глубина может использоваться только для сортировки слоёв, но не влияет на визуальный размер объектов.

Основные стратегии:

  • сортировка по zIndex
  • управление прозрачностью слоёв
  • явное задание порядка через getPolygonOffset (в случае 3D-слоёв)

Работа с transform и viewport

OrthographicView создаёт ортографическую матрицу проекции, которая заменяет перспективную матрицу камеры. Это влияет на:

  • преобразование мировых координат в экранные
  • вычисление размеров объектов
  • обработку hit-testing (попадания курсора)

Программное изменение параметров:

deckgl.setProps({
  viewState: {
    target: [200, 150, 0],
    zoom: 1.5
  }
});

Изменение viewState приводит к пересчёту матрицы проекции и перерисовке сцены.

Координатные преобразования

Внутренний pipeline deck.gl выполняет несколько этапов трансформации:

  1. модельные координаты слоя
  2. мировые координаты сцены
  3. ортографическая проекция
  4. экранные координаты

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

Типичные сценарии применения

OrthographicView используется в задачах, где требуется:

  • визуализация графов и сетей
  • работа с CAD-подобными сценами
  • отображение тепловых карт в плоской системе координат
  • анализ распределённых данных в 2D-пространстве
  • построение редакторов и интерактивных схем

Особенно эффективен при необходимости точного измерения расстояний и сохранения пропорций объектов.

Комбинирование с несколькими view

deck.gl поддерживает мультивидовые сцены, где OrthographicView может использоваться вместе с другими камерами:

views: [
  new OrthographicView({id: 'ortho'}),
  new MapView({id: 'map'})
]

Каждое представление может иметь собственный viewState, что позволяет разделять аналитические и географические слои в одном приложении.

Управление производительностью

Отсутствие перспективных вычислений снижает нагрузку на GPU, однако основным фактором производительности остаются:

  • количество геометрических объектов
  • сложность шейдеров слоёв
  • частота обновления viewState

Оптимизация достигается через:

  • батчинг данных в слоях
  • минимизацию пересчётов состояния камеры
  • использование мемоизации данных слоёв
Оглавление