3

I'm basically following this Codrops example to add a displacement map effect for my website. However I want to make it a slideshow with direction, e.g. clicking "next" would make the displacement map move right and transition the image, and the opposite for clicking "previous". Below is the shader code:

Fragment Shader:

varying vec2 vUv;

uniform sampler2D texture1;
uniform sampler2D texture2;
uniform sampler2D disp;

uniform float dispFactor;
uniform float effectFactor;

void main() {

    vec4 disp = texture2D(disp, vUv);
    vec2 distortedPosition1 = vec2(uv.x + dispFactor * (disp.r*effectFactor), uv.y);
    vec2 distortedPosition2 = vec2(uv.x - (1.0 - dispFactor) * (disp.r*effectFactor), uv.y);

    vec4 _texture1 = texture2D(texture1, distortedPosition1);
    vec4 _texture2 = texture2D(texture2, distortedPosition2);

    vec4 finalTexture = mix(_texture1, _texture2, dispFactor);

    gl_FragColor = finalTexture;
}

Right now I can only get the direction to be alternating right / left. To do this, I keep track of the current texture I'm displaying on the slideshow. To transition, I set the other texture uniform (texture2 if texture1 is being displayed and vice versa) and then tween the dispFactor back and forth between 0 and 1. So if I keep clicking "next", the animation would be swiping right, left, right, left, and so on.

I'm trying to wrap my head around this and figure out a way to input a direction but I think that's where I hit the ceiling of my Three.js knowledge.

gman
  • 100,619
  • 31
  • 269
  • 393
cheng
  • 1,264
  • 2
  • 18
  • 41

1 Answers1

0

Well i found the solution.

setInterval(function(){
    if(i == 0){
        TweenMax.to(mat1.uniforms.dispFactor, speedIn, {
            value: 1.0,
            ease: 'Expo.easeInOut',
            onComplete: function () {
                mat1.uniforms.texture1.value = textures[j];
                mat1.uniforms.texture1.needsUpdate = true;
                j = (j < 4) ? ++j : 0;
            }
        });
        i++;
    }else{
        TweenMax.to(mat1.uniforms.dispFactor, speedOut, {
            value: 0.0,
            ease: 'Expo.easeInOut',
            onComplete: function () {
                mat1.uniforms.texture2.value = textures[j];
                mat1.uniforms.texture2.needsUpdate = true;
                j = (j < 4) ? ++j : 0;
            }
        });
        i--;
    }

}, 4000);

I found the solution on this project, i use his function onComplete: funtion(){...} for update the textures.

https://gist.github.com/MadebyAe/9d5314568cd0f156d74d6c128993c0e0

Enjoy it!! :D

user13126756
  • 1