GLSL 着色器：從紋理 1 淡入顏色，然后淡入紋理 2

Question

在 GLSL 中，我正在嘗試創建一個片段着色器，它按順序執行以下操作：

• 從紋理 1 淡入顏色
• 從顏色淡入紋理 2

這是一個非常艱難的開始：

// Uniforms
uniform sampler2D tex1;
uniform sampler2D tex2;
uniform vec3 targetColor; // A color
uniform float progress; // Between 0 and 1

// Varyings
varying vec2 vUv;

// Main function
void main() {

    // For each texture, get the current texel color
    vec4 texel1 = texture2D(tex1, vUv);
    vec4 texel2 = texture2D(tex2, vUv);

     // I think this is probably a good start
    vec3 mixedColor1 = mix( targetColor, texel1.rgb, (1.0 - progress * 2) );

    // Not so sure about this
    vec3 mixedColor2 = mix( targetColor, texel2.rgb, (0.5 + progress / 2) );

    // Probably wrong
    vec4 finalTexture  = mix(mixedColor1, mixedColor2, progress);

    // Apply
    gl_FragColor = finalTexture;
}

Answer 1

我會在第一次嘗試時嘗試調整系統的限制條件。 這個條件：

• 從紋理 1 淡入到顏色 -> 在進度 0 處應該有 texel1.rgb
• 從顏色淡入紋理 -> 應該在進度 1 有 texel2.rgb

所以：

// Main function
void main() {

    // For each texture, get the current texel color
    vec4 texel1 = texture2D(tex1, vUv);
    vec4 texel2 = texture2D(tex2, vUv);

     // I think this is probably a good start
    vec3 mixedColor1 = mix( texel1.rgb, targetColor, progress); // 0 texture1, 1 color

    // Not so sure about this
    vec3 mixedColor2 = mix( targetColor, texel2.rgb, 1- progress); // 0 color, 1 texture2

    // Probably wrong
    // 0 mixedColor1 so texture1, 1 mixedColor2 so texture2.
    vec4 finalTexture  = mix(mixedColor1, mixedColor2, progress); 

    // Apply
    gl_FragColor = finalTexture;
}

未調試，但認為您想要的 0 a 1 值是您可以適合開始試驗和調試着色器的直觀條件，這正是我的觀點。