Checkerboard материал

Материал Checkerboard в CesiumJS представляет собой процедурный шейдерный материал, создающий шахматный узор на поверхности геометрии за счёт чередования двух цветов по пространственным координатам. В основе реализации лежит система материалов Cesium, построенная вокруг описания fabric, где задаются параметры GLSL-шейдера, входные uniform-переменные и логика вычисления цвета пикселя.

Система материалов в CesiumJS опирается на унифицированную модель, где каждый материал описывается объектом с полями:

  • type — уникальный идентификатор материала
  • uniforms — набор параметров, доступных в шейдере
  • source — GLSL-код фрагментного шейдера
  • translucent — признак прозрачности результата

Checkerboard материал является встроенным типом и доступен через Cesium.Material.CheckerboardType.

Регистрация встроенного материала выполняется через фабрику материалов:

Cesium.Material._materialCache.addMaterial(Cesium.Material.CheckerboardType, {
    fabric: {
        type: Cesium.Material.CheckerboardType,
        uniforms: {
            evenColor: Cesium.Color.WHITE,
            oddColor: Cesium.Color.BLACK,
            repeat: new Cesium.Cartesian2(8.0, 8.0)
        },
        source: `
            czm_material czm_getMaterial(czm_materialInput materialInput)
            {
                czm_material material = czm_getDefaultMaterial(materialInput);

                vec2 st = materialInput.st * repeat;
                float checker = step(0.5, mod(floor(st.s) + floor(st.t), 2.0));

                vec4 color = mix(evenColor, oddColor, checker);

                material.diffuse = color.rgb;
                material.alpha = color.a;

                return material;
            }
        `
    },
    translucent: function () {
        return true;
    }
});

Принцип формирования шахматного узора

Генерация узора основана на дискретизации UV-координат поверхности:

  1. Поверхность геометрии имеет параметризацию st (аналог UV)
  2. Координаты масштабируются параметром repeat
  3. Выполняется округление через floor
  4. Сумма координат определяет чётность клетки
  5. Функция mod и step формируют бинарное значение

Математически логика может быть описана как:

[ checker = ( s r_x + t r_y ) ]

где ( r_x, r_y ) — коэффициенты повторения узора.

Uniform-параметры материала

Checkerboard материал использует минимальный набор параметров:

  • evenColor — цвет «светлых» клеток
  • oddColor — цвет «тёмных» клеток
  • repeat — масштаб сетки по осям S и T

Типичный набор значений:

evenColor: Cesium.Color.fromCssColorString("#ffffff"),
oddColor: Cesium.Color.fromCssColorString("#2b2b2b"),
repeat: new Cesium.Cartesian2(10.0, 10.0)

Изменение repeat напрямую влияет на плотность узора: увеличение значения приводит к уменьшению размеров клеток.

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

Checkerboard материал применяется к различным типам геометрии:

Полигональные поверхности

const entity = viewer.entities.add({
    polygon: {
        hierarchy: Cesium.Cartesian3.fromDegreesArray([
            30, 10,
            40, 10,
            40, 20,
            30, 20
        ]),
        material: new Cesium.CheckerboardMaterialProperty({
            evenColor: Cesium.Color.YELLOW,
            oddColor: Cesium.Color.BLUE,
            repeat: new Cesium.Cartesian2(5, 5)
        })
    }
});

Здесь используется CheckerboardMaterialProperty, обеспечивающий реактивное обновление материала при изменении свойств.

Эллипсоидальные поверхности

viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(0, 0),
    ellipsoid: {
        radii: new Cesium.Cartesian3(1000000, 1000000, 1000000),
        material: new Cesium.CheckerboardMaterialProperty({
            evenColor: Cesium.Color.WHITE,
            oddColor: Cesium.Color.RED,
            repeat: new Cesium.Cartesian2(20, 20)
        })
    }
});

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

Реактивная модель CheckerboardMaterialProperty

Класс CheckerboardMaterialProperty реализует интерфейс MaterialProperty, позволяя динамически пересчитывать uniform-параметры.

Основные методы:

  • getType() — возвращает тип материала
  • getValue(time, result) — обновляет значения uniforms
  • equals(other) — сравнение свойств

Пример логики обновления:

CheckerboardMaterialProperty.prototype.getValue = function (time, result) {
    result.evenColor = this._evenColor;
    result.oddColor = this._oddColor;
    result.repeat = this._repeat;
    return result;
};

Это позволяет интегрировать материал в систему анимации Cesium, где значения могут изменяться во времени.

Особенности GLSL-реализации

Фрагментный шейдер Checkerboard основан на стандартных GLSL-функциях Cesium:

  • floor — дискретизация координат
  • mod — вычисление остатка
  • step — бинарное сравнение
  • mix — линейная интерполяция цветов

Ключевая особенность заключается в отсутствии ветвлений if, что повышает производительность на GPU:

float checker = step(0.5, mod(floor(st.s) + floor(st.t), 2.0));
vec4 color = mix(evenColor, oddColor, checker);

Использование mix вместо условных операторов снижает вероятность divergence в потоках GPU.

Масштабирование и искажения узора

Поведение checkerboard зависит от нескольких факторов:

  1. UV-развёртка геометрии Неправильная параметризация приводит к растяжению клеток.

  2. Масштаб модели При трансформациях в мировом пространстве узор остаётся привязан к локальным координатам.

  3. Проекция на кривые поверхности На сферах наблюдается сжатие клеток у полюсов из-за особенностей сферической UV-развёртки.

  4. LOD и тайлы Cesium terrain При смене уровней детализации может наблюдаться скачкообразное изменение плотности узора, если материал привязан к геометрии тайла.

Производительность и GPU-аспекты

Checkerboard материал относится к категории дешёвых процедурных материалов:

  • отсутствие текстурных выборок (texture2D)
  • минимальное количество арифметических операций
  • отсутствие условных переходов
  • высокая кэшируемость шейдера

Основные затраты связаны исключительно с количеством фрагментов, а не сложностью вычислений.

На больших сценах узор может применяться без существенного влияния на FPS, что делает его подходящим для:

  • визуальной диагностики сеток
  • прототипирования материалов
  • стилизации геометрии

Комбинирование с другими материалами

В системе Cesium возможно объединение материалов через композицию или кастомные шейдеры. Checkerboard часто используется как базовый слой:

  • подложка для тестирования прозрачности
  • визуальный дебаг UV-развёртки
  • маска для смешивания материалов

Пример комбинирования:

material: new Cesium.Material({
    fabric: {
        type: "Checkerboard",
        uniforms: {
            evenColor: Cesium.Color.WHITE.withAlpha(0.8),
            oddColor: Cesium.Color.GRAY.withAlpha(0.8),
            repeat: new Cesium.Cartesian2(15, 15)
        }
    }
});

Поведение при динамических изменениях

Изменение параметров в рантайме приводит к немедленной перекомпиляции uniform-значений без пересборки шейдера:

material.uniforms.repeat = new Cesium.Cartesian2(30, 30);
material.uniforms.evenColor = Cesium.Color.GREEN;

Это возможно благодаря разделению shader source и uniform state в архитектуре материалов.

Ограничения модели

Несмотря на простоту, checkerboard материал имеет ряд ограничений:

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

Эти ограничения обусловлены тем, что материал работает на уровне фрагментного шейдера и не имеет информации о глобальной геометрической структуре сцены.

Оглавление