Diamond-based Screen Transition

A transition shader drawn from this article by Timm[ie] Wong @DDRKirbyISQ. Permission was given by this individual for this post. The article explains more in depth and similar versions of this shader. Animating the shader parameter “progress” creates the transition effect. I have found that a tween using trans_cubic and ease_out looks pretty nice. Changing the final line from > to < will reverse the transition effect.

tween.interpolate_property(mymaterial, “shader_param/progress”, 1, 0, 1.5, Tween.TRANS_CUBIC, Tween.EASE_OUT) 

Shader code
shader_type canvas_item;

// Ranges from 0 to 1 over the course of the transition.
// We use this to actually animate the shader.
uniform float progress : hint_range(0, 1);

// Size of each diamond, in pixels.
uniform float diamondPixelSize = 10f;

void fragment() {
	float xFraction = fract(FRAGCOORD.x / diamondPixelSize);
	float yFraction = fract(FRAGCOORD.y / diamondPixelSize);
	float xDistance = abs(xFraction - 0.5);
	float yDistance = abs(yFraction - 0.5);
	if (xDistance + yDistance + UV.x + UV.y > progress * 4f) {
		discard;
	}
}
Tags
blend, transition
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

Lines Screen Transition

Tile Based Triangles & Rects

Samuel Wolffang based rgb shift shader

guest

5 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Pixelneed
Pixelneed
1 year ago

Does anyone know how to make it look pixelized?

ttyyyyy
1 year ago
Reply to  Pixelneed

you can just put it behind a low-res viewport

Shady
Shady
1 year ago

A slightly more optimized version (avoiding shader-unfriendly if statement):
See https://godotshaders.com/shader/optimize-your-shaders/

shader_type canvas_item;


// Ranges from 0 to 1 over the course of the transition.
// We use this to actually animate the shader.
uniform float progress : hint_range(0, 1);


// Size of each diamond, in pixels.
uniform float diamondPixelSize = 10f;


float when_lt(float x, float y) {
  return max(sign(y - x), 0.0);
}

void fragment() {
	float xFraction = fract(FRAGCOORD.x / diamondPixelSize);
	float yFraction = fract(FRAGCOORD.y / diamondPixelSize);
	float xDistance = abs(xFraction - 0.5);
	float yDistance = abs(yFraction - 0.5);
	COLOR.a *=  when_lt(xDistance + yDistance + UV.x + UV.y, progress * 4f);
}
Nzr
Nzr
10 months ago

how to make it square not diamond?

DriftWare.exe
DriftWare.exe
6 months ago

Heck yeah! Fancy screen transition! super easy to use and animate, too!