2d grid with adjacent cells

Based on Code Snippets:
Code Snippets – Grids
Code Snippets – Border

This shader divides canvas in n number of columns and n number of rows. Cells are adjacent, meaning there is no separation between them and the cell border is effectively inside the cell. Keep in mind that whether cells are square or not depends on number of columns and rows you provide in relation to window resolution. Also, if you resize the window, number of visible cells will remain constant but they will be stretched / squished even if they were square in the original resolution / window size.

Shader code
shader_type canvas_item;

uniform float columns = 64.0;
uniform float rows = 36.0;
uniform float border_width = 0.05;
uniform vec4 border_color : hint_color;

void fragment() {
    vec2 grid = fract(vec2(UV.x * columns, UV.y * rows));
	vec2 bottom_left = step(vec2(border_width), grid);
	vec2 top_right = step(vec2(border_width), 1.0 - grid);
	COLOR = border_color - (bottom_left.x * bottom_left.y * top_right.x * top_right.y);
The shader code and all code snippets in this post are under CC0 license and can be used freely without the author's permission. Images and videos, and assets depicted in those, do not fall under this license. For more info, see our License terms.

Related shaders

Perspective grid animated

Perspective Grid Remix March2021

world coordinates grid b&w shader

Inline Feedbacks
View all comments