Strategies for getting rid of "moiré" patterns on meshes

I’ve got this problem that you can see in the attached image. This is a view of market data. It’s really just an array of boxes that I extrude in height. At certain angles, these bad moiré patterns appear and seem to animate, at the edges of the columns.

What might I do to fix this? I’ve tried FXAA and it doesn’t help. Maybe something to do with the lighting?

Hi.

Long shot ideas. Do you have texture on the models (maybe disable mipmap creation if do). Do you have shadowGenerator in the scene (improper config of the shadowGenerator could create weird effects)

You can increase the number of
msaa samples in the render pipeline

Im not sure, but i think the blocks being smaller than a pixel could be a contributing factor

1 Like

Great ideas, but no, these are just meshes with a PBRMaterial on them. No textures.

Also no shadow generator, but good thinking.

I think you may be on to something about “smaller than a pixel” issues here. It looks way better in full screen. It’s only when shrunk down to a smaller window in our React app that the problem manifests.

I’ll check out the Default Pipeline and see if I can adjust MSAA there.Thanks.

1 Like

I managed to make it a lot better just by adjusting each cubes z scale, so that I could tweak how it intersects with the one behind it. This is with a 1.05 scaling factor.

this way, each cube is just a little bit longer so the mesh faces interact a little differently at the edges.

Also, these are not perfect boxes. I made my own cube with beveled edges. [Image Attached]

1 Like

Wow, I just added the default pipeline, set to 4 samples and msaa enabled…

much better! Thank you.

6 Likes

Hey there @JamesAndrew (happy forum anniversary day btw!), was your question answered or would you like any further help? :smiley:

Oh hey. I missed this until now. Thank you. Yeah, it’s looking a lot better with MSAA enabled.

1 Like