Карта шероховатости и металличности (roughnessMap, metalnessMap)

В библиотеке Three.js физически корректное рендеринг (Physically Based Rendering, PBR) реализуется через материалы типа MeshStandardMaterial и MeshPhysicalMaterial. Эти материалы позволяют задавать свойства поверхности объектов с высокой степенью реализма. Две ключевые карты, определяющие внешний вид поверхности, — это roughnessMap и metalnessMap.

Карта шероховатости (roughnessMap)

Roughness описывает, насколько поверхность рассеивает отражённый свет. Значение варьируется от 0.0 (гладкая, зеркальная поверхность) до 1.0 (полностью шероховатая, матовая поверхность).

  • Тип значения: float (0–1)
  • Используемый канал текстуры: обычно красный канал (R), хотя Three.js интерпретирует карту как градацию серого
  • Эффект: чем выше значение, тем больше диффузного отражения и меньше зеркального

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

const textureLoader = new THREE.TextureLoader();
const roughnessTexture = textureLoader.load('textures/roughness_map.jpg');

const material = new THREE.MeshStandardMaterial({
    color: 0xffffff,
    roughness: 1.0,
    roughnessMap: roughnessTexture
});

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

Карта металличности (metalnessMap)

Metalness определяет, насколько поверхность ведёт себя как металл. Значение колеблется от 0.0 (неметаллическая поверхность) до 1.0 (полностью металлическая).

  • Тип значения: float (0–1)
  • Используемый канал текстуры: обычно красный канал (R), интерпретируется как градация серого
  • Эффект: металлы отражают окружающее освещение ярче и окрашиваются отражениями, неметаллы имеют более диффузное отражение

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

const metalnessTexture = textureLoader.load('textures/metalness_map.jpg');

const material = new THREE.MeshStandardMaterial({
    color: 0xffffff,
    metalness: 1.0,
    metalnessMap: metalnessTexture
});

Карта металличности позволяет локально задавать металлические участки на объекте, например, сделать рамку металлической, а остальную поверхность — пластиковой.

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

Для максимальной реалистичности roughnessMap и metalnessMap обычно используются вместе. Это создаёт сложные визуальные эффекты, где материал по-разному взаимодействует с освещением на разных участках.

const roughnessTexture = textureLoader.load('textures/roughness_map.jpg');
const metalnessTexture = textureLoader.load('textures/metalness_map.jpg');

const material = new THREE.MeshStandardMaterial({
    color: 0xffffff,
    roughnessMap: roughnessTexture,
    metalnessMap: metalnessTexture
});

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

  • Если карта не задана, Three.js использует значения из roughness и metalness, указанные численно.
  • Карты можно комбинировать с другими текстурами PBR: map (цвет), normalMap, aoMap.
  • Для оптимизации производительности рекомендуется использовать .jpg или .png с нужной битностью, обычно 8–16 бит.

Практические советы по созданию карт

  1. Градации серого: Для карт металличности и шероховатости лучше использовать черно-белые изображения. Белый цвет = максимальное значение (1.0), черный = минимальное (0.0).
  2. Сглаживание: Излишняя детализация на карте может приводить к артефактам на поверхности при рендеринге, особенно на мелких объектах.
  3. Синхронизация с другими картами: При работе с PBR важно согласовать roughnessMap с normalMap и albedo (цветом). Например, гладкий металл должен иметь низкую шероховатость и соответствующий normalMap для отражений.
  4. Проверка в сцене: Всегда тестировать карты на реальном освещении, чтобы убедиться, что отражения и блики выглядят естественно.

Влияние на производительность

Использование карт roughnessMap и metalnessMap увеличивает количество текстурных обращений в шейдере, но позволяет значительно повысить визуальное качество. Для оптимизации:

  • Сжимать текстуры форматом .jpg для roughnessMap, metalnessMap, если альфа-канал не нужен.
  • Совмещать карты в один RGB-слот (например, R = metalness, G = roughness, B = ambient occlusion) для уменьшения количества обращений к GPU.
  • Использовать mipmaps для уменьшения шумов при уменьшении масштаба объекта.

Особенности рендеринга PBR

Three.js применяет метод физически корректного рендеринга, где значение metalness определяет:

  • Металлические участки: отражения полностью окрашены окружающей средой, цвет диффузного отражения почти отсутствует.
  • Неметаллические участки: отражения менее интенсивны, диффузный цвет преобладает.

Шероховатость влияет на размытие отражений: чем выше значение, тем мягче отражение света и бликов.

Эти свойства делают карту roughnessMap и metalnessMap обязательными для достижения фотореалистичного PBR в Three.js.

Оглавление