threejs-postprocessing은(는) 무엇을 하나요?
Three.js 후처리 - EffectComposer, 블룸, 피사계 심도(DOF), 화면 효과. 시각 효과, 색상 보정, 블러, 글로우를 추가하거나 사용자 정의 화면 공간 셰이더를 만들 때 사용하세요.
주요 기능
- EffectComposer: 후처리 파이프라인을 관리합니다.
- 블룸(Bloom): 밝은 영역에 글로우 효과를 추가합니다.
- 피사계 심도(DOF): 초점이 맞지 않는 영역에 흐림 효과를 적용합니다.
- 색상 보정: 색조, 채도, 명암을 조정합니다.
- 블러(blur): 가우시안 및 기타 블러 필터를 제공합니다.
- 사용자 정의 셰이더: GLSL을 사용한 독자적인 화면 효과를 만들 수 있습니다.
설치
npm install three @react-three/postprocessing
기본 사용법
import { EffectComposer, Bloom, DepthOfField, ChromaticAberration } from '@react-three/postprocessing';
import { EffectPass, RenderPass } from 'postprocessing';
// React Three Fiber 예시
function Scene() {
return (
<>
<Effects>
<Bloom
intensity={1.0}
luminanceThreshold={0.2}
luminanceSmoothing={0.9}
/>
<DepthOfField
focusDistance={0.02}
focalLength={0.1}
bokehScale={5}
/>
</Effects>
</>
);
}
사용자 정의 셰이더 예시
// 사용자 정의 화면 공간 셰이더
uniform float time;
uniform vec2 resolution;
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec2 uv = fragCoord / resolution.xy;
vec3 color = texture2D(inputBuffer, uv).rgb;
// 효과 적용
color.r += sin(uv.x * 10.0 + time) * 0.1;
fragColor = vec4(color, 1.0);
}
지원 플랫폼
- Claude Code
- Cursor
- Codex
- 기타 AI 에이전트 도구