How to enable antialiasing while using EffectComposer

three.js

Solution

When using `THREE.FXAAShader`, it's necessary to configure the `resolution` uniform of the respective shader. This is demonstrated in the official example and done like so:

var fxaaPass = new THREE.ShaderPass( THREE.FXAAShader );

var pixelRatio = renderer.getPixelRatio();
var uniforms = fxaaPass.material.uniforms;

uniforms[ 'resolution' ].value.x = 1 / ( window.innerWidth * pixelRatio );
uniforms[ 'resolution' ].value.y = 1 / ( window.innerHeight * pixelRatio );

You have to execute this code when setup your post-processing and in your `resize` event listener. Otherwise FXAA will break if the user resizes the browser window.

`three.js R102`

Problem

When using the EffectComposer from three.js it seems that the native antialiasing gets lost. The renderer is set with antialiasing: true; however, the result is full of janky edges. I tried to reduce the aliasing using the FXAA shader but it just doesn't have the quality that native antialiasing provides. Can somebody please suggest a solution?

Original source