FXAA < WebGLRenderer({ antialias: true })

Hey, I compared the FXAA shader pass with the standard WebGLRenderer antialiasing here https://jsfiddle.net/cLq6t4s7/7/

You can see that the FXAA is worse than the standard antialiasing. Why is that? I didnt find much in the WebGLRenderer.js about how it works.

How can I improve FXAA? I want to use postprocessing but still have nice edges. I also worked with SSAA, but it is way slower


SMAA is an option. The postprocessing package includes an SMAA pass, as well.

Another option is using a multi sampled render target with effect composer but some postprocessing passes that use their own internal render targets will not get AA applied.


I realized the same thing a few days ago. The FXAA example makes you think it does a better job than it really does :smiley:

1 Like

Thanks man, Im gonna give SMAA a chance

Uhh nice! I havent come across that lib before. Looks very promising to me.
Also the SSAO is quite fast compared to the one in the THREEjs examples.

1 Like

The default AA technique of WebGL is MSAA. FXAA uses a totally different approach which explains the different results.

If you are interested in this topic, I suggest you google a bit since there are many interesting comparisons about AA approaches.

1 Like

I haven’t started googling yet, but thinking about it and adding 1 to 1… Would it be possible to use MSAA as a postprocessing pass? Or is that basicly happening here? Multisampled render target

Correct. The idea is to use WebGLMultisampleRenderTarget.

1 Like

Short conclusion after testing:

FXAA and SMAA are quite similar from the AA quality and performance (One is more blurry and the other loses some egdes).

Using WebGLMultisampleRenderTarget works really great. The quality is equal to WebGL default AA, but I do notice a performance drop.

Thanks alot guys!

Keep in mind that MultisampleRT requires WebGL2 capability, so it won’t work on iPhones, MacOS Safari, or IE.