Download

Weird stains while rendering thin lines

Hi guys, asking for some help since cannot solve the problem myself. I tried different approaches but neither did help me. So maybe you know.

I am trying to implement a small 3d-minimap with wireframe-like material. Something like this:
radar.png

To make this I created a custom mesh component and applied my material to it. Here is the material. It is very simple:
WireframeMaterial.png

As a result I got the following. Do you see some lines have gaps?
MinimapCustomMesh.png
I outlined them here:
MinimapCustomMesh_hl.png

for a moment I thought that it might have been some problem with small textures (each square on the radar is a texture) and decided to redo everything with just batch lines.
Unfortunately I got the similar picture. It’s not so obvious but still far from good:
radar_with_lines.png

And again with stains outlined:
radar_with_lines_hl.png

Do you know what the problem could be? So it means it’s not a problem with texture or material but just with UE rendering lines? But at the same time I believe in HUD (2D Viewport) this would look much better.

p.s. Also left a question on the answerhub: https://answers.unrealengine.com/questions/265237/cannot-get-rid-of-stains-while-rendering-thin-line.html

It’s normal aliasing artifacts, it can show up anywhere you have lines like that. It’s not specific to Unreal Engine or game engines. Here’s a photography down sampling example, AntiAliasing | Scientific Volume Imaging Aliasing - Wikipedia

Thanks, ZacD. Is there anything I can do here?

You could try to change the post process setting to “FXAA” or “TemporalAA” -> probably it will fix the problem :slight_smile:

fighter5347, No, it does not fix the problem, but thanks anyway :slight_smile:

This is a typical moire pattern. You can actually see them in real life as well when you look through things like window screens at certain angles/distances.

Normally for something like this I would try to solve it by using math to define the line thickness and using DDX/DDY to alter the line thickness and softness a bit. There is an example of that going on in the Math_Hall content example level on the graph material but that is fairly complex.

If you look at “compute filter width”, that function can give you something useful to use to control your line sharpness.

In general though, drawing lots of small lines close together is just about the hardest thing to make look good.

Thanks a lot, Ryan. Definitely will take a look at Math_Hall example.
But more likely will change the look of the radar.