Dashed grid not looking great

Hello,

I created a dashed grid, but when we zoom out, I notice the grid behaving strangely and the dashes not rendering well. Here’s an example along the red line:

Here’s the source code: https://codepen.io/ads4/pen/gOJpmyX

Any help is appreciated. Thanks!

This kind of effect is inevitable considering how the dashed material is implemented.

How about you switch to a normal continuous line when zooming out? Granted, this won’t work if you are close to the ground and look towards the horizon but for a typical top-down view it should work.

Thank you for your answer.
Even when I get closer I have this weird laggy effect moving. Is there really no alternative to render a dashed grid?
My project is about recoding an old software from scratch with new technologies, it can display dashed grid correctly using OpenGL:
image

How does your previous OpenGL app rendered dashed lines? Can you share some information about the library or the used material/technique?

If you do not hate dashed textures, here is one:

https://codepen.io/boytchev/full/GRaJMbz

image

3 Likes

I’ll throw in this neat one made by Evan Wallace which also gets into the interesting topic of fwidth:

https://madebyevan.com/shaders/grid/

3 Likes

@Mugen87 After reviewing the code of the old software, I noticed that it draws the grid using lines with glLineStipple. Then, we have two for loops drawing each line of the grid. That’s not the most optimal way of drawing a grid.
I’m going to implement the texture technique suggested by @PavelBoytchev
Thank you really much for helping!

1 Like

Sorry for bothering again, but how can I change the color of the grid? Thanks.
EDIT: Nevermind, I found! But I would like the grid to be more precise, I want it to seperate at coordinates (0,0), (0,100), (0, 200) etc. Is it possible?

The texture is one block, repeated many times. You can adjust the number of repetitions in a way that the copies of the blocks appear where you want. Also, you may draw other type of dashed line (as dashed pattern, width, etc) , the one in my demo is just provisional.

1 Like