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.
origin
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.
3 Likes
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.
