Bloom: свечение ярких областей (UnrealBloomPass)

Эффект Bloom используется для имитации свечения ярких областей сцены, создавая ощущение высокой интенсивности света. В Three.js его реализует класс UnrealBloomPass, входящий в модуль postprocessing. Основная задача Bloom — размытие светлых объектов, чтобы они выглядели более реалистично и насыщенно, при этом затемнённые части сцены остаются без свечения.

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

  • Эффект применяется после рендеринга сцены на экран (post-processing).
  • Разделение ярких областей и их последующее размытие создаёт иллюзию рассеянного света.
  • Параметры эффекта позволяют управлять интенсивностью, радиусом свечения и порогом яркости.

Настройка UnrealBloomPass

Для работы с Bloom необходимо создать сцену с рендерером и добавить постобработку через EffectComposer:

import * as THREE from 'three';
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js';

// Рендерер
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Сцена и камера
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// Простейшая геометрия
const geometry = new THREE.SphereGeometry(1, 32, 32);
const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

// EffectComposer для постобработки
const composer = new EffectComposer(renderer);
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);

// UnrealBloomPass: параметры (размер экрана, сила, радиус, порог)
const bloomPass = new UnrealBloomPass(
    new THREE.Vector2(window.innerWidth, window.innerHeight),
    1.5,  // strength — интенсивность свечения
    0.4,  // radius — радиус размытия
    0.85  // threshold — порог яркости для свечения
);
composer.addPass(bloomPass);

Описание параметров UnrealBloomPass:

  • strength — коэффициент яркости свечения. Чем выше, тем светлее и интенсивнее эффект.
  • radius — радиус размытия светлых участков. Большие значения создают мягкое и растекающееся свечение.
  • threshold — минимальная яркость, при которой пиксель будет участвовать в эффекте Bloom. Значения от 0 до 1.

Интеграция с анимацией

Эффект Bloom применяется через composer.render() вместо обычного renderer.render(). Это позволяет динамически изменять параметры и добавлять анимацию сцены:

function animate() {
    requestAnimationFrame(animate);

    // Поворот объекта
    sphere.rotation.x += 0.01;
    sphere.rotation.y += 0.01;

    // Рендеринг с постобработкой
    composer.render();
}

animate();

Техника маскирования и выборочное свечение

Для более сложных сцен используется техника маскирования, когда Bloom применяется только к ярким объектам, оставляя остальное без свечения:

  1. Создаётся сцена маски, где оставляются только объекты, которые должны светиться.
  2. Используется отдельный рендеринг для Bloom, после чего результат комбинируется с основной сценой.

Пример подхода:

const darkMaterial = new THREE.MeshBasicMaterial({ color: 'black' });
const materials = {};

// Функция для подготовки маски
function darkenNonBloomed(obj) {
    if (obj.isMesh && !obj.userData.bloom) {
        materials[obj.uuid] = obj.material;
        obj.material = darkMaterial;
    }
}

function restoreMaterials(obj) {
    if (materials[obj.uuid]) {
        obj.material = materials[obj.uuid];
        delete materials[obj.uuid];
    }
}

// Перед рендерингом Bloom
scene.traverse(darkenNonBloomed);
composer.render();
scene.traverse(restoreMaterials);

В этом случае Bloom будет применён только к объектам, у которых userData.bloom = true.

Продвинутая настройка

  • multi-pass Bloom — комбинирование нескольких UnrealBloomPass с разными радиусами и интенсивностями для создания более мягкого или контрастного свечения.
  • adaptive threshold — динамическая настройка порога в зависимости от яркости сцены.
  • цветовое свечение — можно задавать оттенок свечения через bloomPass.materials или использовать цветные материалы для различных эффектов.

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

  • Не использовать слишком высокую силу Bloom на больших сценах — производительность сильно падает.
  • Минимизировать количество объектов с включённым Bloom для экономии ресурсов.
  • Для реалистичного свечения комбинируют HDR-текстуры и Bloom с небольшим радиусом.
  • Использовать анализ яркости сцены для динамического изменения threshold, чтобы свечение выглядело естественно при изменении освещения.

Эффект Bloom через UnrealBloomPass в Three.js — мощный инструмент для создания визуально впечатляющих сцен с реалистичным светом и мягкими бликами, позволяющий управлять интенсивностью, радиусом и выборкой объектов с высокой точностью.

Оглавление