Карта смещений (displacementMap)

В Three.js карта смещений (displacementMap) используется для динамического изменения геометрии объекта на основе текстуры. В отличие от нормалей, которые изменяют только визуальное освещение поверхности, карта смещений реально деформирует вершины модели, создавая рельефные эффекты.

Свойства материала

Ключевыми материалами для работы с displacementMap являются MeshStandardMaterial и MeshPhongMaterial. Основные свойства:

  • displacementMap — текстура, определяющая смещение. Обычно это grayscale изображение, где яркость пикселя задаёт величину смещения вершины.
  • displacementScale — множитель смещения. Значение определяет, насколько сильно вершины будут смещены. Может быть отрицательным для инверсии эффекта.
  • displacementBias — смещение по умолчанию. Позволяет подвинуть все вершины относительно исходного положения, смещая центр рельефа.
const geometry = new THREE.PlaneGeometry(10, 10, 256, 256);
const texture = new THREE.TextureLoader().load('heightmap.png');

const material = new THREE.MeshStandardMaterial({
    color: 0xffffff,
    displacementMap: texture,
    displacementScale: 2,
    displacementBias: -1
});

const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Требования к геометрии

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

  • PlaneGeometry с большим числом сегментов.
  • SphereGeometry, BoxGeometry с увеличенным параметром сегментации.
  • Любая кастомная BufferGeometry, где вручную создана сетка с нужной плотностью вершин.

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

Карта смещений обычно хранится в градациях серого. Черный цвет соответствует минимальному смещению, белый — максимальному. Для тонкой настройки эффекта можно комбинировать:

  • displacementScale — изменяет амплитуду смещения.
  • displacementBias — сдвигает рельеф относительно плоскости.
material.displacementScale = 1.5;
material.displacementBias = -0.75;

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

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

Карта смещений часто сочетается с другими текстурами для более реалистичного результата:

  • normalMap — добавляет мелкие детали освещения поверх смещения.
  • roughnessMap — управляет отражением света.
  • aoMap — имитация окружающего освещения в углублениях.
const material = new THREE.MeshStandardMaterial({
    map: colorTexture,
    displacementMap: heightMap,
    normalMap: normalTexture,
    roughnessMap: roughnessTexture,
    displacementScale: 2
});

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

Высокое разрешение геометрии и большие текстуры смещений сильно нагружают GPU. Для оптимизации используют:

  • LOD (уровни детализации) для объектов, удаленных от камеры.
  • Снижение сегментации геометрии для дальних объектов.
  • Использование ShaderMaterial с кастомными displacement-приемами для более гибкого контроля.

Применение в сценах

Карты смещений применяются в различных сценариях:

  • Рельефные поверхности — горы, камни, текстуры земли.
  • Динамическая деформация объектов — волны на воде, морфинг объектов.
  • Эффекты разрушения — трещины и выбоины на поверхностях.

Советы по работе

  • Для плавного смещения важно использовать геометрию с равномерным распределением вершин.
  • При комбинировании с нормалями лучше генерировать нормали после применения displacement для корректного освещения.
  • Значения displacementScale и displacementBias подбираются экспериментально, так как визуальный эффект зависит от размеров и сегментации объекта.

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

Оглавление