Antialiasing disappears when using EffectComposer in Three JS

Question

When I apply any Pass to EffectComposer http://prntscr.com/u0io3g I get teeth on the edges, when without extra passes everything is smoothed out http://prntscr.com/u0ipbt

Mugen87 · Accepted Answer · 2020-08-16 17:28:28Z

5

The default anti-aliasing of WebGL does only work if you directly render to screen (or the default framebuffer). When using EffectComposer, you have two options:

Apply an FXAA pass at the end of your pass chain.
Create the EffectComposer with instances of THREE.WebGLMultisampleRenderTarget (does not work with WebGL 1).

Below are two examples that demonstrate the usage of FXAA and multisampled render targets with three.js.

https://threejs.org/examples/webgl_postprocessing_fxaa.html https://threejs.org/examples/webgl2_multisampled_renderbuffers

answered Aug 16, 2020 at 17:28

Mugen87

31.2k4 gold badges34 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Antialiasing disappears when using EffectComposer in Three JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related