SMAA weights not working as expected

[AdrianFahrbach]

Hey there!

I'm currently trying to improve the antialiasing of a webgl Three.js app. We are using the SMAAEffect.
I've tried playing around with the settings a bit by copying the tweak panel from the demo, but no matter what I try, the effect of SMAA is always very little to not visible at all.

To me, it looks like my edge detection is fine, but the weighted result that I get are "broken". If I compare my results to what I see in the interactive demo, then it feels like I'm doing something wrong.

Do you have an idea what I could be missing? Or is this maybe even expected, since my scene is quite dark and my edges are relatively small.
My Three.js knowledge is quite limited, so any input is highly appreciated!

screencast.mp4

[vanruesc]

Hi, the weights seem to be calculated correctly and the detected edges seem to be smoothed as expected.

If you're talking about the broken lines and shimmering in motion, then that's not something SMAA can fix. You'd need to use MSAA to get more stable highlights in a dark scene like this. TAA would likely also yield better results in this case, but that's currently not included in postprocessing.

For SMAA I'd recommend sticking to the color edge detection with depth-based predication. Use a low predicationThreshold around 0.0002, a predicationStrength of 1 and a predicationScale of 2. Also, make sure to optimize your depth buffer range by setting the camera's near plane to something like 0.3 or 1.0. This increases the accuracy of the predication. The far setting doesn't matter much for this.

[AdrianFahrbach]

Makes sense. I switched to MSAA and it works perfectly.
Thank you so much! Awesome to see that you are always responding to the discussions here with such a technical depth!