Postprocessing: Normal Effect introduces aliasing

[bodo22]

sandbox example: https://jsfiddle.net/4gjwraLv/20/

While playing around i noticed that when setting antialias: true in the WebGLRenderer, and using an effect which effectively does nothing (see the NormalEffect in the sandbox), antialiasing seems to get turned or something else happens.

press c to toggle using the composer vs rendering without post processing.

Does anyone have an idea why this is happening?

[vanruesc]

Hi,

the default antialiasing doesn't work on offscreen render targets in WebGL 1. WebGL 2 supports multisampled render buffers but three.js doesn't fully support that context yet.

It's recommended to set antialias to false for performance reasons and use the SMAAEffect instead.
Even if multisampled render buffers were available, SMAA would probably still be the better choice.

[bodo22]

Thanks a lot for clearing that up and the explanation!

While exploring some more i noticed that the SMAA filter doesn't seem to work when using a webgl2 context. Is this something having to do with three.js or postprocessing itsself? I'd be happy to contribute if you give me a direction to investigate :)

sandbox example: https://jsfiddle.net/cvbt9ys5/ (switch between 'webgl' and 'webgl2' at line 93)

[vanruesc]

While exploring some more i noticed that the SMAA filter doesn't seem to work when using a webgl2 context.

Thanks for pointing that out! After enabling shader error checking with renderer.debug.checkShaderErrors, you can see that the issue is caused by SMAA. The SMAAWeightsMaterial defines a custom function called round, but that function already exists in GLSL 1.30.

We could use a preprocessor conditional to check the version before declaring the custom round method. We could also avoid the round function by inlining the code since the method is only called once anyway.

If you'd like, you can send a fix. Otherwise, I'll do it tomorrow or sunday.

Btw, this library hasn't been tested with WebGL2 yet. When three dives deeper into WebGL2, postprocessing will follow.

[vanruesc]

Should be fixed in [email protected].

Note that BokehEffect, RealisticBokehEffect and GodRaysEffect currently don't work in a WebGL2 context. There seems to be some issue with frame buffer formats.