Why is my grid ugly?

Hello,

I am the biggest noob when it comes to rendering, so I’m hoping someone can help me with this:

v=ZK1fyG1ayj8

So I have this grid in my project, where every tile has a mesh with a texture on it. That texture is basically transparent except for the borders which have those green lines.

But they don’t render great. If you watch the video, you can see that it kinds of flickers in the distance, and when rotating the camera, particularly on the edges of the screen. It gets even worse when I blend to the top view camera, where the whole grid flickers.

As I said I know next to nothing about rendering, chances are I’m not even in the right forum, but I’d like to know what’s causing this and how to fix it.

Thanks a lot for any help!

Motion blur, or an artifact from Temporal AA (ghosting), looks like, though with Youtube compression artifacts it’s difficult to tell. Do a diagnostic; try disabling all AA (I know it won’t look good) and motion blur and see if the localized fuzziness or blurring is still there or not.

So disabling motion blur didn’t do anything, but Temporal AA did… a lot. No more of that weird flickering! Thanks a lot!

But as you said, it’s ugly. I’ve tried the two other Anti Aliasing methods but I honestly saw no difference with No AA at all. Is there a way to have some but not get the fuzziness back?

Not really. Temporal AA is one of those things that comes with the territory of deferred rendering; it’s got its issues, but in a deferred environment it’s about the best you’re gonna do. If you want actual, high quality AA without ghosting, you need to use MSAA… and using MSAA in Unreal Engine 4 means switching from the Deferred Renderer pipeline to the Forward Renderer pipeline, which is a nontrivial task with a lot of implications in terms of what your shaders can and cannot do. If you’re early on, it may be worth looking into, but be aware that it places a lot of constraints on what you can do with your shaders.

Either that, or you just supersample. Run the entire game at 200% or 400% resolution. That’s the least performant (but best-looking) approach.

Since neither switching to Forward Rendering for MSAA nor doubling/quadrupling your native resolution is likely practical, you might have a look at some of the parameter data that can be tweaked in the Temporal AA algo to minimize ghosting.

Ok, thank you. I’ll do some research cause I don’t really have a notion of, say, what Deferred and Forward Renderers are. This and tweaking the Temporal AA algo (which I need to find) seem like daunting task for someone who knows next to nothing about rendering… I’ll still investigate, but I’ll also try that resolution thing.

I think you really shouldn’t be doing the grid as a huge collection of square static meshes. You could do the grid in the material using math and anti-alias it there.

Do you have a tutorial you could point me to? Cause I’m not sure what you mean :smiley: And I know I don’t know how to do that.

I changed to using MSAA but it does not look any better unfortunately, at least from that top view camera, which is what I’m working on at the moment :frowning:

Did you actually switch to Forward Rendering? MSAA is the equivalent of doing nothing if you’re in Deferred because it’s simply not active / doesn’t work in the deferred pipeline.

By the way, how are you generating those green lines? You mentioned a texture; have you tried either (a) messing with the mip settings, or (b) skipping the texture entirely and calculating the lines using basic shader math? I’ve found when doing certain radial mapping functions that even with ultra-high-resolution textures to use as maps, I get much cleaner results at a wide range of view distances by simply doing the math inside the shader itself, rather than using a texture lookup. For what you’re doing, you might try a material which procedurally determines where to switch from the black face to the green edge line.

You could use DrawDebugLines() and just draw the grid in C++. The lines I’ve seen it draw look crisp.

What is your material setup? For Post Process Material artifacts it’s sometimes good to move it to Before Tonemapping in the Material’s settings.

[ATTACH=JSON]{“data-align”:“none”,“data-size”:“medium”,“data-tempid”:“temp_215837_1615566837323_546”}[/ATTACH]
https://forums.unrealengine.com/core/image/gif;base64

But yours is probably not PP, but rather a normal material on some Plane object, right? Is it Translucent, or Masked? Probably should be Masked, but for Translucent perhaps one of these would help? A shot in the dark.

[ATTACH=JSON]{“data-align”:“none”,“data-size”:“medium”,“data-tempid”:“temp_215838_1615566830273_921”}[/ATTACH]
https://forums.unrealengine.com/core/image/gif;base64

Other than that, I agree with RhythmScript’s suggestions to try messing with the texture’s settings (compression, MipGenSettings etc. - blur/sharpen/no mips) or to try the procedural approach in the Material (if the grid is World Space-based then it’s easy to do procedural grid with the Absolute World Position node and some modulo/frac/if operations).

A fast Youtube search brought up this tutorial, maybe this helps you to solve your grid problem:

v=Q4AOmT9aOEM

I had problem with objects disappearing in distance then turned off AA and got the pixels seen. the picture is with AA on each 3

Hello, and thanks a lot for your help!

I’ll try what is suggested but again, I’m starting with zero knowledge of that kind of things, so understanding your advice will take me some time.

@RythmScript: I did switch to Forward Rendering, I did not just selected MSAA in the list (as you said, that was doing nothing).

My material is a .png texture imported in Unreal and applied on the tile actor, on a plane mesh. I was following a tutorial and the guy was doing this, so I did the same. The png already contains the translucency, but in the material I think it is masked (I’ll check)

I actually got some better results with changing that texture and made the lines a bit bigger. But I also think my top camera might be set too high to render that kind of thing properly.

EDIT: @Suthrel: I actually know this tutorial, I tried it, but for some reason, I could not really expand it to a bigger grid (unreal would become very VERY slow). Also, I’m currently using tiles as actors in order to store some data and be used by pathfind.

I highly recommend trying to suss out a procedural texture for this, I think it will give you better results.

Pic related is an example starting point; this is based on the UE4 native cube mesh, if your mesh UVs are different (i.e. not 6 overlapping UV faces) you might use a WorldAligned node to get similar results.

EDIT: the reason I recommend this is that when using actual texture samples, mipmaps are the enemy of precision. There’s just a lot of stuff that can be unexpected when you’re dealing with textures because UE is trying, very hard, to make a mapped image look good under a range of angles and distances, and when you’re using the texture as something other than an image (i.e. as a mask to define stuff) it ends up causing issues that you need to fiddle with a lot of parameters to solve. Sometimes texture masks are unavoidable but for very simple geometric constructions like squares and circles, relying on shader math to do the heavy lifting produces results which, because they are procedural, ALWAYS look right, no matter the view angle or distance.

Ah thank you, I didn’t know I could do that in that graph. I will give it a try :slight_smile: And again, thanks a lot for taking the time to help me.