I am working on a GLSL fragment shader that aims to achieve the following sequential effects:
- Transition from texture 1 to a specific color
- Transition from the color to texture 2
Here's my initial attempt:
// Uniforms
uniform sampler2D tex1;
uniform sampler2D tex2;
uniform vec3 targetColor; // A custom color
uniform float progress; // Ranging from 0 to 1
// Varyings
varying vec2 vUv;
// Main function
void main() {
// Obtain the current pixel colors for each texture
vec4 texel1 = texture2D(tex1, vUv);
vec4 texel2 = texture2D(tex2, vUv);
// Beginning the transition from texture to color
vec3 mixedColor1 = mix(targetColor, texel1.rgb, (1.0 - progress * 2));
// Transition from color to texture
vec3 mixedColor2 = mix(targetColor, texel2.rgb, (0.5 + progress / 2));
// Combination of both transitions with respect to progress
vec4 finalTexture = mix(mixedColor1, mixedColor2, progress);
// Apply the final result
gl_FragColor = finalTexture;
}