Slice – 2D pixel perfect slice shader

The shader I posted above is mostly useful if you want to slice the whole screen, because the “slice center” you set in the shader parameters will be based on the center of the camera/viewport, NOT the center of your Texture node. So, it’s useless if you want to slice something that’s not near the center of the screen.

Here’s another version that actually center on your node’s center ( + whatever offset you set in the parameters). Allowing you to slice anything, anywhere. Yay!

shader_type canvas_item;


// Center of the slice, normalized [0,1]
uniform vec2 slice_center = vec2(0.5, 0.5);




// Angle of the slice in radians
uniform float slice_angle = 0.0;




// Distance to move the slices apart, normalized [0,1]
uniform float slice_distance = 0.0;




// Pixel size for pixel-perfect rendering
uniform float pixel_size = 1.0;




// Expansion factor for the sprite bounds
uniform float expansion_factor = 0.5;




// Border color for the expanded area
uniform vec4 border_color = vec4(0.0, 0.0, 0.0, 0.0);




uniform sampler2D screen_texture : hint_screen_texture, filter_linear_mipmap;






// Convert UV to pixel-perfect UV
vec2 pixel_uv(vec2 uv, float pixel_sizee) {
    return floor(uv * pixel_sizee) / pixel_sizee;
}




// Rotate a point around another point
vec2 rotate(vec2 point, vec2 center, float angle) {
    vec2 translated_point = point - center;
    float sin_angle = sin(angle);
    float cos_angle = cos(angle);
    vec2 rotated_point = vec2(
        translated_point.x * cos_angle - translated_point.y * sin_angle,
        translated_point.x * sin_angle + translated_point.y * cos_angle
    );
    return rotated_point + center;
}




void vertex() {
    // Expand the vertex positions and UVs
    VERTEX *= (1.0 + expansion_factor * 2.0);
    UV = (UV - 0.5) * (1.0 + expansion_factor * 2.0) + 0.5;
}




void fragment() {
	// Calculate screen resolution from SCREEN_PIXEL_SIZE
	vec2 screen_resolution = vec2(1.0) / SCREEN_PIXEL_SIZE;


	// Convert the fragment coordinates to normalized screen UV coordinates
	vec2 uv = FRAGCOORD.xy / screen_resolution;




    // Adjust UV to handle pixel-perfect rendering
    // uv = pixel_uv(uv, pixel_size);




    // Calculate the vector from the slice center to the current UV
    vec2 offset = (UV - slice_center) / screen_resolution;




    // Rotate the offset vector by the negative slice angle
    vec2 rotated_offset = rotate(offset, vec2(0.0), -slice_angle);




    // Determine which side of the slice the current UV is on
    bool is_top = rotated_offset.y > 0.0;




    // Move the UV based on the slice distance
    vec2 movement = vec2(
        slice_distance * cos(slice_angle),
        slice_distance * sin(slice_angle)
    );




    if (is_top) {
        uv += movement;
    } else {
        uv -= movement;
    }




    // Check if UV is outside the [0, 1] range and set the border color if it is
    if (uv.x < 0.0 || uv.x > 1.0 || uv.y < 0.0 || uv.y > 1.0) {
        COLOR = border_color;
    } else {
        // Sample the texture with the modified UV
        COLOR = texture(TEXTURE, uv);
    }
	vec3 c = textureLod(screen_texture, uv, 0.0).rgb;
	// Sample the screen texture at the calculated UV coordinates


	COLOR.rgb = c;
}

I think there’s still a small bug where the angle won’t be the same depending on the viewport aspect ratio (because SCREEN_PIXEL_SIZE and FRAGCOORD use the windows size, including the space outside the viewport. what I’d need is something like VIEWPORT_PIXEL_SIZE and a fragcoord equivalent too, but that doesnt seem to exist).

If anyone have a fix idea, please comment :). But that bug doesn’t seem like a big deal, try it out.