Three.js: The FXAA example should show how to use the effect for post processing

[looeee]

FXAA is often recommended for use instead of default MSAA to increase performance.

However, the current example only shows how to apply it to a png image.

It's useful to have an example that shows how to apply a shader to an image, but I think it would be better to do this with one of the other effects instead.

[Mugen87]

FXAA is often recommended for use instead of default MSAA to increase performance.

Um, it is actually recommended because you have to use a post-processing AA if you want any form of anti-aliasing with WebGL 1 when using RTT. The general performance of FXAA compared to MSAA is not necessarily better. This depends on the GPU.

Anyway, I agree it's better demonstrate FXAA with a rendered 3D scene.

[looeee]

Well, I meant that I've seen it recommended in a few places as a general WebGL performance improvement, not related to three.js specifically. For sure it depends on the graphics card, but it may be the case that for people who don't have the resources to configure their apps for lots of different devices it will on average give better performance to use FXAA or SMAA.

I'm half way through building a performance test for all the available AA techniques, I'll post it here when I'm done so that we can check some actual numbers.

[Mugen87]

I'm half way through building a performance test for all the available AA techniques, I'll post it here when I'm done so that we can check some actual numbers.

Interesting 👍

[looeee]

OK, here it is:

https://v8yrwozy35.codesandbox.io/

What I've noticed so far -

Laptop (980m):

There's no discernible frame rate difference between standard renderer with or without AA, composer with no AA, SMAA, or FXAA, even when I add enough birds to make the frame rate drop to <20fps.

As expected, SSAA and TAA cause a considerable frame rate drop.

FXAA looks noticeably worse than other techniques - basically the same as applying a mild blur filter, to me at least.

Phone (Adreno 506):

Adding even a few extra birds kills my framerate, so these are single bird figures. My phone has a pixel ratio of 3 so that probably doesn't help.

• renderer no AA: 60fps
• renderer with AA: ~40fps

• composer no AA: ~60fps, maybe drops a couple of fps

• composer SSAA, sample level 2: ~15fps

• composer SSAA, sample level 4: ~4fps

• composer TAA, sample level 2: ~16fps

• composer TAA, sample level 4: ~4fps

• composer FXAA: ~33fps

• composer SMAA: ~22fps

Conclusion

Stick with built in AA if not doing post-processing.
Using FXAA when post processing gives best performance, but doesn't look great.

[peteroupc]

I suspect that the denser the device displays pixels (say, in pixels per inch), the less likely antialiasing will help.