剪輯外部紋理着色器

Question

我正在嘗試創建一個着色器，它通過在着色器參數中輸入一個紋理（sampler2D）來決定精靈的輪廓，並剪輯它所綁定的任何東西

到目前為止，這是我能夠想到的：

shader_type canvas_item;

uniform sampler2D clip_texture;

void fragment(){
    vec4 color = texture(clip_texture, UV);
    
    if(color.a==0.0)
        COLOR=vec4(0.0, 0.0, 0.0, 0.0);
    else
        COLOR=texture(TEXTURE, UV);
    
}

但是這種方法似乎將Clip Texture壓縮到 sprite 分辨率

我猜 UV 在 0.0 - 1.0 之間，兩者都與此有關

那么我該如何解決呢？

編輯：進一步解釋我想要達到的目標

假設一個圖像放置在另一個圖像之上（放置在頂部的圖像將作為着色器參數傳遞）

現在，如果我們只裁剪重疊部分：

現在我們還應該能夠移動放置在頂部的圖像的位置（也許傳遞 xy 着色器參數？）並獲得相同的效果：

這就是我要使用着色器實現的目標

Answer 1

問題是 0.0 - 1.0 是icon.png的 UV，所以 1.0 將剪輯紋理的范圍映射到 64x64，縮小它。

shader_type canvas_item;

uniform sampler2D clip_texture;
uniform vec2 clip_texture_size;

void fragment(){
    vec2 texture_size = 1.0 / TEXTURE_PIXEL_SIZE;
    vec2 texture_ratio = texture_size / clip_texture_size;
    vec2 clip_UV = UV * texture_ratio;

    vec4 color = texture(clip_texture, clip_UV);
    
    if(color.a==0.0)
        COLOR=vec4(0.0, 0.0, 0.0, 0.0);
    else
        COLOR=texture(TEXTURE, UV);
    
}

對於icon.png ， TEXTURE_PIXEL_SIZE等於vec2(1.0/64.0, 1.0/64.0) 。 它的倒數是紋理大小： 1.0 / TEXTURE_PIXEL_SIZE 。 如果將紋理大小除以剪輯紋理大小，則得出紋理與剪輯紋理之間的比率。

您可以使用textureSize()而不是使用統一來確定紋理的大小，但它僅在 GLES 3 中可用。

這是一個根據您的編輯具有偏移統一的版本：

shader_type canvas_item;

uniform sampler2D clip_texture;
uniform vec2 clip_texture_size;
uniform vec2 clip_texture_offset;

void fragment(){
    vec2 texture_size = (1.0 / TEXTURE_PIXEL_SIZE);
    vec2 texture_ratio = texture_size / clip_texture_size;
    vec2 clip_UV = UV * texture_ratio + clip_texture_offset;
    
    vec4 color;
    if (clip_UV.x > 1.0 || clip_UV.x < 0.0 || clip_UV.y > 1.0 || clip_UV.y < 0.0) {
        color = vec4(0.0, 0.0, 0.0, 0.0)
    }
    else {
        color = texture(clip_texture, clip_UV);
    }
    
    if(color.a==0.0)
        COLOR=vec4(0.0, 0.0, 0.0, 0.0);
    else
        COLOR=texture(TEXTURE, UV);
    
}