SimpleMeshLayer

Назначение слоя SimpleMeshLayer

SimpleMeshLayer предназначен для отображения произвольных 3D-мешей, загружаемых или создаваемых программно, с возможностью инстансинга и привязки геометрии к данным. Слой работает поверх WebGL и опирается на концепцию «одна геометрия — множество экземпляров», что делает его удобным для визуализации повторяющихся объектов: зданий, транспортных средств, биологических структур, датчиков, точек с объемным представлением.

Основная особенность слоя заключается в разделении:

  • геометрии (mesh) — статическая или частично изменяемая форма;
  • данных (instances) — массив объектов, определяющих позицию, трансформации и визуальные параметры;
  • шейдинга — единая программа отрисовки для всех экземпляров.

Базовая архитектура слоя

SimpleMeshLayer строится вокруг WebGL-рендеринга через шейдеры и атрибуты вершин. Каждый экземпляр меша получает собственные матрицы трансформации и параметры цвета.

Ключевые компоненты:

  • mesh — геометрия (обычно OBJ, GLTF-совместимая структура или вручную заданный объект)
  • data — массив сущностей, определяющих расположение и свойства
  • getPosition — функция, возвращающая координаты экземпляра
  • getColor — функция цвета для каждого объекта
  • getOrientation / getScale — управление трансформациями
  • instance attributes — GPU-буферы для ускоренной отрисовки

Формат mesh и источники геометрии

SimpleMeshLayer принимает геометрию в нескольких форматах:

  • Geometry (из Three.js-совместимых структур)
  • объекты с полями positions, normals, indices
  • данные, загруженные через загрузчики (например, OBJ/GLTF через loaders)

Типичная структура:

const mesh = {
  positions: new Float32Array([...]),
  normals: new Float32Array([...]),
  indices: new Uint16Array([...])
};

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

Основные свойства SimpleMeshLayer

mesh

Определяет базовую геометрию. Один и тот же mesh используется для всех элементов данных.

data

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

[
  {position: [x, y, z], color: [r, g, b]},
  {position: [x, y, z], color: [r, g, b]}
]
getPosition

Функция или строка доступа к координатам:

getPosition: d => d.position
getColor

Определяет цвет экземпляра. Поддерживаются RGBA массивы:

getColor: d => [255, 120, 0, 200]
getScale

Масштабирование меша на уровне инстанса:

getScale: d => d.scale || 1
getOrientation

Позволяет задавать поворот в виде Euler-углов или кватернионов.

Механизм инстансинга

SimpleMeshLayer использует WebGL instancing, что позволяет:

  • отрисовывать тысячи объектов за один draw call
  • минимизировать CPU-GPU синхронизацию
  • переиспользовать одну геометрию

Каждый экземпляр получает:

  • модельную матрицу
  • цветовые атрибуты
  • параметры освещения

GPU выполняет трансформацию вершин для каждого instance параллельно.

Освещение и материал

Слой поддерживает базовую модель освещения:

  • ambient light
  • directional light
  • phong-like shading (в зависимости от конфигурации слоя)

Материал не является физически корректным PBR, но позволяет:

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

Нормали mesh критически важны для корректного освещения.

Пример конфигурации слоя

import {SimpleMeshLayer} from '@deck.gl/mesh-layers';

const layer = new SimpleMeshLayer({
  id: 'mesh-layer',
  data: points,
  mesh,
  getPosition: d => d.coordinates,
  getColor: d => d.color,
  getScale: d => d.size,
  sizeScale: 10,
  parameters: {
    depthTest: true
  }
});

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

SimpleMeshLayer работает в координатной системе карты (например, Web Mercator). Это означает:

  • входные координаты должны быть геопривязаны
  • высота задаётся в метрах или условных единицах проекции
  • масштабирование зависит от zoom уровня

Поддерживаются:

  • локальные координаты
  • глобальные координаты (longitude/latitude/altitude)
  • кастомные проекции через родительские слои

Производительность и оптимизация

Ключевые факторы производительности:

1. Размер mesh

  • количество вершин напрямую влияет на GPU нагрузку

2. Количество инстансов

  • оптимально: десятки тысяч при простых мешах
  • критично: сложные модели + высокие полигоны

3. Атрибуты данных

  • минимизация вычисляемых функций getColor/getPosition

4. Буферизация

  • использование статических typed arrays
  • избегание пересоздания mesh при каждом рендере

Работа с большими наборами данных

При масштабировании данных применяются техники:

  • агрегация (clustering)
  • уровень детализации (LOD)
  • фильтрация по zoom
  • подгрузка чанками

SimpleMeshLayer хорошо комбинируется с другими слоями, например, ScatterplotLayer или ColumnLayer для гибридных сцен.

Использование текстур

Mesh может поддерживать UV-координаты, позволяя накладывать текстуры:

  • изображения
  • карты нормалей
  • процедурные текстуры

Пример:

texture: 'buildingTexture.png'

Важно учитывать:

  • корректные UV-развёртки
  • фильтрацию (linear / nearest)
  • mipmapping для дальних объектов

Повороты и ориентация объектов

Поддерживаются несколько стратегий:

  • Euler angles (yaw, pitch, roll)
  • quaternion representation
  • направление вдоль вектора движения

Типичная проблема — gimbal lock при использовании Euler, поэтому для динамических сцен предпочтительнее кватернионы.

Интеграция с загрузкой 3D-данных

Часто используется совместно с загрузчиками:

  • OBJLoader
  • GLTFLoader
  • loaders.gl

Пайплайн:

  1. загрузка модели
  2. нормализация геометрии
  3. преобразование в buffer geometry
  4. передача в mesh

Обработка picking (интерактивность)

SimpleMeshLayer поддерживает picking для взаимодействия:

  • hover
  • click
  • selection

Каждый instance имеет уникальный индекс, передаваемый в pickingInfo:

onClick: info => {
  const object = info.object;
}

Ограничения слоя

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

Сочетание с другими слоями

SimpleMeshLayer часто используется в композиции:

  • IconLayer — для 2D-меток
  • ScatterplotLayer — для точечных данных
  • PolygonLayer — для областей
  • ArcLayer — для связей между объектами

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

Особенности shader pipeline

Внутренний pipeline включает:

  • vertex shader: трансформация вершин + instancing
  • fragment shader: цвет + освещение
  • uniform buffers: глобальные параметры сцены

Производительность зависит от:

  • количества varyings
  • сложности освещения
  • частоты обновления uniforms

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

  • визуализация городской застройки
  • моделирование инфраструктуры
  • научная визуализация молекул и структур
  • транспортные симуляции
  • 3D heatmap с объемными маркерами
Оглавление