**후처리(Post processing)**는 장면을 렌더링한 후에 효과를 적용하는 기법입니다. 일반적으로 블러, 블룸, 색 보정과 같은 효과를 추가하는 데 사용됩니다.

적절하게 사용하면, 후처리는 장면의 시각적 품질을 크게 향상시킬 수 있습니다.

다음은 우리가 작업할 장면입니다:

그리고 우리가 목표로 할 최종 결과물:

결과물이 훨씬 더 좋아 보이죠?

React Postprocessing

React Postprocessing은 React Three Fiber 프로젝트에 후처리 효과를 쉽게 추가할 수 있도록 돕는 라이브러리입니다.

Three.js에 후처리 효과를 추가하는 다른 방법들도 있지만, React Postprocessing은 주어진 효과 조합을 자동으로 구성하고 병합합니다.

이로 인해 효과를 추가할 때 성능 부하를 최소화하면서 더 간편하게 추가할 수 있습니다.

이제 라이브러리를 설치해보겠습니다:

Copy
yarn add @react-three/postprocessing

사용하기 위해서는 단순히 EffectComposer 컴포넌트에 효과를 래핑하면 됩니다.

코드를 정리하기 위해 components/Effects.jsx라는 새 파일을 만들어 다음 코드를 추가해 봅시다:

Copy
import { EffectComposer } from "@react-three/postprocessing";

export const Effects = () => {
  return <EffectComposer></EffectComposer>;
};

이제 이 컴포넌트를 App.jsx 파일에서 불러와서 사용할 수 있습니다:

Copy
import { Effects } from "./components/Effects";

import { Canvas } from "@react-three/fiber";
import { Effects } from "./components/Effects";
import { Experience } from "./components/Experience";
function App() {
  return (
    <>
      <Canvas camera={{ position: [-1, 0.225, 5.91], fov: 42 }}>
        <color attach="background" args={["#333333"]} />
        <Experience />
        <Effects />
      </Canvas>
    </>
  );
}

export default App;

장면을 살펴보면, 모든 객체가 meshNormalMaterial로 렌더링된 것처럼 보입니다.

이는 기본적으로 EffectComposer 컴포넌트가 NormalPass 효과를 사용하여 장면을 렌더링하기 때문입니다. 다른 효과를 추가하지 않았기 때문에 이것만 보이는 것입니다.

이를 비활성화하려면 disableNormalPass 속성을 true로 설정하면 됩니다:

Copy
<EffectComposer disableNormalPass></EffectComposer>

이제 EffectComposer가 효과를 받을 준비가 되었습니다.

사용 가능한 효과 목록은 React Postprocessing documentation에서 찾을 수 있습니다.

각 효과에 대해 맞춤화할 수 있는 다양한 속성을 가진 코드 샘플이 포함되어 있습니다. 일부 효과에는 CodeSandbox 예제가 제공되어 시각화하고 실험할 수 있습니다.

이제 함께 몇 가지를 살펴보겠습니다!

비네트

사진 촬영을 해본 적이 있다면 비네트라는 용어를 들어본 적이 있을 것입니다. 이는 이미지의 모서리가 어두워지는 현상입니다.

비네트는 화면의 중앙으로 시청자의 시선을 집중시키는 데 도움을 줍니다.

Effects.jsx 파일에 추가해 봅시다: