GLSL Shader: Fade from texture 1 to color, then to texture 2

usersQk3 0
Viewed 22

In GLSL, I am trying to create a fragment shader that does the following in sequence:

  • Fade from texture 1 to a color
  • Fade from the color to texture 2

Here's a very rough start:

// 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;
}
fragment-shader glsl shader three.js javascript
1 Answers

I would try to adjust the conditions of the limit of the system in the first attempt. This conditions:

  • Fade from texture 1 to a color -> should have texel1.rgb at progress 0
  • Fade from the color to texture -> should have texel2.rgb at progress 1

So:

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

Not debugged, but think that the values you want at 0 a 1 are the intuitive conditions that you can fit to start trials and debug the shader, that is just my point.

rustyBucketBay0
Related