Post Processing
Post Processing์ด๋
ํ์ฒ๋ฆฌ ํจ๊ณผ, ์ต์ข ๋ ๋๋ง ๊ฒฐ๊ณผ๋ฌผ์ ๋ค์ํ ๊ทธ๋ํฝ ํจ๊ณผ๋ฅผ ์ ์ฉํ๊ณ ์ถ์ ๋ ์ฌ์ฉ๋๋ค.
์ ์ฉํ ๋ค์ํ ๊ทธ๋ํฝ ํจ๊ณผ๋ฅผ three.js ์์ pass๋ผ๊ณ ํ๋ค.
EffectComposer
๋ฅผ ํตํด ๊ฒฐ๊ณผ๋ฌผ์pass
๋ค์ ์์ฐจ์ ์ผ๋ก ์ถ๊ฐํด์ ์ ์ฉํ ์ ์๋ค.
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
๊ฐ ๋ด๋ถ์ ์ผ๋ก ๋ ๋๋ง๋ ๊ฒฐ๊ณผ๋ฌผ์ ํ์ฒ๋ฆฌ์ ๊ธฐ๋ณธ ์ฅ๋ฉด์ผ๋ก ์ค์ ํ ๋ชฉ์ ์ผ๋ก ์ถ๊ฐํ๋ passUnrealBloomPass โ Three.js์์ ๊ธฐ๋ณธ์ ์ผ๋ก ๋ด์ฅ๋์ด ์๋ ํ์ฒ๋ฆฌ ํจ๊ณผ์ด๋ฉฐ, ๋ ์ด์ ๊ด์ ๊ฐ์ ํจ๊ณผ๋ฅผ ๋ํ๋ด๊ณ ์ถ์ ๋ ์ฌ์ฉ
resolution(ํด์๋)
: ๋ ๋์ ํด์๋๋ ๋ ๊ณ ํ์ง์ ๋ธ๋ฃธ ํจ๊ณผ๋ฅผ ์ ๊ณตํ์ง๋ง ์ฑ๋ฅ์ ์ํฅ์ ๋ฏธ์น๋ค.strength
: ๋ธ๋ฃธ ํจ๊ณผ์ ๊ฐ๋radius
: ๋ธ๋ฃธํจ๊ณผ์ ๋ฐ๊ฒฝthreshold
: ์ผ๋ง๋งํผ์ ๋น์ ์์ ๋ฐ์์ ๋ ํจ๊ณผ๋ฅผ ์ ์ฉํ ์ง๋ฅผ ๊ฒฐ์ , ๋ฎ์ ์๋ก ํจ๊ณผ๊ฐ ํฌ๋ค.
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);
Last updated