Шаблоны и текстуры

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

В CesiumJS текстурирование применяется в нескольких направлениях:

  • оформление 3D-моделей;
  • визуализация поверхности Земли;
  • создание материалов для примитивов;
  • оформление полигонов и объёмов;
  • отображение растровых данных;
  • реализация пользовательских шейдеров.

Основы текстурирования

Текстура представляет собой двумерное изображение, которое проецируется на поверхность объекта.

Наиболее распространённые форматы:

  • PNG;
  • JPEG;
  • WebP;
  • KTX2 (сжатые GPU-текстуры).

С точки зрения WebGL текстура является специальным объектом видеопамяти, содержащим массив пикселей.

В CesiumJS большая часть работы с текстурами скрыта за высокоуровневыми API, однако понимание механизма остаётся важным.

Типичная схема работы выглядит следующим образом:

  1. Загрузка изображения.
  2. Создание текстуры.
  3. Привязка текстуры к материалу.
  4. Отображение материала на геометрии.

Использование изображений как материалов

Самый простой способ применения текстуры — использование материала типа ImageMaterialProperty.

const viewer = new Cesium.Viewer("cesiumContainer");

viewer.entities.add({
    polygon: {
        hierarchy: Cesium.Cartesian3.fromDegreesArray([
            30.0, 50.0,
            31.0, 50.0,
            31.0, 51.0,
            30.0, 51.0
        ]),
        material: new Cesium.ImageMaterialProperty({
            image: "textures/brick.jpg"
        })
    }
});

В результате изображение будет распределено по всей площади полигона.

Повторение текстуры

По умолчанию текстура растягивается на всю поверхность объекта. Часто требуется многократное повторение изображения.

Для этого используется параметр repeat.

material: new Cesium.ImageMaterialProperty({
    image: "textures/tile.png",
    repeat: new Cesium.Cartesian2(10, 10)
})

Здесь изображение будет повторено:

  • 10 раз по горизонтали;
  • 10 раз по вертикали.

Такой подход применяется при создании:

  • плитки;
  • кирпичной кладки;
  • дорожных покрытий;
  • сеток;
  • декоративных узоров.

Прозрачность текстур

Текстуры формата PNG могут содержать альфа-канал.

Пример:

material: new Cesium.ImageMaterialProperty({
    image: "textures/logo.png",
    transparent: true
})

Параметр transparent сообщает движку о необходимости учитывать прозрачные пиксели.

Подобная техника используется для:

  • логотипов;
  • пиктограмм;
  • декоративных элементов;
  • масок.

Цветовое тонирование текстуры

Текстуру можно окрашивать поверх исходного изображения.

material: new Cesium.ImageMaterialProperty({
    image: "textures/grid.png",
    color: Cesium.Color.RED
})

Текстура остаётся видимой, но её цвета смешиваются с указанным оттенком.

Применение:

  • выделение объектов;
  • индикация состояния;
  • тематическое оформление карты;
  • визуализация аналитических данных.

Текстуры на прямоугольниках

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

viewer.entities.add({
    rectangle: {
        coordinates: Cesium.Rectangle.fromDegrees(
            30.0,
            50.0,
            31.0,
            51.0
        ),
        material: "images/aerial.jpg"
    }
});

В данном случае растровое изображение накладывается непосредственно на поверхность Земли.

Подобный механизм применяется для:

  • ортофотопланов;
  • исторических карт;
  • спутниковых снимков;
  • тематических слоёв.

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

Текстуры могут использоваться не только на прямоугольниках.

viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(30, 50),
    ellipse: {
        semiMajorAxis: 50000,
        semiMinorAxis: 30000,
        material: new Cesium.ImageMaterialProperty({
            image: "textures/radar.png"
        })
    }
});

Часто подобный подход используется для отображения:

  • радиолокационных зон;
  • областей покрытия;
  • геофизических данных;
  • специальных обозначений.

Материал Grid

Для создания сетчатых шаблонов существует встроенный материал Grid.

material: new Cesium.GridMaterialProperty({
    color: Cesium.Color.WHITE,
    cellAlpha: 0.2,
    lineCount: new Cesium.Cartesian2(20, 20)
})

Параметры:

Параметр Назначение
color Цвет линий
cellAlpha Прозрачность ячеек
lineCount Количество линий
lineThickness Толщина линий

Применение:

  • инженерные схемы;
  • координатные сетки;
  • визуализация участков;
  • отладка геометрии.

Материал Stripe

Материал Stripe создаёт повторяющиеся полосы.

material: new Cesium.StripeMaterialProperty({
    evenColor: Cesium.Color.YELLOW,
    oddColor: Cesium.Color.BLACK,
    repeat: 20
})

Получается чередующийся узор.

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

  • маркировка зон;
  • предупреждающие области;
  • специальные карты;
  • техническая визуализация.

Материал Checkerboard

Шахматный шаблон формируется через Checkerboard.

material: new Cesium.CheckerboardMaterialProperty({
    evenColor: Cesium.Color.WHITE,
    oddColor: Cesium.Color.GRAY,
    repeat: new Cesium.Cartesian2(8, 8)
})

Такой материал полезен для:

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

Материал PolylineGlow

Для линий доступен специальный текстурированный эффект свечения.

viewer.entities.add({
    polyline: {
        positions: Cesium.Cartesian3.fromDegreesArray([
            30, 50,
            35, 52
        ]),
        width: 8,
        material: new Cesium.PolylineGlowMaterialProperty({
            glowPower: 0.3,
            color: Cesium.Color.CYAN
        })
    }
});

Эффект напоминает текстурированную светящуюся ленту.

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

  • маршрутов;
  • коммуникаций;
  • кабельных трасс;
  • анимированных линий.

Материал PolylineOutline

Материал создаёт контур вокруг линии.

material: new Cesium.PolylineOutlineMaterialProperty({
    color: Cesium.Color.YELLOW,
    outlineColor: Cesium.Color.BLACK,
    outlineWidth: 2
})

Результатом становится более контрастное отображение объектов на сложном фоне.

Комбинирование текстур и цветов

Материалы Cesium поддерживают смешивание нескольких визуальных параметров.

Пример:

material: new Cesium.ImageMaterialProperty({
    image: "textures/grid.png",
    color: Cesium.Color.BLUE.withAlpha(0.5),
    transparent: true
})

В данном случае одновременно используются:

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

Такой подход значительно расширяет возможности оформления сцены.

Текстуры в 3D-моделях

Большинство форматов трёхмерных моделей уже содержат текстуры.

Особенно это касается формата glTF.

Структура обычно включает:

model.gltf
textures/
 ├─ baseColor.png
 ├─ normal.png
 ├─ metallic.png
 └─ roughness.png

Загрузка модели:

viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(30, 50),
    model: {
        uri: "models/building.glb"
    }
});

Cesium автоматически:

  • загружает текстуры;
  • создаёт GPU-ресурсы;
  • связывает их с материалами модели.

PBR-текстуры

Современный glTF использует физически корректный рендеринг (PBR).

Основные карты:

Карта Назначение
Base Color Основной цвет
Normal Map Имитация рельефа
Metallic Металличность
Roughness Шероховатость
Emissive Самосвечение
Occlusion Затенение

Cesium полностью поддерживает данные текстуры в моделях glTF и GLB.

Нормальные карты

Normal Map создаёт иллюзию мелких деталей без усложнения геометрии.

Например:

  • кирпичи;
  • камни;
  • бетон;
  • металлические панели.

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

Это значительно повышает производительность по сравнению с моделированием каждой детали.

Сжатые текстуры

Крупные проекты могут содержать сотни мегабайт текстур.

Для снижения нагрузки используются сжатые форматы:

  • KTX2;
  • Basis Universal.

Преимущества:

  • уменьшение объёма памяти;
  • ускорение загрузки;
  • снижение потребления видеопамяти;
  • повышение FPS.

Современные версии Cesium активно используют подобные форматы при работе с большими 3D Tiles наборами данных.

Работа с пользовательскими материалами

Cesium предоставляет систему Fabric для создания собственных материалов.

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

const material = new Cesium.Material({
    fabric: {
        type: "Color",
        uniforms: {
            color: Cesium.Color.RED
        }
    }
});

Fabric является надстройкой над GLSL-шейдерами.

Через неё можно создавать:

  • процедурные текстуры;
  • динамические эффекты;
  • анимированные поверхности;
  • специализированные визуализации.

Процедурные шаблоны

Не все текстуры должны храниться в файлах.

Многие шаблоны генерируются математически.

Примером являются:

  • полосы;
  • сетки;
  • круговые волны;
  • шум Перлина;
  • диагональные узоры.

Преимущества процедурного подхода:

  • отсутствие файлов изображений;
  • масштабируемость;
  • малая нагрузка на память;
  • лёгкая анимация.

Анимация текстур

Текстуры могут изменяться во времени.

Примером являются:

  • движущиеся облака;
  • потоки воды;
  • радиолокационные сканеры;
  • энергетические поля.

Обычно анимация реализуется через изменение координат выборки текстуры внутри шейдера.

Упрощённая схема:

vec2 uv = materialInput.st;
uv.x += time * speed;

В результате создаётся иллюзия движения изображения по поверхности.

Координаты текстуры

Для корректного отображения изображения используются UV-координаты.

Они определяют соответствие:

Вершина модели → Точка текстуры

Диапазон значений:

U = 0..1
V = 0..1

Пример:

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

Ошибки UV-развёртки приводят к:

  • растяжению текстур;
  • разрывам изображения;
  • неправильному масштабированию;
  • визуальным артефактам.

Ограничения больших текстур

Размер текстур ограничивается возможностями видеокарты.

Типичные значения:

4096 × 4096
8192 × 8192
16384 × 16384

Проверка выполняется через WebGL.

Для крупных сцен рекомендуется:

  • использовать тайловую структуру;
  • применять mipmaps;
  • избегать чрезмерно больших изображений;
  • использовать сжатые форматы.

Mipmaps

Mipmaps представляют собой набор уменьшенных копий текстуры.

Например:

1024x1024
512x512
256x256
128x128
64x64
...

Преимущества:

  • уменьшение мерцания;
  • улучшение качества отображения;
  • снижение нагрузки на GPU;
  • повышение скорости выборки текстур.

Большинство текстур в Cesium используют mipmaps автоматически.

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

Наборы 3D Tiles активно используют текстурирование.

Каждый тайл может содержать:

  • собственную геометрию;
  • собственные материалы;
  • собственные текстуры.

При перемещении камеры Cesium:

  1. Загружает необходимые тайлы.
  2. Загружает связанные текстуры.
  3. Освобождает неиспользуемые ресурсы.

Благодаря этому возможно отображение:

  • городов;
  • промышленных объектов;
  • цифровых двойников;
  • фотограмметрических моделей огромного масштаба.

Оптимизация текстур

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

Использование степени двойки

Предпочтительные размеры:

256
512
1024
2048
4096

Минимизация количества файлов

Лучше использовать атласы текстур вместо множества мелких изображений.

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

Форматы KTX2 позволяют существенно сократить объём ресурсов.

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

Одинаковые текстуры желательно разделять между объектами.

Контроль разрешения

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

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

Оглавление