The Best Darn Grid Shader (Yet)

"Which, if you’re like me and didn’t finish their college level math courses, means absolutely nothing. I dropped out of art school, so it’s mostly over my head."

This is why Ben Golus's posts on shaders are the best. Cause they're actually accessible.

This was really interesting. I don't love the fading out to solve the moire in the final solution. I wonder if some dithering would feel better and give the impression there are lines out there rather than a smooth gray surface? Or maybe some jitter to break up the pattern?

This isn't shown in the post, but sometimes the moire feels worse if you are walking around and the moire has a movement of its own (either flickering/shimmering or sweeping across in uv space), and it's probably a decent benefit to get rid of the moire even if it's imperfect.

Looks very interesting. I’m confused by the note in the intro though:

> Note: I highly recommend viewing this article in dark mode.

I’m trying, but it seems like Medium doesn’t even have a dark mode? Is this reposted from somewhere else?

This is really awesome. to ask a dumb question, what’s a good way to get acclimated with running and building shaders? Just going straight to OpenGL tooling and extrapolating from there?

I love this article! I used it as a basis for the multi-level grid in SuperSplat (https://playcanvas.com/supersplat/editor).

It's awesome so much effort was put into rendering a grid. Great write up.

This is great! I have a little viewer app for a code-based CAD tool and I've been delaying making a grid for it as I haven't found a satisfactory solution for it until I just read this article :)

Beautiful work. I'm happy to read it from start to finish. Not at all sure I have an application for this, but I completely get why this is a beautiful thing :)

Very nice, I'd use it as one of the starting points if I was to learn 3D graphics as it touches upon a lot of math details in a seemingly simple problem.

I have an even better darn grid shader that I use in my graphics projects.

The shader in this article wants to emulate the look of a sampled texture so that it blurs to medium gray at distance while avoiding moire patterns. And it does indeed look quite good at what it's aiming for.

I on the other hand wanted an "infinitely zoomable grid paper" look with constant-ish pixel width lines, such that the density of the grid changes. If applied to a "ground" plane, the grid gets sparser near the horizon. When you zoom in, the grid gets denser with a new "decade" of grid fading in with the old grid fading out.

I generally apply this to a "full screen triangle", and do a raycast against the ground plane (e.g. the y = 0 plane) and extract the "uv" coordinates from the raycast result (that would be the x,z coordinate of the ray hit). I've also applied this technique to a skybox, where I take the view ray direction unit vector and convert it to spherical coordinates (latitude, longitude) for the UV.

This shader gives a very clean looking grid at almost any viewing angle and distance. If your world space units are meters, this can be zoomed in from nanometers to gigameters while looking crisp and clean. Unfortunately, floating point issues take over after that point and there are some pixel artifacts when the camera is very close to the ground plane and the viewing angle is extreme. This could be fixed by adding some clamping to the the `log_width` variable, but I haven't bothered with that as I don't work in nanometers in computer graphics projects. There's also some flickering at the horizon line, which I've solved with a trivial fade out factor (not visible in the source code below).

As it is shown below, it'll show a grid with a subdivision factor of 10, like millimeter paper with the primary grid in centimeters and secondary grid in millimeters. The subdivision can be changed by adjusting the `base` and `N` variables. See the comments for explanation.

Here's the thing in all its glory. Apologies that I don't have a screenshot hosted where I could share. Please let me know if you're trying this out in your projects.

    float grid(vec2 uv, float linewidth) {
        vec2 width = linewidth * fwidth(uv);
        vec2 grid = abs(fract(uv - 0.5) - 0.5) / width;
        float line = min(1.0, min(grid.x, grid.y));
        return 1.0 - line;
    }

    float decade_grid(vec2 uv) {
        // grid subdivision factor (logarithm base)
        float base = 10.0;
        // grid density, primary grid is approximately base^N pixels wide
        // with N = 3, primary grid is 100 pixels, secondary grid 10 px
        float N = 3.0; // 3.0 is the densest grid that does not have moire patterns

        // approximate grid cell size using screen space uv partial derivatives
        vec2 width = fwidth(uv);
        //vec2 width = vec2(length(dFdx(uv)), length(dFdy(uv)));
        float w = max(width.x, width.y);
        //float w = length(width.xy);

        // take logarithm of grid cell size to find zoom factor
        float log_width = log2(w) / log2(base); // logarithm change of base

        // round down to find grid zoom factor (power of ten)
        float exponent = -floor(log_width) - N;
        float blend = 1.0 - fract(log_width); // blend between powers of ten

        // primary grid with wider lines
        float grid1 = grid(uv * pow(base, exponent), 1.0 + blend);
        // secondary grid with narrow lines
        float grid2 = grid(uv * pow(base, exponent + 1.0), 1.0);

        // mix primary and secondary grid with linear interpolation
        return mix(grid1, grid2, blend);
    }

The whole article I was wondering why the lines that were naturally aligned to the pixel grid were privileged.

Why wouldn't you fade all lines according to their depth towards the horizon?

> At least until Mr. Quilez writes a shader that beats this one.

Made me chuckle. He truly is in a class of his own.

Can’t wait to try this.