# Post Processing

## Post Processing이란

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

*  적용할 다양한 그래픽 효과를 three.js 에선 **pass**라고 한다. 
* **`EffectComposer`**를 통해  결과물에 **`pass`**들을 순차적으로 추가해서 적용할 수 있다.

```javascript
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` : 얼마만큼의 빛의 양을 받았을 때 효과를 적용할지를 결정,  낮을 수록 효과가 크다.

```javascript
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);
```