Three.js: it appears Serrated when use SAO

[trymoremore]

i use the SAO and set the render as this :

renderer = new THREE.WebGLRenderer({
   antialias: true,       
   precision: "highp",     
   alpha:false       
} );

renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor(0xffffff);
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild( renderer.domElement );

composer = new THREE.EffectComposer(renderer);
renderPass = new THREE.RenderPass(scene, camera);
composer.addPass(renderPass);

saoPass = new THREE.SAOPass(scene, camera, false, true);
saoPass.renderToScreen = true;
composer.addPass(saoPass);

however it appears serrated.
whether the serrated would be appear when using sao,or my setting is something wrong?

[Mugen87]

Can you share a screenshot or a live demo?

You might want to use a FXAA pass at the end of your pass chain, see

https://github.com/mrdoob/three.js/blob/dev/examples/webgl_postprocessing_outline.html#L295-L298

[trymoremore]

it is use SAO and choose Beauty.
it is normal and without SAO
@Mugen87

[Mugen87]

Try an additional FXAA pass for anti-aliasing. Besides, ensure that the size of your effect composer is set correctly. Have a look at the post-processing examples as an orientation.

[Mugen87]

https://threejs.org/examples/?q=postprocessing

[Usnul]

TL;DR: working as intended, limitation of WebGL

this is working as intended. "serrated" effect you are referring to are aliasing artifacts, when you use post-processing - you render not to screen but to a VFB (virtual frame buffer) and WebGL does not support anti-aliasing for this rendering mode, as a result you end up having to use a separate anti-aliasing pass, such as FXAA that @Mugen87 mentioned. There are a few other anti-aliasing shaders available in examples folder that you might want to look at.

[trymoremore]

@Mugen87 @Usnul thank you very much！my problem is slove