CODEWITHSUNDEEP
three.js
Алексей
Алексей

Reputation: 57

Antialiasing disappears when using EffectComposer in Three JS

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

Upvotes: 1

Views: 1174

Answers (1)

Mugen87
Mugen87

Reputation: 31026

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

Upvotes: 5

Related Questions