Moiré patterns when using flatShading and zooming in

[cocoazack]

Hi,

When I enable material.flatShading = true, I notice strong moiré patterns on surfaces when zooming in with an orthographic camera. With flatShading = false the problem does not occur.

Here is a minimal example on CodePen:
https://codepen.io/cocoazack/pen/xbwzmKr

I also attached comparison screenshots below (flatShading on vs off) showing the moiré effect when zoomed in.

Question:

• Is this expected behavior of flat shading?

• Is there a recommended way to reduce or avoid these moiré artifacts?

Thanks in advance!

[towrabbit]

yes. it is expected behavior of flat shading. especially when zooming in too much with OrthographicCamera. when using flatShading. it use viewPosition and dFdx() dFdy() functions to calculate normal. if the camera zoom is too big. it could not handle the precision loss. it is similar to z-fighting issue.

u could keep setting flatShading to true, but limite the zoom value in range that won’t show that cases.

or just make flat normal in geometry. make every face seperate.

oh here is example that could show that moiré artifacts

I made the zoom value large and make geometry very small

https://codepen.io/towrabbit/pen/NPGBrOo