RenderPass: базовый рендер-пасс

RenderPass — один из ключевых компонентов системы постобработки (post-processing) в Three.js. Он представляет собой базовый рендер-пасс, который отвечает за отрисовку сцены на экран или на промежуточный render target, с возможностью дальнейшей обработки другими эффектами.

Основные концепции

В Three.js постобработка строится на концепции пассингов (passes). Каждый пасс получает на вход сцену и камеру, производит рендеринг, а затем передаёт результат следующему пассу. RenderPass является самым простым и фундаментальным пассом, на котором основаны все сложные эффекты, такие как Bloom, SSAO или Motion Blur.

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

  • Рендеринг сцены с учётом всех материалов, света и теней.
  • Возможность рендеринга на WebGLRenderTarget вместо основного канваса.
  • Опциональное управление очисткой буферов (clear, clearColor, clearAlpha).
  • Интеграция с EffectComposer для цепочек постобработки.

Инициализация RenderPass

RenderPass создаётся с передачей сцены и камеры:

import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';

const renderPass = new RenderPass(scene, camera);

Параметры конструктора:

  • scene — объект типа THREE.Scene. Сцена, которую необходимо отрисовать.
  • camera — объект типа THREE.Camera. Камера, через которую будет происходить рендеринг.
  • overrideMaterial (опционально) — материал, который заменит все материалы сцены.
  • clearColor и clearAlpha (опционально) — настройки очистки буфера цвета.

Пример с переопределением материала:

const overrideMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
const renderPass = new RenderPass(scene, camera, overrideMaterial);

В этом случае все объекты сцены будут отрисованы с использованием MeshBasicMaterial, что полезно для создания масок или глубинных карт.

Настройки очистки буфера

RenderPass позволяет контролировать очистку буфера цвета и глубины:

renderPass.clear = true;          // очистка перед рендером
renderPass.clearColor = new THREE.Color(0x000000); 
renderPass.clearAlpha = 0.0;      // прозрачный фон
  • clear — включает или отключает автоматическую очистку.
  • clearColor — задаёт цвет фона при очистке.
  • clearAlpha — задаёт прозрачность фонового цвета.

Эти параметры полезны при смешении нескольких пассов и при использовании прозрачности в эффект-композере.

Интеграция с EffectComposer

EffectComposer управляет цепочкой пассов. RenderPass обычно располагается первым в цепочке, чтобы отрисовать базовую сцену:

import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js';

const composer = new EffectComposer(renderer);
composer.addPass(renderPass);

const bloomPass = new UnrealBloomPass();
composer.addPass(bloomPass);

function animate() {
    requestAnimationFrame(animate);
    composer.render();
}

Особенности работы с EffectComposer:

  • RenderPass должен быть первым, так как он задаёт исходное изображение.
  • Последующие пассы используют результат рендера RenderPass.
  • ShaderPass и другие эффекты могут модифицировать результат.

Использование OverrideMaterial для специальных эффектов

RenderPass часто применяют для генерации масок или карт глубины. Например, создание карты теней или выделение объектов:

const depthMaterial = new THREE.MeshDepthMaterial();
const depthPass = new RenderPass(scene, camera, depthMaterial);
depthPass.clearColor = new THREE.Color(0xffffff);
depthPass.clearAlpha = 1.0;

Такой подход позволяет использовать одно изображение сцены в разных эффектах, не затрагивая основной рендеринг.

Советы по оптимизации

  1. Выключать ненужную очистку: если предыдущий пасс уже очистил буфер, лишняя очистка RenderPass не нужна.
  2. Использовать overrideMaterial для простых эффектов: это снижает нагрузку на GPU.
  3. Минимизировать количество RenderPass: каждый рендер-пасс вызывает полное отрисовывание сцены, что может сильно нагружать процессор и видеокарту.

Взаимодействие с прозрачными объектами и альфа-каналом

RenderPass корректно обрабатывает прозрачные материалы, если установлены параметры:

renderPass.clearAlpha = 0;
renderPass.clearColor = new THREE.Color(0x000000);

При необходимости можно использовать alpha: true в WebGLRenderer для поддержки прозрачного канваса.

Важные внутренние свойства

  • renderToScreen — если true, выводится напрямую на экран, иначе передаётся следующему пассу.
  • maskActive — используется в комбинации с MaskPass для ограничения рендеринга области.

Эти свойства редко изменяются вручную, но понимание их важно при построении сложных цепочек постобработки.

Пример полной цепочки

const composer = new EffectComposer(renderer);

const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);

const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);
composer.addPass(bloomPass);

const finalPass = new ShaderPass(CopyShader);
finalPass.renderToScreen = true;
composer.addPass(finalPass);

function animate() {
    requestAnimationFrame(animate);
    composer.render();
}

В этой цепочке RenderPass создаёт исходный рендер сцены, после чего BloomPass добавляет свечение, а финальный ShaderPass выводит результат на экран.

RenderPass является фундаментом системы постобработки в Three.js, предоставляя гибкий и универсальный инструмент для управления базовым рендером сцены и её интеграции с другими визуальными эффектами. Его корректное использование позволяет создавать сложные графические пайплайны с минимальной нагрузкой на код и GPU.

Оглавление