Post Processing

Post Processing이란

후처리 효과, 최종 렌더링 결과물에 다양한 그래픽 효과를 적용하고 싶을 때 사용된다.

• 적용할 다양한 그래픽 효과를 three.js 에선 pass라고 한다.

• EffectComposer를 통해 결과물에 pass들을 순차적으로 추가해서 적용할 수 있다.

import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'; 

const renderer = new THREE.WebGLRenderer({
  antialias: true,
});
const composer = new EffectComposer(renderer);
// renderer가 렌더링을 직접 수행하는 대신 composer를 통해 수행하도록 한다.
composer.render(); 

Pass

• renderPass → EffectComposer가 내부적으로 렌더링된 결과물을 후처리에 기본 장면으로 설정할 목적으로 추가하는 pass

• UnrealBloomPass → Three.js에서 기본적으로 내장되어 있는 후처리 효과이며, 레이저 광선 같은 효과를 나타내고 싶을 때 사용

  • resolution(해상도): 더 높은 해상도는 더 고화질의 블룸 효과를 제공하지만 성능에 영향을 미친다.

  • strength: 블룸 효과의 강도

  • radius: 블룸효과의 반경

  • threshold : 얼마만큼의 빛의 양을 받았을 때 효과를 적용할지를 결정, 낮을 수록 효과가 크다.

import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass';
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass'
 
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);

const unrealBloomPass = new UnrealBloomPass(
  new THREE.Vector2(innerWidth, innerHeight),
    1.2,
    1,
    0
  );
composer.addPass(unrealBloomPass);