How to enable antialiasing while using EffectComposer

Question

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?

Answer 1

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