Texture sampling

Текстурное сэмплирование определяет способ, которым GPU извлекает цветовые значения из изображений при наложении их на геометрию. В контексте CesiumJS это критически важный механизм, поскольку практически вся визуализация — от тайлов карт до 3D-моделей и эффектов освещения — опирается на работу текстур.

Текстура в WebGL представляется как двумерный массив пикселей, а координаты UV используются для доступа к этим пикселям. Сэмплер задаёт правила интерпретации координат и алгоритмы интерполяции при масштабировании.

Координаты UV и область выборки

Каждая текстура в CesiumJS привязывается к поверхности через UV-координаты в диапазоне:

  • U — горизонтальная ось
  • V — вертикальная ось

Классическое отображение:

  • (0, 0) — нижний левый угол текстуры
  • (1, 1) — верхний правый угол

Однако реальные значения UV могут выходить за пределы диапазона, что приводит к поведению, заданному режимами wrap (обёртки).

Режимы обёртки текстуры (Wrap Modes)

Wrap mode определяет, как GPU обрабатывает координаты вне диапазона [0, 1].

Clamp to Edge

Значение фиксируется на краях текстуры:

  • UV < 0 → берётся 0
  • UV > 1 → берётся 1

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

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

Типичное поведение в CesiumJS для ImageryLayer:

new Cesium.TextureUniform({
    wrapS: Cesium.TextureWrap.CLAMP_TO_EDGE,
    wrapT: Cesium.TextureWrap.CLAMP_TO_EDGE
});

Repeat

Текстура повторяется по бесконечной сетке:

  • UV mod 1

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

  • процедурных материалов
  • декоративных паттернов
  • бесшовных текстур
wrapS: Cesium.TextureWrap.REPEAT,
wrapT: Cesium.TextureWrap.REPEAT

Mirrored Repeat

Повтор с зеркалированием:

  • каждая вторая плитка инвертируется

Используется для устранения видимых швов при тайлинге.

Фильтрация текстур

Фильтрация определяет, как вычисляется цвет пикселя при несоответствии координат texel-пикселям.

Nearest Filtering

Простейший метод:

  • выбирается ближайший пиксель
  • высокая скорость
  • низкое качество

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

  • пиксель-арта
  • debug-режимов
magFilter: Cesium.TextureMagnificationFilter.NEAREST

Linear Filtering

Интерполяция между соседними пикселями:

  • сглаживание изображения
  • более высокое качество

Основной режим в CesiumJS для карт и спутниковых данных.

magFilter: Cesium.TextureMagnificationFilter.LINEAR

Mipmapping

Mipmaps — это набор уменьшенных копий текстуры:

  • 1/2 размера
  • 1/4
  • 1/8 и т.д.

Используются при отдалении камеры для:

  • снижения aliasing
  • повышения производительности
  • улучшения стабильности изображения

Минимизационный фильтр:

minFilter: Cesium.TextureMinificationFilter.LINEAR_MIPMAP_LINEAR

Anisotropic Filtering

При наклонном просмотре поверхности текстура искажается: один пиксель камеры покрывает вытянутую область текстуры.

Anisotropic filtering компенсирует это, улучшая резкость под углом.

В CesiumJS степень анизотропии зависит от GPU:

maximumAnisotropy: viewer.scene.maximumTextureAnisotropy

Практическое влияние:

  • резкие дороги на горизонте
  • читаемость спутниковых снимков под углом
  • уменьшение «размытия вдаль»

Texture Sampler в WebGL контексте CesiumJS

Cesium абстрагирует WebGL sampler через объект Sampler:

const sampler = new Cesium.Sampler({
    wrapS: Cesium.WrapMode.REPEAT,
    wrapT: Cesium.WrapMode.REPEAT,
    minificationFilter: Cesium.TextureMinificationFilter.LINEAR,
    magnificationFilter: Cesium.TextureMagnificationFilter.LINEAR
});

Этот sampler применяется к:

  • ImageryLayer текстурам
  • Material текстурам
  • 3D Tiles текстурам
  • custom shader textures

Текстуры в Imagery Layer

Imagery layers — основной источник текстур в CesiumJS.

Каждый тайл:

  • загружается как отдельная текстура
  • использует shared sampler
  • кешируется в GPU memory

Пример настройки:

const layer = new Cesium.ImageryLayer(provider, {
    maximumAnisotropy: 8,
    minificationFilter: Cesium.TextureMinificationFilter.LINEAR_MIPMAP_LINEAR,
    magnificationFilter: Cesium.TextureMagnificationFilter.LINEAR
});

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

  • тайловая структура требует mipmaps
  • clampToEdge используется для избежания артефактов на границах тайлов
  • повторение почти всегда отключено

Поток загрузки текстур и mipmap генерация

Процесс загрузки:

  1. загрузка изображения (PNG/JPEG/WebP)
  2. создание WebGL texture
  3. установка wrap/filter параметров
  4. генерация mipmaps (если разрешено)
  5. кэширование в GPU

Важно:

  • mipmaps генерируются только для power-of-two текстур или при поддержке расширений
  • Cesium автоматически адаптирует стратегию под устройство

Потери качества при неправильном sampling

Ошибки конфигурации приводят к артефактам:

Aliasing

  • ступенчатые края
  • возникает при отсутствии mipmaps

Blurring

  • чрезмерная интерполяция
  • неправильный anisotropy

Texture seams

  • появляются при неправильном wrap mode
  • особенно в 3D Tiles

Текстуры в 3D Tiles

В 3D Tiles текстурирование работает через PBR-материалы:

  • baseColorTexture
  • normalTexture
  • metallicRoughnessTexture

Каждая текстура использует собственный sampler:

{
  "texture": {
    "sampler": 0,
    "source": 0
  }
}

Ключевые особенности:

  • строгая зависимость от mipmaps
  • обязательная поддержка linear filtering
  • anisotropic filtering критичен для больших сцен

Связь с шейдерами

CesiumJS позволяет переопределять sampling через GLSL:

vec4 color = texture2D(u_texture, v_st);

Сэмплирование здесь зависит от:

  • sampler state
  • precision float
  • mipmap level selection

Можно управлять уровнем детализации вручную:

texture2DLodEXT(u_texture, v_st, lod);

Оптимизация текстурного сэмплирования

Практически важные правила:

  • использовать mipmaps для всех удалённых объектов
  • избегать REPEAT для тайловых карт
  • ограничивать anisotropy до разумных значений (4–8)
  • использовать compressed textures (S3TC/ETC2) при больших сценах
  • минимизировать количество уникальных samplers

Поведение GPU и ограничения

Факторы, влияющие на sampling:

  • максимальный размер текстуры (viewer.scene.maximumTextureSize)
  • поддержка расширений WebGL
  • лимиты VRAM
  • precision fragment shader

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

Оглавление