Repolode
pmndrs

pmndrs/postprocessing

three.js의 WebGL 씬에 블룸, SSAO, 컬러 그레이딩 같은 풀스크린 이미지 효과를 연속 적용하는 포스트 프로세싱 라이브러리입니다.

스타
2,957
포크
258
열린 이슈
30
마지막 커밋
6일 전

어떤 프로젝트인가요?

postprocessing은 three.js 씬에 풀스크린 포스트 프로세싱 효과를 추가하는 JavaScript 라이브러리입니다. 포스트 프로세싱은 씬 렌더링이 끝난 뒤 최종 프레임에 이미지 공간 효과를 적용합니다. 라이브러리는 여러 패스를 순서대로 실행하는 EffectComposer를 중심으로 구성되어 있으며, 씬을 그리는 RenderPass와 효과를 적용하는 EffectPass를 제공합니다.

EffectPass는 여러 효과를 가능한 한 적은 렌더링 작업으로 병합하므로, 효과마다 별도의 패스를 연결할 때 드는 비용 없이 다양한 효과를 조합할 수 있습니다. 각 효과는 자체 블렌드 함수를 정의할 수 있습니다. 풀스크린 작업에는 화면 전체를 덮는 사각형 대신 단일 삼각형을 사용합니다. 또한 HDR 스타일 워크플로를 위한 고정밀 HalfFloat 프레임 버퍼를 지원하고, HDR 색상을 디스플레이에 표시할 수 있는 출력으로 변환하는 ToneMappingEffect를 포함합니다.

패키지에는 블룸, 블러, 피사계 심도, 글리치, 갓 레이, 아웃라인, SSAO, 픽셀화, LUT 기반 컬러 그레이딩, 비네트 등의 내장 효과가 포함되어 있습니다. 사용자 지정 효과와 패스를 작성할 수 있으며, 프로젝트 위키에서 작성 방법을 안내합니다.

핵심 기능

  • 01여러 효과를 하나의 EffectPass로 합쳐 렌더링 작업을 줄입니다.
  • 02블룸, SSAO, 피사계 심도, 아웃라인, 컬러 그레이딩 등의 내장 효과를 제공합니다.
  • 03효과별 블렌드 함수를 지원합니다.
  • 04HDR 스타일 렌더링을 위한 고정밀 HalfFloat 프레임 버퍼를 제공합니다.
  • 05HDR을 LDR로 변환하는 ToneMappingEffect를 포함합니다.
  • 06사용자 지정 효과와 패스를 작성할 수 있습니다.

활용 사례

  • three.js 제품 시각화나 게임 씬에 블룸 또는 글로우를 추가합니다.
  • WebGL 씬에 스캔라인, 픽셀화, 글리치 같은 레트로 효과를 적용합니다.
  • LUT 파일로 3D 씬의 컬러를 그레이딩합니다.
  • 충격파나 선택한 오브젝트의 아웃라인 같은 인터랙티브 효과를 구현합니다.

토픽

#threejs#webgl#post-processing#graphics#shaders#real-time#image-effects#2d-filter-effects#composer#effects

자주 묻는 질문

postprocessing은(는) 무엇인가요?
three.js의 WebGL 씬에 블룸, SSAO, 컬러 그레이딩 같은 풀스크린 이미지 효과를 연속 적용하는 포스트 프로세싱 라이브러리입니다. postprocessing은 three.js 씬에 풀스크린 포스트 프로세싱 효과를 추가하는 JavaScript 라이브러리입니다. 포스트 프로세싱은 씬 렌더링이 끝난 뒤 최종 프레임에 이미지 공간 효과를 적용합니다. 라이브러리는 여러 패스를 순서대로 실행하는 EffectComposer를 중심으로 구성되어 있으며, 씬을 그리는 RenderPass와 효과를 적용하는 EffectPass를 제공합니다.
postprocessing은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
postprocessing은(는) Zlib 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
postprocessing은(는) 아직 유지보수되고 있나요?
활발히 유지보수 중. postprocessing의 마지막 커밋은 2026년 11월 1일입니다.
postprocessing은(는) 어디에 사용할 수 있나요?
three.js 제품 시각화나 게임 씬에 블룸 또는 글로우를 추가합니다. WebGL 씬에 스캔라인, 픽셀화, 글리치 같은 레트로 효과를 적용합니다. LUT 파일로 3D 씬의 컬러를 그레이딩합니다. 충격파나 선택한 오브젝트의 아웃라인 같은 인터랙티브 효과를 구현합니다.
postprocessing은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/pmndrs/postprocessing

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트