Three.js: OutlinePass 2 pixel рдкрд┐рдХреНрд╕реЗрд▓ рдЕрдиреБрдкрд╛рдд рдХреЗ рд╕рд╛рде рдХрд╛рдо рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИ

рдХреЛ рдирд┐рд░реНрдорд┐рдд 21 рдЕрдкреНрд░реИрд▓ 2017  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: mrdoob/three.js

рдЖрдЙрдЯрд▓рд╛рдЗрди рдкрд╛рд╕ рдЙрджрд╛рд╣рд░рдг рдореЗрдВ, рдкрд┐рдХреНрд╕реЗрд▓ рдЕрдиреБрдкрд╛рдд 1 рдкрд░ рд╕реЗрдЯ рд╣реИред
https://github.com/mrdoob/three.js/blob/master/examples/webgl_postprocessing_outline.html#L161

рджреГрд╢реНрдп рдЕрд╕реНрдкрд╖реНрдЯ рд╣реИ рдФрд░ рдпрджрд┐ рд╣рдо рд▓рд╛рдЗрди рдкрд░ рдЯрд┐рдкреНрдкрдгреА рдХрд░рддреЗ рд╣реИрдВ рдФрд░ рдбрд┐рд╡рд╛рдЗрд╕ рдХреЗ рдкрд┐рдХреНрд╕реЗрд▓ рдЕрдиреБрдкрд╛рдд рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╣реИрдВ, рддреЛ рджреГрд╢реНрдп рдХреЛ рдирд┐рдореНрди рд╕реНрдХреНрд░реАрдирд╢реЙрдЯ рдХреЗ рд░реВрдк рдореЗрдВ рдмрд╛рдПрдВ рдирд┐рдЪрд▓реЗ рдХреЛрдиреЗ рдореЗрдВ рдирд┐рдЪреЛрдбрд╝рд╛ рдЬрд╛рддрд╛ рд╣реИ:
image

рддреАрди.рдЬреЗрдПрд╕ рд╕рдВрд╕реНрдХрд░рдг
  • [] рджреЗрд╡
  • [рдПрдХреНрд╕] рдЖрд░ реорек
  • [] ...
рдмреНрд░рд╛рдЙрдЬрд╝рд░
  • [ ] рдЙрди рд╕рднреА рдХреЛ
  • [рдПрдХреНрд╕] рдХреНрд░реЛрдо
  • [ ] рдлрд╛рдпрд░рдлреЙрдХреНрд╕
  • [ ] рдЗрдВрдЯрд░рдиреЗрдЯ рдПрдХреНрд╕реНрдкреНрд▓реЛрд░рд░
рдУрдПрд╕
  • [x] рдЙрдирдореЗрдВ рд╕реЗ рд╕рднреА
  • [ ] рдЦрд┐рдбрд╝рдХрд┐рдпрд╛рдБ
  • [ ] рдореИрдХ рдУ рдПрд╕
  • [] рд▓рд┐рдирдХреНрд╕
  • [ ] рдПрдВрдбреНрд░реЙрдпрдб
  • [] рдЖрдИрдУрдПрд╕
рд╣рд╛рд░реНрдбрд╡реЗрдпрд░ рдЖрд╡рд╢реНрдпрдХрддрд╛рдПрдВ (рдЧреНрд░рд╛рдлрд┐рдХреНрд╕ рдХрд╛рд░реНрдб, рд╡реАрдЖрд░ рдбрд┐рд╡рд╛рдЗрд╕, ...)

рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА

рдРрд╕рд╛ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ EffectComposer рддрд░рд╣ рд╕реЗ рд╣реИрдВрдбрд▓ рдирд╣реАрдВ рдХрд░рддрд╛ pixelRatio рдЬрд┐рд╕рдореЗрдВ рд╕реЗрдЯ WebGLRenderer рдЬрдм рдмрдирд╛рддрд╛ рд╣реИ WebGLRenderTarget ред

рдореИрдВ рдЕрдЧрд▓реЗ рдХрд╛рдордХрд╛рдЬ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХрд╛ рд╕реБрдЭрд╛рд╡ рджреЗрддрд╛ рд╣реВрдВ:

  1. effectFXAA рд▓рд┐рдП рдХрд╕реНрдЯрдо рд╕реЗрдЯ рдЖрдХрд╛рд░ рд╣реИрдВрдбрд▓рд░ рдмрдирд╛рдПрдВ:
effectFXAA.setSize = function(width, height) {
    this.uniforms.resolution.value.set(1 / width, 1 / height);
};
  1. рдЖрд░рдВрднреАрдХрд░рдг рдФрд░ рд╡рд┐рдВрдбреЛ рдЖрдХрд╛рд░ рдмрджрд▓рдиреЗ рдХреЗ рджреМрд░рд╛рди composer.setSize рдХреЛ width рдФрд░ height рд╕реЗ рдкрд╣рд▓реЗ рдЧреБрдгрд╛ рдХрд░рдХреЗ рдХреЙрд▓ рдХрд░реЗрдВ:
var size = renderer.getSize();
var pixelRatio = renderer.getPixelRatio();
composer.setSize(width * pixelRatio, height * pixelRatio);

рд╕рднреА 3 рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

/рдкрд┐рдВрдЧ @spidersharma03

рдореИрдВ рджреЗрдЦреВрдВрдЧрд╛

рдРрд╕рд╛ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ EffectComposer рддрд░рд╣ рд╕реЗ рд╣реИрдВрдбрд▓ рдирд╣реАрдВ рдХрд░рддрд╛ pixelRatio рдЬрд┐рд╕рдореЗрдВ рд╕реЗрдЯ WebGLRenderer рдЬрдм рдмрдирд╛рддрд╛ рд╣реИ WebGLRenderTarget ред

рдореИрдВ рдЕрдЧрд▓реЗ рдХрд╛рдордХрд╛рдЬ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХрд╛ рд╕реБрдЭрд╛рд╡ рджреЗрддрд╛ рд╣реВрдВ:

  1. effectFXAA рд▓рд┐рдП рдХрд╕реНрдЯрдо рд╕реЗрдЯ рдЖрдХрд╛рд░ рд╣реИрдВрдбрд▓рд░ рдмрдирд╛рдПрдВ:
effectFXAA.setSize = function(width, height) {
    this.uniforms.resolution.value.set(1 / width, 1 / height);
};
  1. рдЖрд░рдВрднреАрдХрд░рдг рдФрд░ рд╡рд┐рдВрдбреЛ рдЖрдХрд╛рд░ рдмрджрд▓рдиреЗ рдХреЗ рджреМрд░рд╛рди composer.setSize рдХреЛ width рдФрд░ height рд╕реЗ рдкрд╣рд▓реЗ рдЧреБрдгрд╛ рдХрд░рдХреЗ рдХреЙрд▓ рдХрд░реЗрдВ:
var size = renderer.getSize();
var pixelRatio = renderer.getPixelRatio();
composer.setSize(width * pixelRatio, height * pixelRatio);
рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕

рд╕рдВрдмрдВрдзрд┐рдд рдореБрджреНрджреЛрдВ

jens-duttke picture jens-duttke  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

zsitro picture zsitro  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

danieljack picture danieljack  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

makc picture makc  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

stonexjr picture stonexjr  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ