pmndrs/react-postprocessing

어떤 프로젝트인가요?

핵심 기능

• 01EffectComposer 안에서 Bloom, DepthOfField, Noise, Vignette 등의 효과 컴포넌트를 선언적으로 사용
• 02렌더링 작업을 줄이기 위해 효과를 단일 패스로 병합
• 03각 효과에서 자체 블렌드 함수 지정 가능
• 04감마 보정 기본 제공 및 WebGL2 MSAA 기본 활성화
• 05react-three-fiber에서 사용할 수 있도록 TypeScript로 작성

활용 사례

• react-three-fiber 씬에 bloom, vignette 또는 필름 그레인 추가
• 3D 씬의 특정 부분에 시선을 집중시키기 위해 피사계 심도 블러 적용
• 렌더 패스를 직접 작성하지 않고 간단한 선형 시각 효과 체인 구성

빠른 시작

1. 1

   패키지 설치하기

   npm install @react-three/postprocessing
2. 2

   react-three-fiber Canvas 안에서 이펙트 컴포넌트를 포함한 EffectComposer로 씬을 감싸기

사용 전 알아둘 점

• !이펙트를 복잡하게 조합하고 제어하기 위한 용도는 아니며, 단순한 이펙트 체인에 가장 적합합니다.
• !@react-three/fiber가 필요하므로 react-three-fiber 씬에서만 사용할 수 있습니다.

토픽

자주 묻는 질문

react-postprocessing은(는) 무엇인가요?

react-three-fiber 씬에서 JSX 컴포넌트로 후처리 효과를 선언적으로 적용할 수 있는 postprocessing 라이브러리용 React 래퍼입니다. react-postprocessing은 postprocessing 라이브러리를 Three.js용 React 렌더러인 @react-three/fiber와 연결하는 래퍼입니다. 효과 패스를 직접 만들지 않고, Canvas 안의 EffectComposer 요소에 Bloom, DepthOfField, Noise, Vignette 같은 효과 컴포넌트를 배치하면 됩니다.

react-postprocessing은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

react-postprocessing은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

react-postprocessing은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. react-postprocessing의 마지막 커밋은 2026년 10월 19일입니다.

react-postprocessing은(는) 어디에 사용할 수 있나요?

react-three-fiber 씬에 bloom, vignette 또는 필름 그레인 추가 3D 씬의 특정 부분에 시선을 집중시키기 위해 피사계 심도 블러 적용 렌더 패스를 직접 작성하지 않고 간단한 선형 시각 효과 체인 구성

react-postprocessing는 어떻게 설치하나요?

패키지 설치하기: npm install @react-three/postprocessing react-three-fiber Canvas 안에서 이펙트 컴포넌트를 포함한 EffectComposer로 씬을 감싸기

react-postprocessing은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/pmndrs/react-postprocessing