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到颜色->应该有texel1.rgb在进程0
• 淡出从颜色到纹理->应该有texel2.rgb在进度1

所以：

// 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;
}

不是调试，但认为您想在0a1的值是直观的条件，您可以开始试用和调试着色器，这正是我的观点。