Pseudo Pixel Sorting

Real-time pixel sorting is too expensive, so i made a pseudo version instead.

Inspired by: https://www.shadertoy.com/view/tltyzB

Shader code
//MADE BY : @ahopness
//LICENSE : CC0
//COMATIBLE WITH : GLES2, GLES3, WEBGL

shader_type canvas_item;

uniform float sort :hint_range(0.0, 2.6)= 0.0;

void fragment(){
	vec2 uv = FRAGCOORD.xy / (1.0 / SCREEN_PIXEL_SIZE).xy;
	
	// Pseudo Pixel Sorting
	float sortThreshold = 1.0 - clamp(sort / 2.6, 0.0, 1.0);
	vec2 sortUv = vec2(uv.x, sortThreshold);
	
	// Curved melting transition
	vec2 transitionUV = uv;
	transitionUV.y += pow(sort, 2.0 + (sort * 2.0)) * uv.x * fract(sin(dot(vec2(transitionUV.x), vec2(12.9, 78.2)))* 437.5);
	COLOR = texture(SCREEN_TEXTURE, transitionUV);
	
	// Draw pixel sorting effect behind the melting transition
	if(transitionUV.y > 1.){
		COLOR = texture(SCREEN_TEXTURE, sortUv);
	}else{
		COLOR = texture(SCREEN_TEXTURE, uv);
	}
}
Tags
glitch, Pixel Sort, Post processing
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.

More from Ahopness

CRT Shader with realistic blurring

Gradient overlay post-processing shader

Related shaders

Sub-Pixel Accurate Pixel-Sprite Filtering

Pixel art trail

Pixel transition

guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Ninjakrom
Ninjakrom
1 month ago

How can use this shader?