Snap rope points to pixel for Ropes + textures + pixel perfect rendering

[Cuber01]

Hello, I managed to get random tiles to show over the rope using this shader on the rope renderer:

shader_type canvas_item;

uniform sampler2D texture_source : source_color, filter_nearest;
uniform int region_count : hint_range(1, 16) = 4;
uniform ivec2 region_size_px = ivec2(64, 64);
uniform float seed : hint_range(0.0, 1.0) = 0.123;
uniform float tiles_per_unit : hint_range(1.0, 20.0) = 1.0;

void fragment() {
    ivec2 texture_size = textureSize(texture_source, 0);
    vec2 region_size = vec2(region_size_px) / vec2(texture_size);
    ivec2 region_grid = ivec2(texture_size) / region_size_px;
    
    // Per-tile randomness using UV.x progress
    float tile_progress = floor(UV.x * tiles_per_unit);
    float rand_val = fract(sin((tile_progress + seed) * 12.9898) * 43758.5453);
    int region_idx = int(floor(rand_val * float(region_count)));
    
    // Clamp to available regions
    region_idx = min(region_idx, region_grid.x * region_grid.y - 1);
    
    ivec2 region_pos = ivec2(region_idx % region_grid.x, region_idx / region_grid.x);
    vec2 region_offset = vec2(region_pos) * region_size;
    
    // We need to apply 90deg rotation to compensate for godot rotating the texture by default
    vec2 local_tile_uv = vec2(fract(UV.x * tiles_per_unit), UV.y);
    vec2 rotated_uv = vec2(1.0 - local_tile_uv.y, local_tile_uv.x); 
    vec2 region_uv = rotated_uv * region_size + region_offset;
    
    COLOR = texture(texture_source, region_uv);
}

However, I encounter an issue with pixel perfect rendering. The rope and renderer are snapped to pixel, and all the required pixel perfect options are enabled (scaling, pixel snapping, nearest filter, filter_nearest in shader etc), and yet the rope textures have certain minor artifacts (eg. lack pixels), even when the rope does not move. I believe this is caused by the rope points generated by rope being unaligned with the pixel grid (eg. one of the points is at [0, 29.378]). Would it be possible to add an option to make the points snapped to the pixel grid? I'm not 100% this is the issue, so please correct me if I'm wrong.

[mphe]

I think I can add an option to the rope renderer. Snapping the rope points directly would affect the simulation.

Could you please upload a minimal reproduction project? Makes it easier for me to test and investigate.

[Cuber01]

Surely, I will send you a reproduction project when I'm back home (max 48hrs since I come back very late)

[Cuber01]

Hey! Here's the reproduction project. As you can see on the screenshot, the rendering is almost right... almost...

ReproductionRope.zip

[mphe]

I think these are normal interpolation artifacts. The shader seems to produces output in a higher resolution than your rendering resolution.
When it gets subsampled to a lower resolution, those artifacts appear.

Imagine there are two pixels next to each other, one transparent, one not. They get squished down to the rendering resolution and now they are both positioned at roughly the same pixel. Since you have nearest interpolation, the nearest pixel gets rendered, which might be the transparent one. And that's why you see holes.

Here is a comparison with the normal rope texture (left) and the shader (right).
The left looks much cleaner because it's much closer to the render resolution.

If you want pixel perfect graphics you need to match everything to your rendering resolution and the pixel grid, or you will inevitably get artifacts.
There are many resources on the internet about achieving pixel perfect graphics, it's a kind of science on its own.
The key is keeping everything perfectly aligned to the pixel grid.

This is not possible here because the render meshes are not aligned to the grid.
Even if the rope points would be snapped to pixels, Line2D creates a mesh around the rope with the given width. These vertices aren't snapped to pixels and there is nothing we can do about it besides enabling rendering/2d/snap/snap_2d_vertices_to_pixel to let Godot force vertices to be snapped to pixels.
But even when the vertices are snapped to full pixels, the quads/triangles are still are not always axis aligned (e.g. while the rope is moving), which can cause artifacts again.

You have the following options:

• Live with it
• Render in a higher or native resolution
• Make your texture thicker than 1px
• Adapt the shader to output in a lower resolution comparable to the original
• Just use the texture as it is.

I'd recommend to keep it simple, draw a long texture with many variations, similar to how you already have it, and then just apply a simple UV offset with the shader (randomly selected per rope). Probably good enough.

[Cuber01]

I achieved partial success by modifying my shader a bit, alas it seems that something with the way line2d renders the texture is broken, causing minor artifacts even when the rope stands still. Thank you for your time