FilmPass: зернистость и строки развёртки

Three.js предоставляет мощный инструментарий для создания постобработки сцены через EffectComposer и специализированные Pass. Одним из таких инструментов является FilmPass, имитирующий эффекты старой киноплёнки, включая зернистость и сканирующие строки. Этот эффект широко используется для стилизации визуала под ретро или киношный стиль.

Подключение FilmPass

FilmPass не является встроенным объектом в ядро Three.js и подключается из модуля постобработки:

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

Для корректной работы требуется рендерер WebGLRenderer и сцена с камерой. Стандартная схема подключения:

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

const filmPass = new FilmPass(
    0.35,  // noise intensity – интенсивность зернистости
    0.025, // scanline intensity – интенсивность линий сканирования
    648,   // scanline count – количество строк развёртки
    false  // grayscale – режим ч/б, true для черно-белого
);

composer.addPass(filmPass);
  • noise intensity регулирует визуальную “зернистость” изображения. Значение от 0 до 1.
  • scanline intensity контролирует видимость горизонтальных линий. Малые значения дают тонкие полосы, высокие — ярко выраженные.
  • scanline count определяет, сколько горизонтальных линий создаётся на экране, прямо влияя на детализацию эффекта.
  • grayscale включает или выключает чёрно-белый режим, полезно для имитации старого киноплёночного вида.

Настройка и динамическое управление

FilmPass позволяет изменять параметры в реальном времени:

filmPass.uniforms['nIntensity'].value = 0.5;
filmPass.uniforms['sIntensity'].value = 0.05;
filmPass.uniforms['sCount'].value = 800;
filmPass.uniforms['grayscale'].value = true;
  • nIntensity — интенсивность шума.
  • sIntensity — интенсивность строк.
  • sCount — количество строк.
  • grayscale — включение/выключение монохромного режима.

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

Взаимодействие с другими Pass

FilmPass интегрируется с любыми другими PostProcessing Pass в Three.js. Порядок добавления в EffectComposer критичен: FilmPass желательно располагать после всех основных цветовых и световых эффектов. Это обеспечивает корректное наложение зернистости на финальный рендер.

Пример комбинирования с BloomPass:

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

const bloomPass = new BloomPass(1.5, 25, 4.0, 256);
composer.addPass(bloomPass);
composer.addPass(filmPass);
  • BloomPass создаёт эффект свечения.
  • FilmPass добавляет зернистость и линии развёртки поверх свечения, имитируя киноплёнку.

Эффекты зернистости и строк развёртки

  • Зернистость (Noise) создаёт случайные вариации яркости пикселей, имитируя фотохимический шум. Используется для стилизации под старое кино или VHS.
  • Строки развёртки (Scanlines) — горизонтальные линии, повторяющиеся с заданной плотностью (scanline count). Они создают ощущение старой киноплёнки или старого телевизора.
  • Совмещение этих эффектов усиливает визуальный реализм пленочного или ретро-стиля, особенно в сценах с низкой контрастностью или мягким освещением.

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

  1. Умеренные значения: слишком высокая интенсивность зернистости делает изображение грязным, а большое количество строк может сломать детализацию сцены.
  2. Чередование grayscale: включение ч/б позволяет выделить текстуры и освещение, но может потерять цветовую информацию сцены.
  3. Анимация: добавление небольших временных колебаний nIntensity создаёт эффект живой плёнки, где шум постоянно меняется.
  4. Совместимость с рендерером: FilmPass лучше работает с WebGLRenderer с включённым antialias: true, что уменьшает визуальные артефакты на границах объектов.

Использование в интерактивных сценах

FilmPass активно применяется в видеоиграх, интерактивных визуализациях и VR-сценах для создания атмосферы. Его параметры можно связывать с игровыми событиями или аудиопотоками, чтобы динамически менять интенсивность эффекта:

filmPass.uniforms['nIntensity'].value = Math.sin(clock.getElapsedTime()) * 0.2 + 0.2;

Такой подход создаёт естественные колебания зернистости, усиливая ощущение старой киноплёнки или ретро-стиля.

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

Оглавление