How to render grid properly, especially over distance?

Question

I'm drawing a grid, pretty much like one can see in the Unity editor itself or any 3D-editor, many 3D-related applications and some games. But it doesn't look pretty in my case.

I put a few random objects to make perspective more readable.

Please also see it full-size for clearer view on the artifacts at a distance.

How grid is rendered

• Whole grid is one big plane.
• There is texture representing one cell.
• The cell is multiplicated by tiling.

How there are different line thicknesses on the picture?

It's just 3 planes (each with one grid) with different settings on top of each other. I could leave only one, but 3 grids demonstrate my problem better.

Additional details:

• Mipmap is disabled (grid cells disappear very soon over distance when it's enabled).
• Trilinear filtration and maximum aniso are set (looks worse otherwise).

My guess

I think over distance lines get to be thinner than a pixel, especially under shallow angle (hence “verticals” lines look better than “horizontal”.

Conclusion

Grid rendering is obviously done many times before me, so I presume it should be pretty much wide knowledge how to draw them prettily. I tried to google it, but any query formulation I tried led only to completely unrelated stuff. I have a bit of ideas what I can try, but I believe it would be reinventing the wheel.

P.S.: I'm using Unity engine, but I believe the engine is irrelevant.

---

Plane simple blurring suggested by user29244 and Thebluefish really makes huge difference: Biggest lines are too blurry now, but it's irrelevant, because easy to fix. Note that I had to enable mipmaping if you're trying to reproduce it.

Answer 1

You can't avoid this problem, you can try super sampling to make it less jarring ... but high frequency + high contrast works very bad in quantisize space. I go around this with a very small bit of blurring on the texture, it's counter intuitive but then you have more chance than a pixel pick a blur value and make the line looks antialiased on the texture, assuming you never get close enough that the pixel ratio to texel ration sell the trick.

More: https://elementalray.wordpress.com/tag/artifact/

Answer 2

The way you draw them, you have big cells that contain 10x10 small cells. Would it be acceptable to draw only the big cells when they're at a certain distance from the camera? That would be one possibility. Another would be to actually draw lines, like in a wireframe mesh. They are always exactly one pixel wide. That's all the ideas i have right now.

Answer 3

For this kind of thing, it depends on what your goals is. If you're looking to ensure that lines are 1 pixel wide, then you could draw the grid using lines instead of textured triangles:

However with ensuring that lines are 1 pixel wide, when they're so far away that the individual grid spaces are less than 1px, it will look like a solid:

With your existing solution, you may be able to get better results by setting the texture filtering to Anisotropic with an appropriate ratio.

Another option would be to sub-divide your grid into smaller grid spaces. Using either mipmapping or different textures, you could separate your grid texture into 3 different grid sizes based off distance:

• level 1 - 10x10
• level 2 - 5x5
• level 3 - 1x1

Alternatively, manually blurring the line would be another option. It should make the line "wider" without it being too thick.

Finally, a custom shader could do the trick. You could develop a shader that samples the lines appropriately depending on distance from the camera. This option would give you the most fine-tuned approach, though it is much more complex to setup for newer developers.

Answer 4

This might be a bit overkill for this specific problem, but might want to have a look at Humus's Phone-wire anti-aliasing:

http://www.humus.name/index.php?page=3D&ID=89

The idea is to adjust the radius of the wire to make sure it does not get smaller than a pixel wide. If the wire's radius would make it smaller than a pixel, it clamps the width to a pixel and instead fades with an alpha value corresponding to the radius reduction ratio. For example, if the wire is deemed to be half a pixel large at current distance, it clamps width to a full pixel and sets coverage to 0.5 instead. While the technique solves the problem of aliasing due to thin geometry, it does not address the general problem of jaggies; however, your regular MSAA will take care of that. With both enabled you get a very natural looking wire at any distance.

A similar approach could likely be used on other aliasing prone geometry based on thin geometry, such as antenna towers, pipes and railings.

If you could apply it to your problem, I believe it would solve it in the best way possible.

(I realize that the question is old and the original poster has probably moved on by now, but it might be of use to someone else reading this.)