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
outlinePassshowing bad Moiré effect.
Fig. 2: Model without
outlinePassshowing 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
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.