Pixelated diamond directional fading transition

This is a revision of this shader here, if you know how to use it you can skip the description – it is almost the same. This shader generates a pixelated diamond pattern halftone effect, instead of spherical patterns.

Important: part of this code has been written by Zacksly for another Godot shader published under MIT licence. He has the merit for the halftone processing, I’ve just copied and edited it as canvas item (I’ve looked for other sources, but with no luck). I’m putting here the link for the original shader on Itch.io, both due to the only restriction of MIT licence and because looking original shader is really worth it:
https://zacksly.itch.io/half-tone-comic-shader-for-godot
I’m also leaving the comments of the original code, so you can see what I’ve effectively edited.

Parameters:

• Aspect Ratio: referred to the diamonds.
• Diamonds: the number of diamonds in each row, columns are affected due to aspect ratio.
• Pixel Size: referred to the density of dots.
• Height: the height of the curtain. If it’s -1.0 the entire canvas is transparent, if it’s higher, a part of the canvas is filled by the halftone effect, if it’s 1.0 the entire canvas is filled. Change this value to make the fade transition:
  canvas_item.material.get("shader_param/height", height)
• Disable Pixel: render the diamonds without the pixel effect.

Behaviour:

• This shader behaves like a drama curtain: a black filter fills the canvas item of a texture from downside, leaving the remaining part transparent. To use it, you have to add it directly to a canvas item as shader material.
• If you want to make the transition from another direction, for example from upside, you have to rotate the canvas item.
• It’s supposed to work in Control rects, but sprites and other node2D’s should work as well.
• If you use it on a Color rect, the shader ignores the Color property of the node, use Modulate instead.
• The shader works in any version with any backend (or, if there are sintax differences, I’ve not found ’em yet)

Warning:

• This shader can present some visual artifact due to pixel imprecision. To solve them I’ve used a round function on the greyscale calculation, but it isnt’enough I guess. To hide it try either making the transition faster or directly setting Disable Pixel true.

Shader code

// Original : Shader By Zacksly - https://zacksly.itch.io/
shader_type canvas_item;

uniform float AspectRatio = 1.5;
uniform float Diamonds = 10.0;
const float _min = -1.0;
const float _max = 1.0;
uniform float pixel_size = 0.08;

uniform float height = -1.0;
uniform bool disable_pixel;

void fragment() {

	vec3 uv_grid = fract(vec3(UV, 0.0) * vec3(AspectRatio * Diamonds, Diamonds, 0.0));
	if(! disable_pixel)uv_grid = round(uv_grid / pixel_size) * pixel_size;
	float grid = abs(uv_grid.x - 0.5) + abs(uv_grid.y - 0.5);
	vec3 raw_cam_image = vec3(UV.y + height)*1.5;
	vec3 grayscale;
	{
		float max1 = max(raw_cam_image.r, raw_cam_image.g);
		float max2 = max(max1, raw_cam_image.b);
		grayscale = vec3(max(max1, max2));
	}
	vec3 clamped;
	if( disable_pixel)
		clamped = clamp(grayscale, vec3(_min), vec3(_max));
	else
		clamped = round(clamp(grayscale, vec3(_min), vec3(_max))/0.1)*0.1;

	bool black_dot_grid = grid > dot(vec3(1.0) - clamped, vec3(0.333333));

	vec4 texture_uv = texture(TEXTURE,UV);
	vec4 grid_result = black_dot_grid? texture_uv : vec4(0.0);

	COLOR.rgb = grid_result.rgb;
	COLOR.a = grid_result.a;
}

Tags