PostProcessing FXAA | edge glitch/blur

Questions
,
1

Hi~ I’m adding FXAA with composer.
This is current issue:
20220806110911

my code:

renderer.setSize( window.innerWidth, window.innerHeight );
...
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );

                const pixelRatio = renderer.getPixelRatio();
				fxaaPass.material.uniforms[ 'resolution' ].value.x = 1 / ( container.offsetWidth * pixelRatio );
				fxaaPass.material.uniforms[ 'resolution' ].value.y = 1 / ( container.offsetHeight * pixelRatio );
 

				composer.addPass( renderPass );
				composer.addPass( fxaaPass );

                function render() {
				renderer.outputEncoding = THREE.sRGBEncoding;
                // renderer.render( scene, camera );
				composer.render();
            }
                function animate() {

				requestAnimationFrame( animate );

				render();

Is there have something wrong? How can I fix it? Thank you~

2

Can you please demonstrate the issue with a live example?

The only thing I can imagine right now is maybe a misconfigured resolution uniform. However, without debugging this is all guesswork.

This line won’t ensure a sRGB encoded output. When using post-processing, you have to apply color space conversion with a separate shader pass. Meaning:

const colorSpaceConversionPass = new ShaderPass( GammaCorrectionShader );
...
composer.addPass( colorSpaceConversionPass );