Question Antialias Grid Shader?

I made a procedural grid shader following this tutorial, but at low angles and far distances, the grid lines look very jagged. This is as opposed to a grid texture of the same cell size (with tiling) which looks smooth regardless of angle.

How can I add aliasing to the grid to avoid this problem?

Attached is an image of the line generation nodes. These get multiplied together, then multiplied with desired colors.

Any help would be appreciated. Thanks!

 

A screenshot of the result will help if you can get it.

You might try reducing the contrast (lerping towards no grid lines) over distance and see how that looks, maybe combining it with a subtle tone shift on the ground material. At a certain point the grid lines are no longer individually distinct and are instead averaged into the surface they sit on. This would only account for the distance effect, not the glancing effect unfortunately. Might be able to use a fresnel to filter for those, but at that point you're getting away from the effect you may have wanted.

Texture grids avoid the same aliasing by adjusting their mipmaps. The equivalent for a custom grid might be to expand your smoothstep while reducing its intensity until, as I described above, you're just adding an averaged tone over everything.

 

Thanks for the info here! I'm still relatively new to shader graph, so the things you're saying don't quite click with me haha!
I'll have to look more into it, as I just followed a tutorial, and am beginning to understand shader graph further.

Additionally, here are comparison screenshots for reference:

Shader based grid:


Texture Based Grid:


Thanks again!

 

It looks like you're getting aliasing at all distances with the procedural option which is unusual. Have you confirmed that your overall aliasing settings are enabled in your Render Pipeline Asset? The texture sample node will automatically apply mipmaps over distance (unless you override it with the LOD texture sample node).

That tutorial looks like it only fades the grid in one direction, and there's no way to remove the thicker center line due to the way they set up their grid. If you're looking for a problem solving challenge, you should be able to make a version that doesn't crease at zero, with values that bounce between 0 and 1 rather than climbing from 0 to 1, jumping to 0, then climbing again. You could extend it by adding a set of subdivisions using the same process so you have a more controlled hierarchy on the grid, and you could even add back in the origin grid using another layer.

I usually draw my math out on paper for things like this.

 

I appreciate you're reply!

I actually like the double center line here, and the graph doesn't use Sample Texture 2D at all. I definitely have AA enabled in the render pipeline asset. Attached is a screenshot.

Thank you!

 

This is different type of antialias, it does not affect surface area, but mesh edges. You need to enable post processing in the camera and setup antialias there. However this can't fix your problem anyway, as your problem (if I understood correctly) is fading lines over distance, and this is caused by lack of mipmaps.

 

Thank you for your reply, and I apologize for the delay in mine.
Is it possible to enable mipmaps for procedurally generated lines?

 

Not much as you "generate" those lines, while mipmap is just smaller version of texture.
I never tried to solve such a problem, so I am unable to tell you what exactly you should do. What you can try is to introduce some kind of smooth line extrusion with smoothstep as Ben_at_Work suggested in one of the previous posts. Alternate solution might be some kind of distance fade to single color or you could simply blit this grid into render texture and use that instead. The first solution would be the best obviously as it would "simulate" mipmaps.

For the context, the problem is that sampler "jumps" between texture texels when it's surface is far away. Imagine texture 64x64 to be size of single pixel on the screen, what color should be returned for that pixel and what if you move camera just a tiny bit? There is not enough precision and you end up with some kind of flickery random pattern.

Long story short you would need to find a way to blur out your grid with distance.

 

Thank you for the explanation, that makes a lot of sense! I'll look into smoothing out or blurring the lines, as that seems like the most straightforward approach, without using actual textures.