Three.js: OutlinePass๋Š” ํ”ฝ์…€ ๋น„์œจ 2์—์„œ ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2017๋…„ 04์›” 21์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: mrdoob/three.js

์•„์›ƒ ๋ผ์ธ ํŒจ์Šค ์˜ˆ์ œ์—์„œ ํ”ฝ์…€ ๋น„์œจ์€ 1๋กœ ์„ค์ •๋ฉ๋‹ˆ๋‹ค.
https://github.com/mrdoob/three.js/blob/master/examples/webgl_postprocessing_outline.html#L161

์žฅ๋ฉด์ด ํ๋ฆฟํ•˜๊ณ  ๋ผ์ธ์— ์ฃผ์„์„ ๋‹ฌ๊ณ  ์žฅ์น˜์˜ ํ”ฝ์…€ ๋น„์œจ์„ ์‚ฌ์šฉํ•˜๋ฉด ์žฅ๋ฉด์ด ๋‹ค์Œ ์Šคํฌ๋ฆฐ ์ƒท๊ณผ ๊ฐ™์ด ์™ผ์ชฝ ํ•˜๋‹จ ๋ชจ์„œ๋ฆฌ๋กœ ์••์ถ•๋ฉ๋‹ˆ๋‹ค.
image

Three.js ๋ฒ„์ „
  • [] ๊ฐœ๋ฐœ์ž
  • [x] r84
  • [] ...
๋ธŒ๋ผ์šฐ์ €
  • [] ๋ชจ๋‘
  • [x] ํฌ๋กฌ
  • [] Firefox
  • [ ] ์ธํ„ฐ๋„ท ์ต์Šคํ”Œ๋กœ๋Ÿฌ
OS
  • [x] ๋ชจ๋‘
  • [] Windows
  • [ ] ๋งฅ OS
  • [] Linux
  • [] Android
  • [] iOS
ํ•˜๋“œ์›จ์–ด ์š”๊ตฌ ์‚ฌํ•ญ (๊ทธ๋ž˜ํ”ฝ ์นด๋“œ, VR ์žฅ์น˜ ๋“ฑ)

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

EffectComposer๊ฐ€ WebGLRenderTarget์„ ์ƒ์„ฑ ํ•  ๋•Œ WebGLRenderer ์„ค์ •๋œ pixelRatio ๋ฅผ ์ฒ˜๋ฆฌํ•˜์ง€ ์•Š๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๋‹ค์Œ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

  1. effectFXAA ๋Œ€ํ•œ ์‚ฌ์šฉ์ž ์ง€์ • ์ง‘ํ•ฉ ํฌ๊ธฐ ์ฒ˜๋ฆฌ๊ธฐ ๋งŒ๋“ค๊ธฐ :
effectFXAA.setSize = function(width, height) {
    this.uniforms.resolution.value.set(1 / width, 1 / height);
};
  1. ์ดˆ๊ธฐํ™” ๋ฐ ์ฐฝ ํฌ๊ธฐ ์กฐ์ • ์ค‘์— width ๋ฐ height ๋ฅผ ๋ฏธ๋ฆฌ ๊ณฑํ•œ ์ƒํƒœ๋กœ composer.setSize ๋ฅผ ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค.
var size = renderer.getSize();
var pixelRatio = renderer.getPixelRatio();
composer.setSize(width * pixelRatio, height * pixelRatio);

๋ชจ๋“  3 ๋Œ“๊ธ€

/ ping @ spidersharma03

๋‚ด๊ฐ€ ์‚ดํŽด๋ณผ ๊ฒŒ

EffectComposer๊ฐ€ WebGLRenderTarget์„ ์ƒ์„ฑ ํ•  ๋•Œ WebGLRenderer ์„ค์ •๋œ pixelRatio ๋ฅผ ์ฒ˜๋ฆฌํ•˜์ง€ ์•Š๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๋‹ค์Œ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

  1. effectFXAA ๋Œ€ํ•œ ์‚ฌ์šฉ์ž ์ง€์ • ์ง‘ํ•ฉ ํฌ๊ธฐ ์ฒ˜๋ฆฌ๊ธฐ ๋งŒ๋“ค๊ธฐ :
effectFXAA.setSize = function(width, height) {
    this.uniforms.resolution.value.set(1 / width, 1 / height);
};
  1. ์ดˆ๊ธฐํ™” ๋ฐ ์ฐฝ ํฌ๊ธฐ ์กฐ์ • ์ค‘์— width ๋ฐ height ๋ฅผ ๋ฏธ๋ฆฌ ๊ณฑํ•œ ์ƒํƒœ๋กœ composer.setSize ๋ฅผ ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค.
var size = renderer.getSize();
var pixelRatio = renderer.getPixelRatio();
composer.setSize(width * pixelRatio, height * pixelRatio);
์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰