Карта окружающего затенения (aoMap)

Карта окружающего затенения (Ambient Occlusion Map, aoMap) используется для добавления реалистичной глубины объектам в 3D-сцене. Она моделирует эффект рассеянного света, создавая тёмные зоны в углублениях и щелях, где свет практически не проникает. В Three.js это мощный инструмент для улучшения визуального качества без сложных расчётов глобального освещения.

Основы использования aoMap

В Three.js карта окружающего затенения применяется через свойство aoMap материала, чаще всего MeshStandardMaterial или MeshPhysicalMaterial. Для корректного отображения необходимо также указать aoMapIntensity, которое регулирует силу эффекта:

const textureLoader = new THREE.TextureLoader();
const aoTexture = textureLoader.load('textures/aoMap.png');

const material = new THREE.MeshStandardMaterial({
    color: 0xffffff,
    map: textureLoader.load('textures/diffuse.jpg'),
    aoMap: aoTexture,
    aoMapIntensity: 1.0
});

Ключевые моменты:

  • aoMap принимает чёрно-белую текстуру, где белый цвет соответствует полностью освещённым областям, а чёрный – полностью затенённым.
  • aoMapIntensity — число от 0 до бесконечности, влияющее на яркость эффекта. Значение по умолчанию: 1.
  • Без правильных UV-координат карты эффекта не будет видно.

Требования к UV-координатам

Для корректной работы aoMap объект должен иметь вторую UV-развертку (uv2). Первая UV-развертка используется для map (текстуры цвета), вторая – для карты AO. Если объект импортирован из стороннего 3D-редактора, необходимо убедиться, что UV2 присутствует. В Three.js её можно создать с помощью:

geometry.setAttribute('uv2', new THREE.BufferAttribute(geometry.attributes.uv.array, 2));

Это создаёт копию первой UV-развертки и присваивает её для использования aoMap.

Интенсивность и сочетание с другими картами

aoMap взаимодействует с другими картами материала:

  • diffuse map (map) — основной цвет поверхности.
  • roughness map — определяет шероховатость.
  • metalness map — определяет металлические свойства.

При комбинировании эффект окружения усиливает реализм, делая щели и углубления естественно затемнёнными.

const material = new THREE.MeshStandardMaterial({
    map: textureLoader.load('textures/diffuse.jpg'),
    aoMap: textureLoader.load('textures/aoMap.png'),
    roughnessMap: textureLoader.load('textures/roughness.jpg'),
    metalnessMap: textureLoader.load('textures/metalness.jpg'),
    aoMapIntensity: 0.7
});

Практические советы по текстурам aoMap

  1. Качество текстуры: рекомендуется использовать PNG или JPEG с высоким разрешением (1024×1024 и выше) для мелких деталей.
  2. Контраст: для ярко выраженного эффекта рекомендуется увеличивать контраст в редакторе текстур, делая тёмные участки насыщеннее.
  3. Развертка UV2: всегда проверять, что UV2 не перекрывает другие элементы и корректно покрывает всю поверхность.
  4. Оптимизация: можно использовать меньшие текстуры для объектов на дальнем плане, снижая нагрузку на GPU.

Применение aoMap в сцене

aoMap особенно эффективна для:

  • Архитектурных моделей: углы помещений, щели между плитами.
  • Механических объектов: винты, трещины, рёбра.
  • Натуральных объектов: скалы, деревья, текстуры почвы.

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

const geometry = new THREE.BoxGeometry(1, 1, 1);
geometry.setAttribute('uv2', new THREE.BufferAttribute(geometry.attributes.uv.array, 2));

const material = new THREE.MeshStandardMaterial({
    color: 0xffffff,
    map: textureLoader.load('textures/box_diffuse.jpg'),
    aoMap: textureLoader.load('textures/box_ao.jpg'),
    aoMapIntensity: 1.2
});

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

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 10, 7.5);
scene.add(light);

Ограничения aoMap

  • Не реагирует на динамическое освещение сцены, т.к. карта заранее рассчитана.
  • Не заменяет глобальное освещение, а лишь дополняет его эффектами затенения.
  • Требует корректной UV2-развертки; без неё результат будет некорректным.

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

Для повышения реализма aoMap можно комбинировать с:

  • Normal Map — добавляет микрорельефы и улучшает восприятие глубины.
  • Displacement Map — физически смещает вершины, создавая настоящие углубления.
  • Environment Map — усиливает отражения и световые эффекты.

Эта комбинация позволяет добиться визуализации, близкой к фотореализму, без использования дорогостоящих расчётов глобального освещения.

Эта система даёт гибкий инструмент для создания детализированных и выразительных сцен в Three.js, сохраняя при этом оптимизированную производительность.

Оглавление