Grid shader tutorial

FencerDevLog February 19, 2024August 6, 2024

Hi everybody! In this video, we will create a shader that displays a grid. It may sound simple, but such a grid is a very useful element, whether for debugging or its use in various effects.

See more about this shader

Shader code

shader_type canvas_item;

uniform vec2 resolution = vec2(600.0, 400.0);
uniform vec3 line_color: source_color = vec3(0.2, 0.3, 0.5);
//uniform float zoom: hint_range(1.0, 50.0, 0.1) = 20.0;
uniform float thickness: hint_range(0.1, 10.0, 0.1) = 2.0;
uniform float brightness: hint_range(0.1, 4.0, 0.1) = 2.0;

float draw_grid(vec2 uv) {
	vec2 grid_uv = cos(uv * TAU);
	return max(grid_uv.x, grid_uv.y);
}

vec2 rotate(vec2 uv, float angle) {
	return uv * mat2(vec2(cos(angle), -sin(angle)), vec2(sin(angle), cos(angle)));
}

void fragment() {
	vec2 uv = UV - 0.5;
	uv.x *= resolution.x / resolution.y;
	uv += vec2(sin(TIME) * 0.4, cos(TIME) * 0.6);
	uv = rotate(uv, TIME * 0.1);
	float zoom = abs(sin(TIME * 0.5)) * 40.0;
	float line_thickness = zoom * thickness / resolution.y;
	vec3 color = smoothstep(1.0 - line_thickness, 1.0, draw_grid(uv * zoom)) * line_color;
	COLOR = vec4(color * brightness, 1.0);
}