Questions about the FXAA shader

Questions
,
1

Hi all,

There is something I don’t understand about the FXAA shader. Sometimes it blurs edges, and sometimes not. On the following screenshot that I took today on https://threejs.org/examples/, the green edge is blurred, but the blue one is not, whereas they seem similar. Is it a bug with the shader, or something expected ? If so why is it expected ?

2020-01-30_111656
2020-01-30_1116561884×1011 505 KB
Untitled-2 Untitled-3

2 Likes
2

Interesting, i see a lot of this going on on my machine, but on the ridge, not the silhouette, which i think makes sense given that the depth differences there may be minor?

I don’t know exactly how this works, but i do notice the shader has some configuration, it just doesn’t seem to be exposed. Different shaders can be compiled with different flags, and while it mentions these arguments as “inputs”, they seem to be hardcoded in the shader:


void main() {
    gl_FragColor = FxaaPixelShader(
    vUv, vec4(0.0), tDiffuse, tDiffuse, tDiffuse, resolution, vec4(0.0), vec4(0.0), vec4(0.0), 0.75, 0.166, 0.0833, 0.0, 0.0, 0.0, vec4(0.0)
    );

The magic numbers 0.75, 0.166 , 0.0833 may affect quality if changed.

2 Likes
3

Is it possible for you to enhance the example in a way so it only shows a single mesh and does not rotate? Such a live example would be helpful for further investigation.

I’ve tried it several times but I’m not able to reproduce on my system. At least not such clear cases like you have marked with blue circles.

1 Like
4

I noticed this too. Maybe it differs based on GPU. The shader code says it was ported from NVidia. It should run the same on every GPU but they might have done something in their driver or hardware that makes it look different.

There’s also quality presets in the shader. Default is 12 and it goes up to 39. I think that has to be changed in the shader code.

1 Like
5

It’s weird, when I visit the page again with the same system and same browser, I don’t see this issue anymore. It’s possible that my computer switched GPU automatically though.

Anyway I’ve made an enhanced example as you suggested @Mugen87, so in case somebody can reproduce it it will be easier to understand what’s happening. repo here

@pailhead thanks for the info about the arguments. I wonder if this issue came from the shader actually, or from my system.

edit: just tested again with both integrated graphics and my NVidia card, but I can’t reproduce.

1 Like
6

image
image1490×706 7.54 KB

Thanks for the test case!

As mentioned in my previous post, the result looks as expected (left with FXAA, right without). However, I’ve tested this on a 5K screen so the aliasing is not much visible anyway.

7

What does it look like if you remove the setPixelRatio call? On Retina displays, that example will render at 2x or more resolution and downsize it back to the viewport size. That is antialiasing on top of what the shader is doing. Rendering at 2x or more is actually so effective that you can get away with not using FXAA, even on non-Retina displays. You just set setPixelRatio(2) for all devices. It comes with a large performance hit though.

One thing to keep track of is clearing the browser cache when making changes to the files. If you use setPixelRatio(2), setPixelRatio(1) etc and clear the browser cache between, there is a big difference in quality on non-Retina displays.

8

I tested this on a 5000x1440 or whatever it is, 2080ti. It’s not super dense resolution, i saw a lot of it.

9

I’ve removed setPixelRatio form the example, but still can’t reproduce. So much the better I suppose.