Environment map и его влияние на PBR-материалы

Основы environment map

Environment map (окружающая карта) — это текстура, которая моделирует отражения окружающей среды на поверхности объектов. В Three.js она используется для создания реалистичных визуальных эффектов, особенно при работе с PBR-материалами (MeshStandardMaterial и MeshPhysicalMaterial). Карта окружения позволяет имитировать отражение неба, зданий, предметов и других источников света без необходимости сложного рендеринга глобального освещения.

Three.js поддерживает несколько форматов environment map:

  • CubeTexture — набор из шести изображений, формирующих куб вокруг сцены.
  • EquirectangularTexture — панорамное изображение, обычно проецируемое сферически.
  • HDR Environment Map — изображения с высоким динамическим диапазоном (HDR), которые дают более точное освещение и блики.

Использование environment map особенно важно для PBR-материалов, поскольку они рассчитывают отражения и освещение на основе физически корректных моделей. Без карты окружения объекты будут выглядеть плоско, даже если настроены все параметры metalness и roughness.

Подключение карты окружения

Для работы с CubeTexture используется THREE.CubeTextureLoader:

const loader = new THREE.CubeTextureLoader();
const envMap = loader.load([
  'px.jpg', 'nx.jpg',
  'py.jpg', 'ny.jpg',
  'pz.jpg', 'nz.jpg'
]);
scene.background = envMap;
scene.environment = envMap;

Параметр scene.environment определяет источник отражений для PBR-материалов. Если указать только scene.background, карта будет видна в качестве фона, но объекты не будут отражать её.

Для equirectangular-карт используется THREE.TextureLoader с конвертацией через THREE.EquirectangularReflectionMapping:

const loader = new THREE.TextureLoader();
loader.load('hdr_sky.jpg', function(texture) {
    texture.mapping = THREE.EquirectangularReflectionMapping;
    scene.background = texture;
    scene.environment = texture;
});

Влияние на PBR-материалы

PBR-материалы в Three.js (MeshStandardMaterial, MeshPhysicalMaterial) используют параметры metalness и roughness для моделирования взаимодействия с окружающим светом.

  • Metalness — определяет, насколько поверхность металлоподобна. Значение 1 делает объект полностью металлическим, отражения среды будут яркими и цветными. Значение 0 делает объект диэлектриком, отражения становятся приглушёнными и серыми.
  • Roughness — определяет шероховатость поверхности. Малое значение создаёт зеркальные отражения, большое — размытые, рассеянные.

Environment map напрямую влияет на визуальный эффект этих параметров. Без карты отражения будут отсутствовать, и металлические поверхности будут выглядеть тускло. Карта окружения также корректно взаимодействует с физически корректным освещением (physicallyCorrectLights), усиливая реализм сцены.

const material = new THREE.MeshStandardMaterial({
  metalness: 0.9,
  roughness: 0.2,
  envMap: envMap
});
const sphere = new THREE.Mesh(new THREE.SphereGeometry(1, 64, 64), material);
scene.add(sphere);

Тонкости и оптимизация

  1. Предварительная обработка HDR-карт Для правильного отображения отражений с HDR рекомендуется использовать PMREMGenerator. Он создаёт предварительно фильтрованные карты, которые обеспечивают корректные размытие отражений в зависимости от шероховатости материала:
const pmremGenerator = new THREE.PMREMGenerator(renderer);
pmremGenerator.compileEquirectangularShader();

loader.load('hdr_sky.hdr', function(texture) {
    const envMap = pmremGenerator.fromEquirectangular(texture).texture;
    scene.environment = envMap;
    texture.dispose();
    pmremGenerator.dispose();
});

  1. Отделение фона и отражений Иногда необходимо использовать карту только для отражений, оставляя фон прозрачным или отдельным. В этом случае scene.background остаётся null, а scene.environment устанавливается в карту окружения.

  2. Производительность CubeTexture с низким разрешением ускоряет рендеринг, но уменьшает качество отражений. Для крупных сцен рекомендуется использовать разные уровни детализации карт окружения, особенно при динамических объектах.

Расширенные эффекты

  • Blurring reflections: использование PMREMGenerator автоматически создаёт mip-уровни для размытия отражений на шероховатых поверхностях.
  • Reflection intensity: контролируется через envMapIntensity у PBR-материалов, что позволяет регулировать яркость отражений без изменения самой карты.
  • Dynamic environment: можно менять scene.environment на лету для имитации смены освещения и времени суток.

Environment map является критически важным элементом для достижения реализма в PBR-материалах. Правильная настройка отражений и использования HDR-текстур позволяет создавать сцены с глубиной, где металл и стекло выглядят натурально, а освещение взаимодействует с поверхностями предсказуемо и физически корректно.

Оглавление