Option to configure anti-aliasing?

It would be neat to have a component that allows you to adjust anti aliasing options easily, is there anything for this I missed?

Original Post on Discord

by user 103054507105067008

It’s on by default and there’s unfortunately not much more to configure in three.js - what are you looking for?

I got asked by a client if we could ‘turn up the AA’ which isn’t always helpful to hear lol. Just wondered if there were options like 2x, 4x etc and TSAA/FXAA (I might have got those names wrong)

by user 103054507105067008

I believe three simply always does 4x for render textures and the sample count for direct rendering is controlled by the browser, at least in Chrome that’s 8 if I’m not mistaken (but depends on the GPU)

So at least this MSAA setting ain’t something that’s readily available to change.

There are implementations of TSAA/FXAA but same as in Unity depends on the usecase which of these actually help, and depending on platform it’s always a huge performance impact – e.g. on mobile or Quest it’s a full draw pass with compositing and thus pretty much “prohibitively slow”

Here’s an FXAA sample (but they’re comparing to “no AA” which makes it kind of hard to gauge how much it does)
https://threejs.org/examples/?q=fxaa#webgl_postprocessing_fxaa

And pmndrs’ postprocessing lib (which we’re most likely going to use for our postprocessing implementation once it’s more stable) has a SMAA implementation: Antialiasing · pmndrs/postprocessing Wiki · GitHub

.
More often than not, when clients ask for “turn up the AA”, the underlying cause is

  1. complex geometry with super thin geometric features
  2. complex geometry with high reflectivity
    no matter how high you crank whatever AA solution these will look glittery and aliased in a realtime context.

There’s some solutions but they’re very expensive (e.g. Unity HDRP has “geometric antialiasing” which tries to detect small geometric features and reduce reflectivity on them)

.
Some further looking into this for future reference;
There’s a bounty open for ~4 years for TAA in three.js:

and the most promising trace here

Definitely going to track this, thanks for the in-depth explanation of what solutions are around with Three also, what we have works great at the moment

by user 103054507105067008

I think the most important one to look at is this :wink:
Can’t solve everything with layers of tech on top, even if clients would like that, haha

Marking this as answered, makes sense to me!

by user 103054507105067008