# FXAA \< WebGLRenderer({ antialias: true })

**URL:** <https://discourse.threejs.org/t/fxaa-webglrenderer-antialias-true/21175>\
**Category:** Questions\
**Tags:** antialiasing\
**Created:** [December 2, 2020, 12:07pm UTC](https://discourse.threejs.org/t/fxaa-webglrenderer-antialias-true/21175 "2020-12-02T12:07:58Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Fluqz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fluqz/32/6279_2.png) [@Fluqz](https://discourse.threejs.org/u/Fluqz)\
**Post date:** [December 2, 2020, 12:07pm UTC](https://discourse.threejs.org/t/fxaa-webglrenderer-antialias-true/21175/1 "2020-12-02T12:07:59Z")

</div>

Hey, I compared the FXAA shader pass with the standard WebGLRenderer antialiasing here [https://jsfiddle.net/cLq6t4s7/7/](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

---

<div class="post-metadata">

**Author:** ![gkjohnson](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gkjohnson/32/2298_2.png) [@gkjohnson](https://discourse.threejs.org/u/gkjohnson)\
**Post date:** [December 3, 2020, 5:09am UTC](https://discourse.threejs.org/t/fxaa-webglrenderer-antialias-true/21175/2 "2020-12-03T05:09:34Z")

</div>

[SMAA](https://threejs.org/examples/?q=saa#webgl_postprocessing_smaa) is an option. The [postprocessing package includes an SMAA pass](https://vanruesc.github.io/postprocessing/public/demo/#antialiasing), as well.

Another option is using a [multi sampled render target](https://threejs.org/examples/?q=aa#webgl2_multisampled_renderbuffers) with effect composer but some postprocessing passes that use their own internal render targets will not get AA applied.

---

<div class="post-metadata">

**Author:** ![marquizzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marquizzo/32/25192_2.png) [@marquizzo](https://discourse.threejs.org/u/marquizzo)\
**Post date:** [December 3, 2020, 5:59am UTC](https://discourse.threejs.org/t/fxaa-webglrenderer-antialias-true/21175/3 "2020-12-03T05:59:27Z")

</div>

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?](https://discourse.threejs.org/t/changing-renderer-antialias-on-the-fly/16259/7):
>
> 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](https://threejs.org/examples/?q=aa#webgl_postprocessing_fxaa)!” 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]

---

<div class="post-metadata">

**Author:** ![Fluqz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fluqz/32/6279_2.png) [@Fluqz](https://discourse.threejs.org/u/Fluqz)\
**Post date:** [December 3, 2020, 9:22am UTC](https://discourse.threejs.org/t/fxaa-webglrenderer-antialias-true/21175/4 "2020-12-03T09:22:33Z")

</div>

Thanks man, Im gonna give SMAA a chance

> [@gkjohnson](#):
>
> The [postprocessing package includes an SMAA pass](https://vanruesc.github.io/postprocessing/public/demo/#antialiasing), 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.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [December 3, 2020, 10:08am UTC](https://discourse.threejs.org/t/fxaa-webglrenderer-antialias-true/21175/5 "2020-12-03T10:08:57Z")

</div>

> [@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.

---

<div class="post-metadata">

**Author:** ![Fluqz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fluqz/32/6279_2.png) [@Fluqz](https://discourse.threejs.org/u/Fluqz)\
**Post date:** [December 3, 2020, 10:17am UTC](https://discourse.threejs.org/t/fxaa-webglrenderer-antialias-true/21175/6 "2020-12-03T10:17:44Z")

</div>

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](https://threejs.org/examples/?q=aa#webgl2_multisampled_renderbuffers)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [December 3, 2020, 11:03am UTC](https://discourse.threejs.org/t/fxaa-webglrenderer-antialias-true/21175/7 "2020-12-03T11:03:22Z")

</div>

Correct. The idea is to use `WebGLMultisampleRenderTarget`.

---

<div class="post-metadata">

**Author:** ![Fluqz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fluqz/32/6279_2.png) [@Fluqz](https://discourse.threejs.org/u/Fluqz)\
**Post date:** [December 3, 2020, 11:35am UTC](https://discourse.threejs.org/t/fxaa-webglrenderer-antialias-true/21175/8 "2020-12-03T11:35:45Z")

</div>

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](https://threejs.org/examples/?q=aa#webgl2_multisampled_renderbuffers) works really great. The quality is equal to WebGL default AA, but I do notice a performance drop.

Thanks alot guys!

---

<div class="post-metadata">

**Author:** ![marquizzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marquizzo/32/25192_2.png) [@marquizzo](https://discourse.threejs.org/u/marquizzo)\
**Post date:** [December 3, 2020, 6:00pm UTC](https://discourse.threejs.org/t/fxaa-webglrenderer-antialias-true/21175/9 "2020-12-03T18:00:33Z")

</div>

Keep in mind that MultisampleRT requires WebGL2 capability, so [it won’t work on iPhones, MacOS Safari, or IE](https://caniuse.com/webgl2).