Карта эмиссии (emissiveMap)

В Three.js карта эмиссии (emissiveMap) позволяет объекту излучать свет визуально, независимо от источников освещения сцены. Эта карта используется вместе с материалами, поддерживающими эмиссивность, например MeshStandardMaterial или MeshPhongMaterial. Основная цель — создать эффект самосветящихся поверхностей, таких как неоновые вывески, экраны или огни в играх.

Ключевое отличие emissiveMap от обычного цвета (color) заключается в том, что она не зависит от внешнего освещения. Значения карты определяют, какие участки поверхности будут светиться. Черные пиксели карты означают отсутствие свечения, белые и яркие — максимальное излучение.

Подключение и настройка emissiveMap

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

  1. Создать текстуру:
const textureLoader = new THREE.TextureLoader();
const emissiveTexture = textureLoader.load('textures/emissive.png');
  1. Создать материал с поддержкой эмиссии:
const material = new THREE.MeshStandardMaterial({
    color: 0x000000,          // базовый цвет объекта
    emissive: 0xffffff,       // цвет свечения
    emissiveMap: emissiveTexture,
    emissiveIntensity: 1.0    // сила свечения
});
  1. Создать меш:
const geometry = new THREE.BoxGeometry(1, 1, 1);
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

В этом примере emissiveMap окрашивает объект в белый свет там, где текстура светлая, а emissiveIntensity контролирует яркость свечения.

Отличие emissive и emissiveMap

  • emissive — задаёт единый цвет свечения для всей поверхности.
  • emissiveMap — позволяет задавать локальные участки свечения с помощью текстуры.

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

Формат текстуры и гамма-коррекция

Для emissiveMap рекомендуется использовать текстуры в sRGB пространстве. Если текстура загружается без указания цветового пространства, может возникнуть некорректное отображение цвета свечения. В Three.js это делается так:

emissiveTexture.encoding = THREE.sRGBEncoding;

При использовании HDR карт в формате .hdr или .exr необходимо конвертировать их в подходящее цветовое пространство для корректного отображения интенсивности свечения.

Управление интенсивностью свечения

Свойство emissiveIntensity позволяет усиливать или ослаблять эффект эмиссии:

material.emissiveIntensity = 2.0;  // удваивает яркость свечения

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

Анимация карты эмиссии

EmissiveMap можно анимировать для создания динамических эффектов. Наиболее часто используют смещение текстуры (offset) или вращение (rotation):

emissiveTexture.offset.x += 0.01;  // движение свечения по X
emissiveTexture.offset.y += 0.01;  // движение по Y

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

Комбинирование с другими картами

  • emissiveMap + map: основная текстура определяет цвет объекта, emissiveMap задаёт свечащиеся участки.
  • emissiveMap + aoMap: карта амбиентной окклюзии совместно с эмиссией позволяет создавать реалистичную подсветку в тёмных участках модели.
  • emissiveMap + lightMap: комбинирует локальное излучение объекта с предвычисленным освещением.

Практические советы

  • Использовать черно-белые или частично прозрачные текстуры для четкой локализации свечения.
  • Подбирать цвет emissive в тон текстуры: яркая карта с белым цветом даст максимальную светоотдачу.
  • Для моделей в темных сценах эмиссия делает объекты более читаемыми и визуально привлекательными.
  • Следить за производительностью: большое количество динамических emissiveMap может увеличивать нагрузку на GPU.

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

  1. Неоновые вывески — белые и яркие линии на карте создают эффект светящейся трубки.
  2. Кнопки и индикаторы — динамически меняющиеся emissiveMap имитируют мигание или подсветку.
  3. Фантастические материалы — магические камни, энергетические панели и прочие элементы с внутренним свечением.

Эмиссия в Three.js является мощным инструментом для создания визуально выразительных сцен, позволяя объектам «светиться» независимо от освещения, что существенно расширяет художественные возможности при разработке 3D-графики.

Оглавление