Using Post-Processing causes jagged edge on mesh

Hi! I’m new to Three.js and followed this tutorial (three.js example to add a bokeh post-processing to my scene. But when I use composer.render(); to instead of the normal renderer.render(scene, camera); I get some jagged on my mesh as you can see in the image below.The mesh is created by CylinderGeometry.
use bokehpass

When using the composer, you have to manually add an antialiasing pass. There is several of them : FXAA, SSAA, SMAA and TAA. You can also use a WebGLMultisampleRenderTarget.


Thanks for your reply. I tried the SMAAPass, but I have a new problem now. The bokehPass and the SMAAPass were used at the same time, only one of the two works, and I don’t know how to solve this problem.

Did you add the passes to the composer in the right order ?
Also there is this page of documentation that might help you.
If you still have a problem, please demonstrate your issue with an editable example ( jsfiddle, codepen, glitch… )

I didn’t olve this problem. There is my code.

It’s quite unintuitive, but the passes you add first are applied last.

I only moved composer.addPass( bokehPass ) after composer.addPass( aaPass ) :

I’m not sure why SMAAPass before BokehPass cancel the bokeh shader though…

1 Like

Only the last one add to composer works. This phenomenon may not be obvious enough in this example. Anyway, thanks for your help.

Experiencing the same exact problem here.

using BokehPass AFTER SmaaPass:

only BokehPass is in effect.

using SmaaPass AFTER BokehPass:

only SmaaPass is in effect.