I’m rendering 200x200 boxes using a BufferGeometry. The problem is, when zooming out a random pixel pattern appears. I have no clue where to look. I’ve tried changing renderer values (depth), material values (type, depth, etc), camera values (near/far). After some hours I’m still clueless, but maybe someone here has an idea what might be the cause for this? Video attached.
Do you mean a box of that dimension or a grid of 200x200 boxes? What’s the depth of the box/boxes? Could be either depth fighting or more likely an aliasing issue as there’s a moire pattern and no strong random flickering.
It’s a grid of 200 times 200 boxes, each box has a height/width/depth of 1. Aliasing, okay will look into this and see if it solves. Thank you!
Edit: I had WebGLRenderer antialias: false, setting it to true seems to reduce the issue, but not fully resolve.
If they’re super thin you should rather use planes, make them thicker or as a raw hammer method enable logarithmicDepthBuffer (but it’s no magic bullet, z fight issue will just be more less an issue)
They’re not really thin. LogarithmicDepthBuffer indeed solves this moire pattern - however now there are individual small dark pixels. (if the boxes are all white and aligned without any gaps, there should be no other color than the box color, or?). Thank you your help!