如何修复Clipping Outside Texture Shader的纹理挤压问题？

问题出在你直接用精灵自身的UV采样裁剪纹理，导致裁剪纹理被强制拉伸适配精灵的UV区间（0-1）。要实现独立的裁剪纹理位置控制，需要将精灵的像素坐标转换到裁剪纹理的坐标空间，具体修改如下：

shader_type canvas_item;

uniform sampler2D clip_texture;
uniform vec2 clip_offset = vec2(0.0, 0.0); // 裁剪纹理的偏移量，控制位置

void fragment() {
    // 获取裁剪纹理的实际像素尺寸
    vec2 clip_texture_size = textureSize(clip_texture, 0);
    // 计算当前像素在精灵上的绝对像素位置
    vec2 sprite_pixel_pos = UV * TEXTURE_SIZE;
    // 将精灵像素位置转换为裁剪纹理的UV坐标，加上偏移量
    vec2 clip_uv = (sprite_pixel_pos + clip_offset) / clip_texture_size;
    
    // 先判断当前坐标是否在裁剪纹理范围内，超出直接透明
    if (clip_uv.x < 0.0 || clip_uv.x > 1.0 || clip_uv.y < 0.0 || clip_uv.y > 1.0) {
        COLOR = vec4(0.0);
        return;
    }
    
    // 采样裁剪纹理
    vec4 clip_color = texture(clip_texture, clip_uv);
    // 用阈值判断透明，避免浮点精度问题
    if (clip_color.a < 0.01) {
        COLOR = vec4(0.0);
    } else {
        COLOR = texture(TEXTURE, UV);
    }
}

关键修改说明： #

• 添加clip_offset uniform参数：用来控制裁剪纹理相对于精灵的位置，直接输入像素值即可调整偏移。
• 坐标空间转换：
  1. 用textureSize(clip_texture, 0)获取裁剪纹理的真实像素尺寸，避免拉伸变形。
  2. 通过UV * TEXTURE_SIZE将精灵的UV坐标转换为绝对像素位置，确保和裁剪纹理的像素单位一致。
  3. 加上偏移后除以裁剪纹理尺寸，得到正确的采样UV，这样裁剪纹理不会被挤压，位置也能自由控制。
• 边界判断：提前过滤掉裁剪纹理范围外的像素，避免采样到纹理边缘的重复/透明区域。
• 浮点精度处理：用clip_color.a < 0.01代替==0.0，防止因浮点计算误差导致的错误裁剪。

内容的提问来源于stack exchange，提问作者cak3_lover