Post-processing causes a bad case of Moiré interference patterns

[AlexClarke]

Hi All, I am experiencing a problem where adding post-processing passes causes an extremely obvious Moiré effect over much of my scene. I originally thought the problem was caused by outlinePass but I see the exact same problem with unrealBloomPass and I have edited this question accordingly. I see the same effect regardless of the parameters I give to my post-processing passes.

I have attached photos below to show how bad it can get, although it is worse on some models than others. It is most visible in the GLTF models but it can also be seen over the geometries made from ThreeJS primitives. I have also put together a JSFiddle so you can my code, although I have not yet managed to get the GLTF model to load via jsfiddle.

Fig. 1: Model with outlinePass showing bad Moiré effect.

Fig. 2: Model without outlinePass showing no Moiré effect.

I suspect the root of the problem is anti-aliasing although I cannot find a solution. Anti-aliasing on the renderer is set to true and I have tried using FXAA as per these instructions which did not fix it (although I could see that it was working). I have also tried modifying the composer in the manner described in the answers to this thread which did not correct my problem. This problem is not seen when using the normal renderer with anti-aliasing set to false.

The problem may well be with the models themselves as they are very detailed models of rock outcrops made with Agisoft Metashape. However, I am at a loss as to what to do to fix them and the whole point of the project is display these particular models.

I am hoping that there is a fix for this problem as the Moiré effect is so bad as to make the models unusable and some post-processing is important for my intended design. Thank you in advance for any advice you can give me.

[Usnul]

First of all, I appreciate the screenshots and the fiddle. It helps a lot. However, although I do see a lot of artifacts, I fail to spot the moire patterns. I would hazard a guess that your problem is not in the post-processing passes, but rather in compositing. That is - the outline pass works fine, but when you try to draw the results on top of your original scene - shenanigans ensue.

Your background mesh looks a little suspect too, that is - it seems to be full of holes. This might have some interactions in compositing, as that area would be full of small holes.

One thing I would suggest is to try and run the postprocess pipeline that you have, except remove the outline pass. See what you get. That way you could more easily isolate your problem.

Another thing - I would suggest using a MultiSample render-target instead of a normal one, that would give you free AA in essence.

Other than that - I would probably be able to tell more from a higher-resolution or more zoomed in screenshot. As it stands - I see artifacts, but I can’t tell what they are as they are too small and I have no understanding of the geometry underneath.

Hope that helps a bit.