FXAA < WebGLRenderer({ antialias: true })

[Fluqz]

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

Thanks

[gkjohnson]

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.

[marquizzo]

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

Changing renderer.antialias on the fly?

I wish all Anti-aliasing examples would use the same scene as that WebGL2 MSAA demo so people could compare apples to apples across all AA options. I remember thinking “Hey this FXAA looks pretty good!” but when I tried it on my project it still looked pretty jagged. It was actually the triangle rotation that gave the impression of smoothness; when you look at a single frame you can still see the steps: [fxaa]

[Fluqz]

Thanks man, Im gonna give SMAA a chance

@gkjohnson

The postprocessing package includes an SMAA pass, as well.

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.

[Mugen87]

@Fluqz

You can see that the FXAA is worse than the standard antialiasing. Why is that?

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.

[Fluqz]

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

[Mugen87]

Correct. The idea is to use WebGLMultisampleRenderTarget.

[Fluqz]

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!

[marquizzo]

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