RGBELoader: загрузка HDR-изображений

RGBELoader — это специализированный загрузчик HDR-изображений формата .hdr, используемый для создания высокодинамического освещения и реалистичного окружения в сценах Three.js. Он позволяет загружать файлы с расширенным динамическим диапазоном и конвертировать их в текстуры, которые можно использовать для освещения через PMREMGenerator или напрямую в качестве окружения.

Импорт и настройка загрузчика

Для работы с RGBELoader требуется импортировать модуль из официального пакета Three.js:

import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
import { PMREMGenerator } from 'three';

RGBELoader создается стандартным образом:

const rgbeLoader = new RGBELoader();

Основной метод загрузчика — .load(url, onLoad, onProgress, onError). Параметры:

  • url — путь к HDR-файлу.
  • onLoad(texture) — колбэк, вызываемый после успешной загрузки текстуры.
  • onProgress(xhr) — отслеживание прогресса загрузки.
  • onError(error) — обработка ошибок.

Преобразование HDR в текстуру окружения

HDR-изображение напрямую использовать в материале неэффективно, поэтому применяется PMREMGenerator (Pre-filtered Mipmapped Radiance Environment Map) для создания карты освещения с предварительно фильтрованными уровнями детализации. Пример интеграции:

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

rgbeLoader.load('textures/hdr/studio.hdr', function(texture) {
    const envMap = pmremGenerator.fromEquirectangular(texture).texture;
    scene.environment = envMap;
    texture.dispose();
    pmremGenerator.dispose();
});

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

  • fromEquirectangular(texture) преобразует сферическую HDR-карту в кубическую карту для использования в сцене.
  • После создания envMap исходная HDR-текстура удаляется (dispose()), чтобы сэкономить память.
  • scene.environment автоматически влияет на материалы PBR (MeshStandardMaterial и MeshPhysicalMaterial), создавая реалистичное отражение и освещение.

Поддержка ассинхронной загрузки

Для проектов с большим количеством HDR-файлов рекомендуется использовать Promise или async/await:

function loadHDR(path) {
    return new Promise((resolve, reject) => {
        rgbeLoader.load(path, resolve, undefined, reject);
    });
}

async function setupEnvironment() {
    const texture = await loadHDR('textures/hdr/studio.hdr');
    const envMap = pmremGenerator.fromEquirectangular(texture).texture;
    scene.environment = envMap;
    texture.dispose();
    pmremGenerator.dispose();
}

Такой подход упрощает организацию кода и интеграцию HDR в сложные сцены.

Применение HDR для освещения и отражений

После настройки окружения HDR позволяет:

  • Создавать реалистичное освещение через scene.environment.
  • Добавлять отражения на PBR-материалах, где metalness и roughness учитывают карту окружения.
  • Использовать HDRI как фон сцены, добавляя глубину и атмосферу:
scene.background = envMap;

При этом фон будет автоматически коррелировать с отражениями на объектах.

Оптимизация и советы

  • HDR-файлы большого разрешения требуют значительных ресурсов GPU. Использование PMREMGenerator уменьшает нагрузку, так как создаются MIP-уровни для фильтрованного отражения.
  • Для интерактивных сцен рекомендуется предварительно кешировать HDR-текстуры.
  • Можно комбинировать несколько HDR-карт через сценические Lights и маски, создавая динамическое освещение.

Настройка экспозиции и гаммы

Для корректного отображения HDR-карт необходимо учитывать гамма-коррекцию и экспозицию рендерера:

renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.0;
renderer.outputEncoding = THREE.sRGBEncoding;
  • Tone Mapping адаптирует яркость HDR к диапазону монитора.
  • Exposure регулирует интенсивность света.
  • sRGBEncoding обеспечивает правильное отображение цветов.

Поддержка дополнительных форматов

RGBELoader работает только с .hdr. Для использования .exr применяется EXRLoader. Для многоканальных HDR с альфа-каналом лучше использовать соответствующие загрузчики и конвертировать их через PMREMGenerator.

Взаимодействие с материалами Three.js

HDR-окружение напрямую улучшает реализм материалов:

const material = new THREE.MeshStandardMaterial({
    metalness: 0.7,
    roughness: 0.2,
    envMap: scene.environment
});
  • Металлические объекты отражают HDR, создавая естественный блеск.
  • Матовые объекты смягчают отражения, сохраняя детали освещения.

Заключение по возможностям

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

Оглавление