Карта окружения (envMap) и отражения

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

Типы карт окружения:

  1. Кубическая карта (CubeTexture) – создаётся из шести изображений, соответствующих граням куба (перед, зад, верх, низ, левая, правая). Обеспечивает точное отражение в 3D-пространстве.
  2. Сферическая карта (EquirectangularTexture) – одно изображение с проекцией панорамы. Преобразуется в CubeTexture с помощью метода PMREMGenerator для корректного отображения отражений.

Настройка CubeTexture

import * as THREE from 'three';

// Загрузка шести текстур для граней куба
const loader = new THREE.CubeTextureLoader();
const envMap = loader.load([
  'px.jpg', 'nx.jpg',
  'py.jpg', 'ny.jpg',
  'pz.jpg', 'nz.jpg'
]);

scene.background = envMap; // Используется как фон сцены

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

  • Использование кубической карты повышает реализм отражений, особенно на металлических и зеркальных поверхностях.
  • Можно назначать одну и ту же карту окружения нескольким материалам.

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

В Three.js большинство материалов поддерживают свойство envMap. Наиболее заметный эффект проявляется на материалах с высокой отражательной способностью:

const material = new THREE.MeshStandardMaterial({
  color: 0xffffff,
  metalness: 1,
  roughness: 0,
  envMap: envMap
});

const sphere = new THREE.Mesh(
  new THREE.SphereGeometry(1, 64, 64),
  material
);

scene.add(sphere);

Пояснение параметров:

  • metalness – определяет, насколько материал ведёт себя как металл. Металлические поверхности полностью используют envMap для отражений.
  • roughness – контролирует размытость отражений. При значении 0 отражение будет чётким, при 1 – рассеянным.

PMREM для корректного освещения

Для физически корректного рендеринга (PBR) необходимо преобразовать исходную карту окружения с помощью PMREMGenerator:

const pmremGenerator = new THREE.PMREMGenerator(renderer);
pmremGenerator.compileEquirectangularShader();

const envMapTexture = pmremGenerator.fromEquirectangular(texture).texture;
material.envMap = envMapTexture;

texture.dispose();
pmremGenerator.dispose();

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

  • PMREMGenerator создаёт предвычисленные радиационные карты (Pre-Filtered Mipmapped Radiance Environment Map), что обеспечивает плавные и реалистичные отражения при изменении угла взгляда.
  • После применения PMREMGenerator исходная текстура может быть удалена, чтобы сэкономить память.

Отражения и прозрачность

Для материалов с прозрачностью можно сочетать envMap с opacity и transparent:

const glassMaterial = new THREE.MeshPhysicalMaterial({
  color: 0xffffff,
  metalness: 0,
  roughness: 0,
  transmission: 1, // Полностью прозрачное стекло
  envMap: envMap,
  transparent: true
});

Примечания:

  • Свойство transmission обеспечивает преломление света внутри прозрачных объектов.
  • Для стеклянных материалов важно сочетать roughness и clearcoat для реалистичного блика.

Управление интенсивностью и направленностью отражений

  • reflectivity – коэффициент отражательной способности (0–1).
  • envMapIntensity – масштабирует вклад envMap в итоговый цвет материала:
material.envMapIntensity = 1.5; // Усиление отражений
  • При динамическом освещении можно изменять rotation CubeTexture для симуляции движения солнца или изменения окружения.

Динамические отражения

Для создания отражений движущихся объектов можно использовать WebGLRenderTarget с камерой, которая рендерит сцену с позиции объекта:

const cubeRenderTarget = new THREE.WebGLCubeRenderTarget(256);
const cubeCamera = new THREE.CubeCamera(0.1, 1000, cubeRenderTarget);

sphere.material.envMap = cubeRenderTarget.texture;

function animate() {
  cubeCamera.update(renderer, scene); // Обновление карты окружения
  renderer.render(scene, camera);
}

Преимущества:

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

Оптимизация производительности

  1. Использовать разрешение кубической карты, соответствующее размеру объектов, чтобы не перегружать GPU.
  2. Применять PMREMGenerator только один раз для статических карт окружения.
  3. Для динамических отражений снижать разрешение WebGLCubeRenderTarget и частоту обновления.

Итоговые рекомендации по использованию envMap

  • На металлических и зеркальных поверхностях обязательно задавать metalness = 1 и roughness в диапазоне 0–0.2.
  • Для прозрачных стеклянных объектов использовать MeshPhysicalMaterial с transmission и envMap.
  • PMREM-преобразование улучшает визуальное качество отражений и совместимость с PBR-материалами.
  • Динамические отражения применяются только при необходимости — они требовательны к ресурсам.

Использование карт окружения в Three.js позволяет создавать визуально сложные сцены с реалистичными отражениями без дорогостоящего рендеринга каждой детали, сочетая производительность и визуальное качество.

Оглавление